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
960
Sass for everyday's cooking
tikeda
21
1.9k
Other Decks in Design
See All in Design
AI時代に淘汰されないデザインのしごと
akinen
1
170
Memory Man v3 (WIP)
storybychad
PRO
0
2.3k
#Dubois Challenge 2025: Economics
ajstarks
0
150
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Kid Cowboy 103
marilutwin
0
290
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
710
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
120
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
200
Findyのプロデチームの 歩みとこれから
satty9556
0
210
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
360
decksh object reference
ajstarks
2
1.3k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Git: the NoSQL Database
bkeepers
PRO
431
65k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Documentation Writing (for coders)
carmenintech
73
5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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݄༵