Write The Docs EU — Idan Gazit — Advanced Web Typography

Idan Gazit

I’m at Write The Docs EU today in Budapest and will post semi–unpolished notes from sessions throughout the day after each talk finishes.

Quote from the book Thinking, Fast and Slow by Daniel Kahneman

[…] Maximize visibility.

Micro vs. Macro


  • Typeface
  • Kerning


  • Measure (width)
  • Leading (spacing)
  • Flow of type on page

Books offer tons of control, while the web…not so much.

16px is the absolute size of text on the web. Relative units (1 em) are proportional and doesn’t break a layout.

“1 em” is equivalent to an uppercase “M”.

Problem with Ems: More difficult to determine the chain of relative to the HTML tag nesting and multipliers to use.

Root Ems (Rems) are much easier, relative to the root, and easier to make proportional layouts.


Database of Fonts (font face for browsers)


The dreaded FOUT (Flash of Unstyled Text) vs. The somewhat–better FONT (Flash of No Text)

Neither are better.

Less than 3 seconds is best, but after that, you might see FOUT or FONT.


Rabbit Holes

  • Type rendering

Rasterizers turns an outline into pixels.

  • One on OS X
  • Three on Windows GDI (Grayscale, ClearType, and DirectWrite)

Rasterizers depends on the PostScript and TrueType fonts. See “A Closer Look At Font Rendering

Takeaway: Test your intended typefaces (everywhere, to be safe).

Ligatures: Special combinations of letters that connect.

The Four Numerals (that we really should care about)

  • Oldstyle (goes below the baseline)
  • Lining (always respects the height of a capital letter)
  • Proportional
  • Tabular (font-feature-settings, which works in most browsers)

Another cool resource: CanIUse.com

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Published by

Bryan Villarin

Bryan works at Automattic. Cat whisperer. Sometimes, a photographer and card magician.

Talk to me, Goose

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s