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

Micro:

  • Typeface
  • Kerning

Macro:

  • 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.

Typefaces

Database of Fonts (font face for browsers)

http://alistapart.com/article/say-no-to-faux-bold

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.

Tips:

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 is a Happiness Engineer at Automattic. He's also a photographer, card magician, and cat whisperer. (Thanks to my friend and colleague Steve Blythe for the sweet photo!)

Talk to me, Goose

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s