A Jolly Web Typesetting Adventure
Web Typography is broken: here’s how we can fix it
Lead Front End Developer
Why should we care?
It’s about the users
How can we improve the traversability of content in a layout?
The web is 95% typography
We spend a lot of time setting type, but we don’t talk about it much
Grids are one way we can bring structure to our type
The web is saturated with grid columns
To support type, we often want a baseline
It adds vertical space around text.
Isn’t this what margins are for?
The Spooky Box
The dimensions of type on the web are defined by a combination of font-size and line-height - there’s no concept of a typographic baseline.
Developers and designers speak different languages
There isn't any typographic basis for the space that
A typographic spec
Compass Vertical Rhythm
You had one job
Modern, but not entirely natural
- Type is best set in rems or ems. Depending on context
- Pixels aren’t flexible (literally)
- Line height is best expressed unitless
- Tool output should be predictable
- Tool output should leave predictable options for workarounds
Web typography without the Spooky Box
Fluid type / Baseline snap
- Scale type smoothly between breakpoints
- Snap all type to a baseline grid
Provide a cap-height
- Optionally: set a container based on max widths
Set your type
Install as a package
Is our browser spec incomplete?
Better type control could be native
Well, it turns out a recommendation exists
It’s up to us
- Web Design is 95% Typography
- Compass Vertical Rhythms
- Technical Web Typography: Guidelines and Techniques
- Unitless line-heights
- CSS Baseline: The Good, The Bad And The Ugly
- Single-direction margin declarations
- Designing faster with a baseline grid
- Aligning type to the baseline the right way using SASS
- Sassline v2.0
- Precise control over responsive typography
- The New Web Typography