Speaker Deck
Sign in
Sign up
for free
Web Fonts with Web Design
Takuji Ikeda
April 13, 2012
Design
6
6k
Web Fonts with Web Design
2012/04/12 Morisawa TypeSquare Tie-up Seminor on Pasona Tech.
Takuji Ikeda
April 13, 2012
Tweet
Share
Want more?
tikeda
1
140
tikeda
38
16k
tikeda
3
770
reverentgeek
2
170
rmw
1
85
skipperchong
0
76
carmenhchung
5
160
keathley
5
160
productmarketing
2
230
clairelew
2
440
thoeni
1
120
jcasabona
4
200
Transcript
1
.
Takuji Ikeda Web Fonts with Web Design ͕Δ“ຊޠ Web Fonts”ͷੈք
WebσβΠϯʹ“ϑΥϯτ”ΛऔΓೖΕΔͱʁ ʙ ϞϦαϫ ʮType Squareʯ λΠΞοϓηϛφʔ ʙ 2012/4/12 THU @ύιφςοΫ 124݄16݄༵
2
.
ࣗݾհ •ా࢘ Takuji Ikeda •ΫοΫύουגࣜձࣾɹσβΠφʔ •http://tikeda.net/ɹ •http://d.hatena.ne.jp/tikeda/ ɹ •Twitter: @tikedaɹ
•ஶॻʰHTML5ςΫχΧϧϨϏϡʔ ʢϦοΫςϨίϜʣ ʱ 124݄16݄༵
3
.
Twitter Hash Tag #typesquare TwitterͰੋඇͭͿ͍͓͍͍ͯͯͩ͘͞ɻ ࠷ޙͷσϞͰօ͞ΜͷͭͿ͖Λ͍·͢ɻ 124݄16݄༵
4
.
AGENDA 1. Web Fonts ͜ͱ͡Ί 2. ͬͯΈΑ͏ Web Fonts 3.
ʮ͑Δٕज़ʯʹ͢ΔҝͷڧΈͱऑΈ 4. ࣮ફʮTypeSquareʯ 5. Web FontsʹΘΕͳ͍ҝͷ৺ಘ 124݄16݄༵
5
.
1 Web Fonts ͜ͱ͡Ί 124݄16݄༵
6
.
Web Fonts ద༻લ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
7
.
Web Fonts ద༻ޙ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
8
.
Web Fonts ద༻ޙ Jun 501 Jun 201 Fredoka One http://demo.tikeda.net/webfont/demo1.html
͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
9
.
͜Ε·Ͱ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 124݄16݄༵
10
.
Web Fontsͷొ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 124݄16݄༵
11
.
Web FontsΛར༻͢ΔࣄͰɺ WebͷςΩετΛݟΔଆͷڥ ʹؔΘΒͣҙਤͨ͠ϑΥϯτͰ Web PageΛݟͤΔࣄ͕Ͱ͖Δ 124݄16݄༵
12
.
ࣄྫհ ւ֎ͷࣄྫ / αʔϏεͷࣄྫ / ࠃͷࣄྫ / ৽ͨͳࢼΈ 124݄16݄༵
13
.
http://nikebetterworld.com/ Nike Better World ࣄྫհʢԤถαΠτʣ 124݄16݄༵
14
.
http://nikebetterworld.com/ Nike Better World ࣄྫհʢԤถαΠτʣ Din Display Pro Thin NikeGratton
124݄16݄༵
15
.
http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫհʢԤถαΠτʣ 124݄16݄༵
16
.
http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫհʢԤถαΠτʣ bello-caps oxtail
omnes-pro 124݄16݄༵
17
.
http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ Fit Fext ࣄྫհʢԤถαΠτʣ 124݄16݄༵
18
.
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݄༵
19
.
http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫհ 124݄16݄༵
20
.
http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫհ Frutiger LT W01 65
Bold EgyptianSlateW01-Medium 124݄16݄༵
21
.
http://flavors.me/ Flavors.me ࣄྫհʢServiceʣ 124݄16݄༵
22
.
http://flavors.me/ Flavors.me ࣄྫհʢServiceʣ Richard Miller rnd book 124݄16݄༵
23
.
http://typesquare.com/ TypeSquare ࣄྫհʢຊʣ 124݄16݄༵
24
.
http://typesquare.com/ TypeSquare ࣄྫհʢຊʣ ৽ΰ M UD ৽ΰ M 124݄16݄༵
25
.
http://pr.fontplus.jp/ Web Designing ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫհʢຊʣ 124݄16݄༵
26
.
http://pr.fontplus.jp/ Web Designing ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫհʢຊʣ FOT-ஜࢵΦʔϧυ໌ே Pro R FOT-ஜࢵ໌ே Pro
B 124݄16݄༵
27
.
http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫհʢຊʣ 124݄16݄༵
28
.
http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫհʢຊʣ deco-BokutohRuika02 124݄16݄༵
29
.
http://pictos.cc/font/ PICTOS ৽͍͠Web FontsͷΘΕํ 124݄16݄༵
30
.
CSSʹΑΔ࣮ํ๏ CSS Fonts Module Level 3 http://www.w3.org/TR/css3-fonts/ 124݄16݄༵
31
.
CSSʹΑΔ࣮ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.woff”) format(“woff”); } h1
{ font-family: “FontName”, sans-serif; } 124݄16݄༵
32
.
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݄༵
33
.
ϑΥϯτܗࣜ •.eot (Embedded Open Type) Internet Explorer 8ҎԼʹରԠ͢Δಠࣗܗࣜ •.woffʢWeb Open
Font Formatʣ ࠷৽ϒϥβ͕ରԠΛ࢝ΊͨΣϒઐ༻ܗࣜ •.ttfʢTrue Typeʣ ύιίϯͰೃછΈ͋ΔੜͷϑΥϯτܗࣜ •.svg WebͷϕΫλʔσʔλܗࣜΛϑΥϯτʹԠ༻ 124݄16݄༵
34
.
Web Fontsͷใݯ ࠃ֎ͷ࠷৽ࣄྫɺCSS࣮ঢ়گͳͲใΛಘΔखஈ 124݄16݄༵
35
.
http://blog.petitboys.com ϑΥϯτϒϩά Web Fontsͷใݯ 124݄16݄༵
36
.
http://blog.typekit.com/ The Typekit Blog Web Fontsͷใݯ 124݄16݄༵
37
.
http://blog.fonts.com/ fonts.com blog Web Fontsͷใݯ 124݄16݄༵
38
.
ͬͯΈΑ͏Web Fonts 2 124݄16݄༵
39
.
Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β͏ •͍͍ͨϑΥϯτΛ·ͣ୳͢ͱ͜Ζ͔Β 124݄16݄༵
40
.
Web FontsαʔϏεΛར༻͢Δ 124݄16݄༵
41
.
http://typesquare.com/ TypeSquare ࠃ 124݄16݄༵
42
.
http://webfont.fontplus.jp/ ϑΥϯτϓϥε ࠃ 124݄16݄༵
43
.
http://decomoji.jp/ σί͡ ࠃ 124݄16݄༵
44
.
http://amanaimages.com/font/web/index.aspx amana images ࠃ 124݄16݄༵
45
.
http://typekit.com/ typekit ւ֎ʢԤจϑΥϯτʣ 124݄16݄༵
46
.
http://www.google.com/webfonts Google web fonts ւ֎ʢԤจϑΥϯτʣ 124݄16݄༵
47
.
TypeSquare ར༻ͷྲྀΕ http://typesquare.com/ 124݄16݄༵
48
.
STEP1: Ϣʔβʔొ TypeSquare ར༻σϞ 124݄16݄༵
49
.
STEP2: ίʔεͷબ TypeSquare ར༻σϞ 124݄16݄༵
50
.
STEP3: ใͷೖྗ TypeSquare ར༻σϞ 124݄16݄༵
51
.
STEP4: ϩάΠϯ TypeSquare ར༻σϞ 124݄16݄༵
52
.
STEP5: ར༻αΠτͷొ TypeSquare ར༻σϞ 124݄16݄༵
53
.
STEP6: JavascriptͷுΓ͚ TypeSquare ར༻σϞ 124݄16݄༵
54
.
STEP7: ར༻ϑΥϯτͷબఆ TypeSquare ར༻σϞ 124݄16݄༵
55
.
STEP8: PVϨϙʔτ TypeSquare ར༻σϞ 124݄16݄༵
56
.
ϑΥϯτΛߪೖͯࣗ͠લαʔόʔͰ͏ 124݄16݄༵
57
.
http://www.myfonts.com/ My Fonts Web Fontsʹ͑ΔϑΥϯτΛߪೖ 124݄16݄༵
58
.
http://www.fontshop.com/fontlist/n/web_fontfonts/ Font Shop Web Fontsʹ͑ΔϑΥϯτΛߪೖ 124݄16݄༵
59
.
http://webfonts.fonts.com/en-US Fonts.com Web Fontsʹ͑ΔϑΥϯτΛߪೖ 124݄16݄༵
60
.
My FontsͰϑΥϯ τߪೖ http://www.myfonts.com/ 124݄16݄༵
61
.
MyFonts τοϓ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
62
.
رͷϑΥϯτΛߪೖ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
63
.
μϯϩʔυ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
64
.
μϯϩʔυϑΝΠϧ MyFontsͰϑΥϯτߪೖ 124݄16݄༵
65
.
HOW TO ? MyFontsͰϑΥϯτߪೖ 124݄16݄༵
66
.
͍͍ͨϑΥϯτΛ·ͣ୳͢ 124݄16݄༵
67
.
http://typesquare.com/simulator/ ΫϥυϑΥϯτ ɾ γϛϡϨʔλ ৭ʑͳύλʔϯΛࢼͯ͠ΈΔ 124݄16݄༵
68
.
http://www.myfonts.com/WhatTheFont/ WhatTheFont ը૾͔ΒϑΥϯτΛೝࣝ 124݄16݄༵
69
.
http://itunes.apple.com/jp/app/whatthefont/id304304134 WhatTheFont for iOS ը૾͔ΒϑΥϯτΛೝࣝ 124݄16݄༵
70
.
http://fount.artequalswork.com/ Fount Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 124݄16݄༵
71
.
http://chengyinliu.com/whatfont.html WHAT FONT TOOL Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 124݄16݄༵
72
.
http://www.freefontconverter.com/ FreeFontConverter ख࣋ͪͷϑΥϯτΛม 124݄16݄༵
73
.
http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม 124݄16݄༵
74
.
http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม ϥΠηϯεʹཁҙ 124݄16݄༵
75
.
Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ ͙͢ʹ࢝ΊΒΕΔɻ Ͱແྉͩͱ੍ݶ͕͋Δͷ ͕ଟ͍ɻʮTypeSquareʯແྉఏڙத •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β͏ Ұ൪Φʔι υ
ο Ϋ εͰඞཁͳεΩϧͷशಘ͕Ͱ͖Δɻ •͍͍ͨϑΥϯτΛ·ͣ୳͢ͱ͜Ζ͔Β ࠓ͙͢Ͱͳͯ͘ɺ ײ͓͚͋͛ͯΔखஈ 124݄16݄༵
76
.
ʮ͑Δٕज़ʯ ʹ͢ΔҝͷڧΈͱऑΈ 3 124݄16݄༵
77
.
ڧΈ 124݄16݄༵
78
.
ΣϒαʔϏεͳͲͷ ಈతίϯςϯπͷσβΠϯ 124݄16݄༵
79
.
جຊతͳσβΠϯͷखॱ ίϯςϯπ 124݄16݄༵
80
.
σβΠϯ جຊతͳσβΠϯͷखॱ ίϯςϯπ 124݄16݄༵
81
.
σβΠϯ ίϯςϯπ ίϯςϯπ͋Γ͖Ͱ σβΠϯΛߟ͑8FC 1BHFͷ࡞Λߦ͏ جຊతͳσβΠϯͷखॱ 124݄16݄༵
82
.
σβΠϯ ΣϒαʔϏεσβΠϯͷखॱ 124݄16݄༵
83
.
σβΠϯ ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ 124݄16݄༵
84
.
σβΠϯ ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ ݩ͋ΔσβΠϯΛબΜ ͰίϯςϯπΛϢʔ βʔ͕ྲྀ͠ࠐΉҝޙ͔ Β࠷దͳσβΠϯΛࢪ ͤͳ͍ 124݄16݄༵
85
.
http://d.hatena.ne.jp/tikeda/ tikeda::Diary What’s Web Font 124݄16݄༵
86
.
What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ 124݄16݄༵
87
.
What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ Cabin Sketch 124݄16݄༵
88
.
What’s Web Font 124݄16݄༵
89
.
ϕΫλʔσʔλΛੜ͔ͨ͠σβΠϯ 124݄16݄༵
90
.
Responsive Design http://demo.tikeda.net/webfont/demo1.html ͖͋ͭهʢσϞ༻ʣ 124݄16݄༵
91
.
CSS3 Design ※ http://blog.typekit.com/2012/03/08/parkinson-type-design-joins-typekit/ 124݄16݄༵
92
.
౷Ұੑͱ֦ுੑΛ݉ͶͨσβΠϯ 124݄16݄༵
93
.
౷Ұੑͱ֦ுੑΛ݉ͶͦΖ͑ͨσβΠϯ No Image Design ϖʔδͷ֦ு http://demo.tikeda.net/webfont/demo2.html 124݄16݄༵
94
.
ऑΈ 124݄16݄༵
95
.
ϑΥϯτදࣔͷλΠϜϥά 124݄16݄༵
96
.
ϑΥϯτදࣔͷλΠϜϥά •Web FontsΛࢦఆͨ͠ςΩετ͕Ұॠന͘ݟ͑ͳ ͍ঢ়ଶʹͳΔ͜ͱ͕͋Δ •Web FontsʢจʣΛࢦఆͨ͠ςΩετ͕࠷ॳͰ όΠεϑΥϯτ͕දࣔ͞Ε͠Βͯ͘͠Web Fonts͕దԠ͞ΕΔ 124݄16݄༵
97
.
σϞʹΑΔݕূ •σόΠεϑΥϯτ •શମʹԤจWeb Fontsͷࢦఆ •શମʹจWeb Fontsͷࢦఆ •෦తʹจͱԤจͷWeb Fontsͷࢦఆ •จϑΥϯτͷදࣔʹϑΣʔυΛదԠ http://demo.tikeda.net/webfont/demo3.html
124݄16݄༵
98
.
ςΩετͷϨϯμϦϯά 124݄16݄༵
99
.
•Windows Chrome, FirefoxͰάϦϑ͕Ԛ͍ •αΠζ͕18pxҎԼͩͱϥΠϯ͕௵Εͯݟ͑Δ ͷ͕͋Δ ςΩετͷϨϯμϦϯά 124݄16݄༵
100
.
http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 124݄16݄༵
101
.
http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 124݄16݄༵
102
.
http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά -webkit-text-stroke: 0.5px #000 124݄16݄༵
103
.
࣮ફʮTypeSquareʯ 4 124݄16݄༵
104
.
Twitter λΠϜϥΠϯΛͬͨσϞ http://demo.tikeda.net/webfont/ 124݄16݄༵
105
.
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱΣΠτ͕̑ஈ֊ʹมԽ 124݄16݄༵
106
.
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱΣΠτ͕̑ஈ֊ʹมԽ 26 px 32 px 54 px 110
px 18 px 124݄16݄༵
107
.
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ༰͔Β4छྨʹ৭ͱfont-family͕มԽ 124݄16݄༵
108
.
λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ༰͔Β4छྨʹ৭ͱfont-family͕มԽ Haruhi Gakuen Shin Go DeBold Shin Maru
Go Bold Pretty Momo 124݄16݄༵
109
.
ΞΠίϯΛWeb FontsΛͬͯදݱ 124݄16݄༵
110
.
ΞΠίϯΛWeb FontsΛͬͯදݱ http://www.myfonts.com/fonts/urtd/ico-weather/ Ico Weather 124݄16݄༵
111
.
ΞΠίϯΛWeb FontsΛͬͯදݱ http://fortawesome.github.com/Font-Awesome/ Font Awesome 124݄16݄༵
112
.
Responsive Design ʹରԠ 124݄16݄༵
113
.
Twitter λΠϜϥΠϯΛͬͨσϞ •λΠϜϥΠϯςΩετΛWeb FontsʮTypeSquareʯ Λͬͯදݱɻ ݅ʹΑΓϑΥϯτΛμ ΠφϛοΫ ʹมߋ •ΞΠίϯΛWeb FontsΛͬͯදࣔ
•Responsive Designɹ •CSS3ʹΑΔϑΣʔυΤϑΣΫτͰදࣔ http://demo.tikeda.net/webfont/ 124݄16݄༵
114
.
Web FontsʹΘΕͳ͍ҝͷ৺ಘ 5 124݄16݄༵
115
.
࠷ޙʹ •ࣝͱ͚ͯͩ͠Ͱͳ͘ɺ·ͣԿ͔ͬͯΈΑ͏ •ࣗͷͰͦΕ͕ɺWeb Fontsͷग़൪ͳͷ͔Λ ͪΌΜͱஅ͢Δ •ը૾ը૾ͷྑ͕͋͞ΔɻWeb Fontsը૾ͷ ༻Ͱͳ͍ •ͪΌΜͱݕূΛ͠Α͏ ͦͷઌʹϢʔβʔ͕͍ΔࣄΛৗʹΕͣʹ
124݄16݄༵
116
.
࠷ޙʹ ද ݱ ํ ๏ ແ ݶ େ 124݄16݄༵
117
.
࠷ޙʹ Web Fonts͕ࠓޙͲ͏ͳ͍͔ͬͯ͘ɺ ͦͷٕज़Λͬͨදݱ͕ຊʹϢʔβʔ͕ ٻΊ͍ͯΔͳͷ͔ʹ͔͔͍ͬͯΔͱࢥ͍ ·͢ɻ ٕज़ͷਐԽΛͪΌΜͱཧղ͠ɺ ΑΓૉఢͳ ωοτࣾձʹ͍͖ͯ͠·͠ΐ͏ɻ 124݄16݄༵
118
.
Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ͝ҙݟ ɾ ࣭ͪ͜͝Β·Ͱ takujiikeda@gmail.com twitter @tikeda, http://tikeda.net/ 124݄16݄༵
Takuji Ikeda
tikeda
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
