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