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.4k
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
39
18k
Patterns of UI Design
tikeda
3
920
Sass for everyday's cooking
tikeda
21
1.9k
Other Decks in Design
See All in Design
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
240
マンガで分かるサービスデザインガイドライン
senryakuka
1
630
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
860
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.4k
太田博三(@usagisan2020)
otanet
0
230
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
150
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
LayerX DesignersDeck
layerx
PRO
0
2.6k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
690
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing Experiences People Love
moore
140
23k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf 2023
tenderlove
29
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Building Your Own Lightsaber
phodgson
104
6.2k
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݄༵