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:
- Adobe Blank.
- IE9 Data-URI (see “Preventing FOUT on IE9“)
- Cache aggressively.
- CSS3 Font Loading.
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.
All Narfed Up 