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
LayerX DesignersDeck
layerx
PRO
0
2.7k
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
250
クライアントワークにおける UXリサーチの実践
kozotaira
0
350
The Golden Whitney
ohtristanart
PRO
0
120
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.5k
Museum Heist
allykae
0
140
ZKK_001.pdf
nicholaspegu
0
1.5k
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
650
Dive Deep into Communication
yomtsu
0
210
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Unsuck your backbone
ammeep
669
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
500
GitHub's CSS Performance
jonrohan
1030
460k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
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݄༵
Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ͝ҙݟ ɾ ࣭ͪ͜͝Β·Ͱ takujiikeda@gmail.com twitter @tikeda, http://tikeda.net/ 124݄16݄༵