Download - Solving the Challenges of Asian Web Fonts by Bill Davis

Transcript
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