Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Fonts with Web Design
Search
Takuji Ikeda
April 13, 2012
Design
6
6.3k
Web Fonts with Web Design
2012/04/12 Morisawa TypeSquare Tie-up Seminor on Pasona Tech.
Takuji Ikeda
April 13, 2012
Tweet
Share
More Decks by Takuji Ikeda
See All by Takuji Ikeda
20131101JAGAT_short.pdf
tikeda
1
200
UI for everyday's cooking
tikeda
38
17k
Patterns of UI Design
tikeda
3
910
Sass for everyday's cooking
tikeda
21
1.9k
Other Decks in Design
See All in Design
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
0
1k
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
370
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
MLP_Cleanup_Olga
olgastoryboard
0
140
portfolio
amitnk
1
120
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
210
アフォーダンスとシグニファイア
ryokanakai
0
300
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
790
ito aya|Portfolio2409
itoaya116
0
250
Design System for training program
mct
0
130
Design System for training program
mct
0
280
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
250
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
The Cult of Friendly URLs
andyhume
78
6k
GraphQLとの向き合い方2022年版
quramy
43
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Designing for humans not robots
tammielis
249
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Being A Developer After 40
akosma
86
590k
BBQ
matthewcrist
85
9.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Transcript
Takuji Ikeda Web Fonts with Web Design ͕Δ“ຊޠ Web Fonts”ͷੈք
WebσβΠϯʹ“ϑΥϯτ”ΛऔΓೖΕΔͱʁ ʙ ϞϦαϫ ʮType Squareʯ λΠΞοϓηϛφʔ ʙ 2012/4/12 THU @ύιφςοΫ 124݄16݄༵
ࣗݾհ •ా࢘ Takuji Ikeda •ΫοΫύουגࣜձࣾɹσβΠφʔ •http://tikeda.net/ɹ •http://d.hatena.ne.jp/tikeda/ ɹ •Twitter: @tikedaɹ
•ஶॻʰHTML5ςΫχΧϧϨϏϡʔ ʢϦοΫςϨίϜʣ ʱ 124݄16݄༵
Twitter Hash Tag #typesquare TwitterͰੋඇͭͿ͍͓͍͍ͯͯͩ͘͞ɻ ࠷ޙͷσϞͰօ͞ΜͷͭͿ͖Λ͍·͢ɻ 124݄16݄༵
AGENDA 1. Web Fonts ͜ͱ͡Ί 2. ͬͯΈΑ͏ Web Fonts 3.
ʮ͑Δٕज़ʯʹ͢ΔҝͷڧΈͱऑΈ 4. ࣮ફʮTypeSquareʯ 5. Web FontsʹΘΕͳ͍ҝͷ৺ಘ 124݄16݄༵
1 Web Fonts ͜ͱ͡Ί 124݄16݄༵
Web Fonts ద༻લ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
Web Fonts ద༻ޙ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
Web Fonts ద༻ޙ Jun 501 Jun 201 Fredoka One http://demo.tikeda.net/webfont/demo1.html
͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
͜Ε·Ͱ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 124݄16݄༵
Web Fontsͷొ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 124݄16݄༵
Web FontsΛར༻͢ΔࣄͰɺ WebͷςΩετΛݟΔଆͷڥ ʹؔΘΒͣҙਤͨ͠ϑΥϯτͰ Web PageΛݟͤΔࣄ͕Ͱ͖Δ 124݄16݄༵
ࣄྫհ ւ֎ͷࣄྫ / αʔϏεͷࣄྫ / ࠃͷࣄྫ / ৽ͨͳࢼΈ 124݄16݄༵
http://nikebetterworld.com/ Nike Better World ࣄྫհʢԤถαΠτʣ 124݄16݄༵
http://nikebetterworld.com/ Nike Better World ࣄྫհʢԤถαΠτʣ Din Display Pro Thin NikeGratton
124݄16݄༵
http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫհʢԤถαΠτʣ 124݄16݄༵
http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫհʢԤถαΠτʣ bello-caps oxtail
omnes-pro 124݄16݄༵
http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ Fit Fext ࣄྫհʢԤถαΠτʣ 124݄16݄༵
http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ Fit Fext ࣄྫհʢԤถαΠτʣ corner-store-1 bello-caps-1 124݄16݄༵
http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫհ 124݄16݄༵
http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫհ Frutiger LT W01 65
Bold EgyptianSlateW01-Medium 124݄16݄༵
http://flavors.me/ Flavors.me ࣄྫհʢServiceʣ 124݄16݄༵
http://flavors.me/ Flavors.me ࣄྫհʢServiceʣ Richard Miller rnd book 124݄16݄༵
http://typesquare.com/ TypeSquare ࣄྫհʢຊʣ 124݄16݄༵
http://typesquare.com/ TypeSquare ࣄྫհʢຊʣ ৽ΰ M UD ৽ΰ M 124݄16݄༵
http://pr.fontplus.jp/ Web Designing ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫհʢຊʣ 124݄16݄༵
http://pr.fontplus.jp/ Web Designing ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫհʢຊʣ FOT-ஜࢵΦʔϧυ໌ே Pro R FOT-ஜࢵ໌ே Pro
B 124݄16݄༵
http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫհʢຊʣ 124݄16݄༵
http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫհʢຊʣ deco-BokutohRuika02 124݄16݄༵
http://pictos.cc/font/ PICTOS ৽͍͠Web FontsͷΘΕํ 124݄16݄༵
CSSʹΑΔ࣮ํ๏ CSS Fonts Module Level 3 http://www.w3.org/TR/css3-fonts/ 124݄16݄༵
CSSʹΑΔ࣮ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.woff”) format(“woff”); } h1
{ font-family: “FontName”, sans-serif; } 124݄16݄༵
CSSʹΑΔ࣮ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.eot?#iefix”) format(“eot”), url(“FontName.woff”) format(“woff”),
url(“FontName.truetype”) format(“truetype”), url(“FontName.svg”) format(“svg”); } ※ http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax 124݄16݄༵
ϑΥϯτܗࣜ •.eot (Embedded Open Type) Internet Explorer 8ҎԼʹରԠ͢Δಠࣗܗࣜ •.woffʢWeb Open
Font Formatʣ ࠷৽ϒϥβ͕ରԠΛ࢝ΊͨΣϒઐ༻ܗࣜ •.ttfʢTrue Typeʣ ύιίϯͰೃછΈ͋ΔੜͷϑΥϯτܗࣜ •.svg WebͷϕΫλʔσʔλܗࣜΛϑΥϯτʹԠ༻ 124݄16݄༵
Web Fontsͷใݯ ࠃ֎ͷ࠷৽ࣄྫɺCSS࣮ঢ়گͳͲใΛಘΔखஈ 124݄16݄༵
http://blog.petitboys.com ϑΥϯτϒϩά Web Fontsͷใݯ 124݄16݄༵
http://blog.typekit.com/ The Typekit Blog Web Fontsͷใݯ 124݄16݄༵
http://blog.fonts.com/ fonts.com blog Web Fontsͷใݯ 124݄16݄༵
ͬͯΈΑ͏Web Fonts 2 124݄16݄༵
Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β͏ •͍͍ͨϑΥϯτΛ·ͣ୳͢ͱ͜Ζ͔Β 124݄16݄༵
Web FontsαʔϏεΛར༻͢Δ 124݄16݄༵
http://typesquare.com/ TypeSquare ࠃ 124݄16݄༵
http://webfont.fontplus.jp/ ϑΥϯτϓϥε ࠃ 124݄16݄༵
http://decomoji.jp/ σί͡ ࠃ 124݄16݄༵
http://amanaimages.com/font/web/index.aspx amana images ࠃ 124݄16݄༵
http://typekit.com/ typekit ւ֎ʢԤจϑΥϯτʣ 124݄16݄༵
http://www.google.com/webfonts Google web fonts ւ֎ʢԤจϑΥϯτʣ 124݄16݄༵
TypeSquare ར༻ͷྲྀΕ http://typesquare.com/ 124݄16݄༵
STEP1: Ϣʔβʔొ TypeSquare ར༻σϞ 124݄16݄༵
STEP2: ίʔεͷબ TypeSquare ར༻σϞ 124݄16݄༵
STEP3: ใͷೖྗ TypeSquare ར༻σϞ 124݄16݄༵
STEP4: ϩάΠϯ TypeSquare ར༻σϞ 124݄16݄༵
STEP5: ར༻αΠτͷొ TypeSquare ར༻σϞ 124݄16݄༵
STEP6: JavascriptͷுΓ͚ TypeSquare ར༻σϞ 124݄16݄༵
STEP7: ར༻ϑΥϯτͷબఆ TypeSquare ར༻σϞ 124݄16݄༵
STEP8: PVϨϙʔτ TypeSquare ར༻σϞ 124݄16݄༵
ϑΥϯτΛߪೖͯࣗ͠લαʔόʔͰ͏ 124݄16݄༵
http://www.myfonts.com/ My Fonts Web Fontsʹ͑ΔϑΥϯτΛߪೖ 124݄16݄༵
http://www.fontshop.com/fontlist/n/web_fontfonts/ Font Shop Web Fontsʹ͑ΔϑΥϯτΛߪೖ 124݄16݄༵
http://webfonts.fonts.com/en-US Fonts.com Web Fontsʹ͑ΔϑΥϯτΛߪೖ 124݄16݄༵
My FontsͰϑΥϯ τߪೖ http://www.myfonts.com/ 124݄16݄༵
MyFonts τοϓ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
رͷϑΥϯτΛߪೖ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
μϯϩʔυ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
μϯϩʔυϑΝΠϧ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
HOW TO ? MyFontsͰϑΥϯτߪೖ 124݄16݄༵
͍͍ͨϑΥϯτΛ·ͣ୳͢ 124݄16݄༵
http://typesquare.com/simulator/ ΫϥυϑΥϯτ ɾ γϛϡϨʔλ ৭ʑͳύλʔϯΛࢼͯ͠ΈΔ 124݄16݄༵
http://www.myfonts.com/WhatTheFont/ WhatTheFont ը૾͔ΒϑΥϯτΛೝࣝ 124݄16݄༵
http://itunes.apple.com/jp/app/whatthefont/id304304134 WhatTheFont for iOS ը૾͔ΒϑΥϯτΛೝࣝ 124݄16݄༵
http://fount.artequalswork.com/ Fount Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 124݄16݄༵
http://chengyinliu.com/whatfont.html WHAT FONT TOOL Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 124݄16݄༵
http://www.freefontconverter.com/ FreeFontConverter ख࣋ͪͷϑΥϯτΛม 124݄16݄༵
http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม 124݄16݄༵
http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม ϥΠηϯεʹཁҙ 124݄16݄༵
Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ ͙͢ʹ࢝ΊΒΕΔɻ Ͱແྉͩͱ੍ݶ͕͋Δͷ ͕ଟ͍ɻʮTypeSquareʯແྉఏڙத •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β͏ Ұ൪Φʔι υ
ο Ϋ εͰඞཁͳεΩϧͷशಘ͕Ͱ͖Δɻ •͍͍ͨϑΥϯτΛ·ͣ୳͢ͱ͜Ζ͔Β ࠓ͙͢Ͱͳͯ͘ɺ ײ͓͚͋͛ͯΔखஈ 124݄16݄༵
ʮ͑Δٕज़ʯ ʹ͢ΔҝͷڧΈͱऑΈ 3 124݄16݄༵
ڧΈ 124݄16݄༵
ΣϒαʔϏεͳͲͷ ಈతίϯςϯπͷσβΠϯ 124݄16݄༵
جຊతͳσβΠϯͷखॱ ίϯςϯπ 124݄16݄༵
σβΠϯ جຊతͳσβΠϯͷखॱ ίϯςϯπ 124݄16݄༵
σβΠϯ ίϯςϯπ ίϯςϯπ͋Γ͖Ͱ σβΠϯΛߟ͑8FC 1BHFͷ࡞Λߦ͏ جຊతͳσβΠϯͷखॱ 124݄16݄༵
σβΠϯ ΣϒαʔϏεσβΠϯͷखॱ 124݄16݄༵
σβΠϯ ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ 124݄16݄༵
σβΠϯ ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ ݩ͋ΔσβΠϯΛબΜ ͰίϯςϯπΛϢʔ βʔ͕ྲྀ͠ࠐΉҝޙ͔ Β࠷దͳσβΠϯΛࢪ ͤͳ͍ 124݄16݄༵
http://d.hatena.ne.jp/tikeda/ tikeda::Diary What’s Web Font 124݄16݄༵
What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ 124݄16݄༵
What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ Cabin Sketch 124݄16݄༵
What’s Web Font 124݄16݄༵
ϕΫλʔσʔλΛੜ͔ͨ͠σβΠϯ 124݄16݄༵
Responsive Design http://demo.tikeda.net/webfont/demo1.html ͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
CSS3 Design ※ http://blog.typekit.com/2012/03/08/parkinson-type-design-joins-typekit/ 124݄16݄༵
౷Ұੑͱ֦ுੑΛ݉ͶͨσβΠϯ 124݄16݄༵
౷Ұੑͱ֦ுੑΛ݉ͶͦΖ͑ͨσβΠϯ No Image Design ϖʔδͷ֦ு http://demo.tikeda.net/webfont/demo2.html 124݄16݄༵
ऑΈ 124݄16݄༵
ϑΥϯτදࣔͷλΠϜϥά 124݄16݄༵
ϑΥϯτදࣔͷλΠϜϥά •Web FontsΛࢦఆͨ͠ςΩετ͕Ұॠന͘ݟ͑ͳ ͍ঢ়ଶʹͳΔ͜ͱ͕͋Δ •Web FontsʢจʣΛࢦఆͨ͠ςΩετ͕࠷ॳͰ όΠεϑΥϯτ͕දࣔ͞Ε͠Βͯ͘͠Web Fonts͕దԠ͞ΕΔ 124݄16݄༵
σϞʹΑΔݕূ •σόΠεϑΥϯτ •શମʹԤจWeb Fontsͷࢦఆ •શମʹจWeb Fontsͷࢦఆ •෦తʹจͱԤจͷWeb Fontsͷࢦఆ •จϑΥϯτͷදࣔʹϑΣʔυΛదԠ http://demo.tikeda.net/webfont/demo3.html
124݄16݄༵
ςΩετͷϨϯμϦϯά 124݄16݄༵
•Windows Chrome, FirefoxͰάϦϑ͕Ԛ͍ •αΠζ͕18pxҎԼͩͱϥΠϯ͕௵Εͯݟ͑Δ ͷ͕͋Δ ςΩετͷϨϯμϦϯά 124݄16݄༵
http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 124݄16݄༵
http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 124݄16݄༵
http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά -webkit-text-stroke: 0.5px #000 124݄16݄༵
࣮ફʮTypeSquareʯ 4 124݄16݄༵
Twitter λΠϜϥΠϯΛͬͨσϞ http://demo.tikeda.net/webfont/ 124݄16݄༵
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱΣΠτ͕̑ஈ֊ʹมԽ 124݄16݄༵
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱΣΠτ͕̑ஈ֊ʹมԽ 26 px 32 px 54 px 110
px 18 px 124݄16݄༵
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ༰͔Β4छྨʹ৭ͱfont-family͕มԽ 124݄16݄༵
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ༰͔Β4छྨʹ৭ͱfont-family͕มԽ Haruhi Gakuen Shin Go DeBold Shin Maru
Go Bold Pretty Momo 124݄16݄༵
ΞΠίϯΛWeb FontsΛͬͯදݱ 124݄16݄༵
ΞΠίϯΛWeb FontsΛͬͯදݱ http://www.myfonts.com/fonts/urtd/ico-weather/ Ico Weather 124݄16݄༵
ΞΠίϯΛWeb FontsΛͬͯදݱ http://fortawesome.github.com/Font-Awesome/ Font Awesome 124݄16݄༵
Responsive Design ʹରԠ 124݄16݄༵
Twitter λΠϜϥΠϯΛͬͨσϞ •λΠϜϥΠϯςΩετΛWeb FontsʮTypeSquareʯ Λͬͯදݱɻ ݅ʹΑΓϑΥϯτΛμ ΠφϛοΫ ʹมߋ •ΞΠίϯΛWeb FontsΛͬͯදࣔ
•Responsive Designɹ •CSS3ʹΑΔϑΣʔυΤϑΣΫτͰදࣔ http://demo.tikeda.net/webfont/ 124݄16݄༵
Web FontsʹΘΕͳ͍ҝͷ৺ಘ 5 124݄16݄༵
࠷ޙʹ •ࣝͱ͚ͯͩ͠Ͱͳ͘ɺ·ͣԿ͔ͬͯΈΑ͏ •ࣗͷͰͦΕ͕ɺWeb Fontsͷग़൪ͳͷ͔Λ ͪΌΜͱஅ͢Δ •ը૾ը૾ͷྑ͕͋͞ΔɻWeb Fontsը૾ͷ ༻Ͱͳ͍ •ͪΌΜͱݕূΛ͠Α͏ ͦͷઌʹϢʔβʔ͕͍ΔࣄΛৗʹΕͣʹ
124݄16݄༵
࠷ޙʹ ද ݱ ํ ๏ ແ ݶ େ 124݄16݄༵
࠷ޙʹ Web Fonts͕ࠓޙͲ͏ͳ͍͔ͬͯ͘ɺ ͦͷٕज़Λͬͨදݱ͕ຊʹϢʔβʔ͕ ٻΊ͍ͯΔͳͷ͔ʹ͔͔͍ͬͯΔͱࢥ͍ ·͢ɻ ٕज़ͷਐԽΛͪΌΜͱཧղ͠ɺ ΑΓૉఢͳ ωοτࣾձʹ͍͖ͯ͠·͠ΐ͏ɻ 124݄16݄༵
Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ͝ҙݟ ɾ ࣭ͪ͜͝Β·Ͱ
[email protected]
twitter @tikeda, http://tikeda.net/ 124݄16݄༵