Baka Fonts

Fonts for all Languages

Armin Roșu

Frontender @ Adobe
https://armin.ro

I ❤️ Helvetica

(Or Times New Roman)

Default Fonts

everybody already has them
no need to download them
no FOUT

System Fonts

Fonts used in the OS UI.

Consistent UX.

          
font-family:
  /* Mac, Chrome on Mac */
  -apple-system, BlinkMacSystemFont,
  /* Windows 7+, Windows Phone (lol) */
  "Segoe UI",
  /* Android */
  "Roboto",
  /* Android < 4 */
  "Droid Sans",
  /* KDE */
  "Oxygen",
  /* Brown Linux */
  "Ubuntu",
  /* Gnome */
  "Cantarell",
  /* Firefox OS (RIP) */
  "Fira Sans",
  /* Mac Fallback */
  "Helvetica Neue",
  /* Fallback */
  sans-serif;

Guess who does this?

Designers are Fancy

(too fancy for default fonts)

So is Adobe

major font foundry (remember Adobe Fontfolio?!)
and font distributor (Typekit)
uses Adobe Clean™

グ vs. グ

a vs. a

Enter the CJK

CJK = Chinese, Japanese & Korean

Unicode

ASCII (i.e. English): 128
Latin Extended (including Romanian): 256
CJK: 80,388 Unicode characters, many more possible

Adobe Clean

Support across CJK and latin extended. Yey!

Alternatives: Source Han Sans, Noto Sans

Typekit to the Rescue

Typekit Dynamic Kits

Load only characters used on a page. (remember this)

Font file size comparison

... on Adobe Login Page

Latin: 90 kB
Latin Extended: 230kB
Chinese: 230kB
Japanese: 150kB
Korean: 120kB

CJK < Latin Extended

Because CJK don't have all characters, only those used on the page.

Keep in mind

Use static kits for Latin, Latin Extended (small enough, no parsing)
Typekit Static Kits loads all the fonts in a kit (latin, extended, CJK), even if not used.
Make locale based kits and include them conditionally.
Typekit loads after the page => FOUT.

Kung FOUT Fighting

* FOUT = Flash of unstyled Text

Font Load Events

via JS API
WebFontLoader.js for non-Typekit
CSS classes on html element

Loading Screen

Fabulous Font Fallback Fonts

check your analytics for OS usage
http://www.cssfontstack.com/
test using http://ffffallback.com/

Reference

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
https://css-tricks.com/snippets/css/system-font-stack/
https://blog.typekit.com/2014/07/15/introducing-source-han-sans/
https://helpx.adobe.com/typekit/using/font-events.html