Solving the Challenges of Asian Web Fonts by Bill Davis
description
Transcript of Solving the Challenges of Asian Web Fonts by Bill Davis
![Page 1: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/1.jpg)
Solving the Challenges of
Asian Web FontsBill Davis
ATypI Hong Kong
![Page 2: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/2.jpg)
Why use Web fonts?
Establish typographic consistencyImprove user experienceEliminate graphics, improve workflowEnhance SEO, accessibility
![Page 3: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/3.jpg)
Technology Adoption Curve
Web fonts in 10-15% of top 1000 websites
Latin fonts
![Page 4: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/4.jpg)
Alternative to Web fonts
Use“System Fonts”
![Page 5: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/5.jpg)
Global Typographic Consistency?
Site using branding fonts and system fonts
![Page 6: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/6.jpg)
Global Typographic Consistency?
Sans serif fonts replaced with mincho and gothic styles
![Page 7: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/7.jpg)
Web fonts are easy!
You simply use CSS to define your fonts:
{font-family: “MyCustom Font", "Hiragino KakuGothic", Osaka, "MS PGothic", Arial, sans-serif;}
The fonts can be located: Local Downloaded Linked to a Web font service
![Page 8: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/8.jpg)
Leading Web font services
Google.com/webfonts 554 font families
Typekit.com 776 font families
Fonts.com 2000 + font families
WebInk.com 993 + font families
FontDeck.com 992 font families
Webtype.com 70 + font families
Typotheque.com 55 font families
![Page 9: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/9.jpg)
Primarily Latin-based fonts
Google.com/webfonts Cyrillic, Khmer, Vietnamese
“earlyaccess” Arabic, Indic, Korean +
Typekit.com Cyrillic +
Fonts.com Chinese, Japanese, Korean,Cyrillic, Indic, Vietnamese, +
WebInk.com Cyrillic, Vietnamese +
FontDeck.com Arabic, Cyrillic +
Webtype.com Greek, Cyrillic +
Typotheque.com Arabic, Indic, Cyrillic +
![Page 10: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/10.jpg)
Web fonts adoption
Asian fonts
![Page 11: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/11.jpg)
Asian Web font services
Japan:
Typesquare.com (Morisawa)
Fontplus.jp
Dekomoji.jp
amanaimages.com
Mojidepa.com
Korea:
China:
justFont.com
![Page 12: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/12.jpg)
So what’s the challenge?
Site Design Text-heavy websites System fonts are tuned for small sizes Web fonts benefit headlines HTML5 – Flash replacement
![Page 13: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/13.jpg)
![Page 14: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/14.jpg)
![Page 15: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/15.jpg)
![Page 16: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/16.jpg)
![Page 17: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/17.jpg)
Text size matters!
Test your Web fonts!
![Page 18: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/18.jpg)
![Page 19: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/19.jpg)
So what’s the challenge?
Asian font file sizes Download times File Compression/Subsetting techniques Mobile users
![Page 20: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/20.jpg)
More Smartphones than PCs
![Page 21: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/21.jpg)
File download speeds
2mb file 256kb DSL 1 minute 1 second
3Mbs (4G) 5 seconds
5mb file 256kb DSL 2 minutes 33 seconds
3Mbs (4G) 12 seconds
![Page 22: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/22.jpg)
File size matters!
Test your Web fonts!
![Page 23: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/23.jpg)
Asian font subsetting
Pre-subsetting or Dynamic subsetting Build custom fonts for each web page Smaller font files Offered by Web font services
![Page 24: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/24.jpg)
Multi-national companies are
starting to deploy Web fonts
![Page 25: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/25.jpg)
![Page 26: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/26.jpg)
![Page 27: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/27.jpg)
![Page 28: Solving the Challenges of Asian Web Fonts by Bill Davis](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c7c4734a795904038b4574/html5/thumbnails/28.jpg)
This is the yearnon-Latin and
Asian Web fontstakes off!