CSS Typographic Initiatives

Typographic CSS audit & wish list

Has spec but not consistently implemented

This is a prioritized list of CSS modules that have been specced but are not implemented consistently across browsers.

  1. CSS Unit division
    • This isn’t explicitly a typographic feature, but this is a big step towards enabling fluid variable font settings and font animations on resize. This is an important part of the roadmap.
    • Lea Verou discusses the need for this in her recent talk.
  2. Text-wrap: balance
    • The NYTimes has a popular text balancer. At Vox Media we inserted non-breaking spaces at the end of headlines to avoid egregiously unbalanced text. Having this built into browsers would make headlines look much better across the web.
  3. Text-justify*
    • I suggest adding a flexbox-style part to this spec where one can control how much word spacing, letter spacing, and font stretch go into the algorithm.
    • Issue on GitHub
  4. Hyphens*
    • Currently this is English only and requires a prefix.
  5. CSS Line Grid
  6. Initial Letters
  7. Leading trim
    • Helpful to align the first or last line of text with the container or other content on the page.

*text-justify and hyphens are blocking text-align: justify from being acceptable to use.

Implemented but needs a spec

Wish list

  1. Ruleset interpolation

  2. Set font-size by x-height

Research board

Open issues