Solving the Challenges of Asian Web Fonts by Bill Davis

29
Solving the Challenges of Asian Web Fonts Bill Davis ATypI Hong Kong

description

Solving the Challenges of Asian Web Fonts Monotype’s Bill Davis was honored to give a presentation at the ATypI Hong Kong 2012 Conference titled “Solving the Challenges of Asian Web Fonts.” When he looked at the top 1000 websites, he found that 10 to 15 percent are already using Web fonts. But for East Asian languages and scripts, only a handful has started to deploy Web fonts. His AtypI presentation, provided here as a slideshare, examines the two primary challenges for developers of Asian websites: 1) Website design issues and 2) Asian Web font file sizes. His experience with the broad range of language and script support available in Fonts.com Web Fonts service has allowed him to gain insights into early adoption of non-Latin and Asian Web fonts by Web designers and developers. This slideshare reviews some of the main benefits of Web fonts, no matter the language or geographic market for your audience, are: • Establish typographic consistency • Improve user experience • Eliminate the use of text as graphics, improve workflow • Enhance SEO, accessibility To learn more about Web fonts, check out Bill Davis’ Fonts.com blog at http://blog.fonts.com/contributors/bill-davis For more information on Fonts.com Web Font Services, check out http://www.fonts.com/web-fonts

Transcript of Solving the Challenges of Asian Web Fonts by Bill Davis

Page 1: Solving the Challenges of Asian Web Fonts by Bill Davis

Solving the Challenges of

Asian Web FontsBill Davis

ATypI Hong Kong

Page 2: Solving the Challenges of Asian Web Fonts by Bill Davis

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

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

Alternative to Web fonts

Use“System Fonts”

Page 5: Solving the Challenges of Asian Web Fonts by Bill Davis

Global Typographic Consistency?

Site using branding fonts and system fonts

Page 6: Solving the Challenges of Asian Web Fonts by Bill Davis

Global Typographic Consistency?

Sans serif fonts replaced with mincho and gothic styles

Page 7: Solving the Challenges of Asian Web Fonts by Bill Davis

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

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

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

Web fonts adoption

Asian fonts

Page 11: Solving the Challenges of Asian Web Fonts by Bill Davis

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

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
Page 14: Solving the Challenges of Asian Web Fonts by Bill Davis
Page 15: Solving the Challenges of Asian Web Fonts by Bill Davis
Page 16: Solving the Challenges of Asian Web Fonts by Bill Davis
Page 17: Solving the Challenges of Asian Web Fonts by Bill Davis

Text size matters!

Test your Web fonts!

Page 18: Solving the Challenges of Asian Web Fonts by Bill Davis
Page 19: Solving the Challenges of Asian Web Fonts by Bill Davis

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

More Smartphones than PCs

Page 21: Solving the Challenges of Asian Web Fonts by Bill Davis

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

File size matters!

Test your Web fonts!

Page 23: Solving the Challenges of Asian Web Fonts by Bill Davis

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

Multi-national companies are

starting to deploy Web fonts

Page 25: Solving the Challenges of Asian Web Fonts by Bill Davis
Page 26: Solving the Challenges of Asian Web Fonts by Bill Davis
Page 27: Solving the Challenges of Asian Web Fonts by Bill Davis
Page 28: Solving the Challenges of Asian Web Fonts by Bill Davis

This is the yearnon-Latin and

Asian Web fontstakes off!

Page 29: Solving the Challenges of Asian Web Fonts by Bill Davis

Thank You!

謝謝

Bill [email protected]

Typefaces used: Akko™ designed by Akira Kobayashi, 2011