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
   • Baseline grids in CSS are helpful to keep text across multiple columns cleanly aligned.
   • Note this issue with the headline examples in the spec.
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

• -webkit-background-clip: implemented in all major browsers but doesn’t have a spec. Webkit’s blog post on background-clip: text.
• -webkit-text-stroke: implemented in all major browsers but doesn’t have an official spec. The -webkit-text-stroke compatibility standard can be found here.
  • When codifying into an official spec, please note the issues with outline overlaps that are common in variable fonts.

Wish list

1. Ruleset interpolation

2. Set font-size by x-height

   • X-height has more of an impact on the appearance of perceived font-size than the font size itself, which is the size of the art-space the font itself is drawn on. Note some considerations will need to be made regarding internationalization here as only alphabets with lowercase character sets have an x-height.

     

   • Also see this thread between Chris Armstrong and Una on Twitter, Chris created this fantastic video describing the need for x-height based font sizing in detail.

   • Myndex’s issue on font-sizing by x-height.

Research board

Open issues

• Interpolation between breakpoints (fluid type)
• Query page zoom to compensate for text sizing adjustments (Accessibility with fluid type)
• Control justification settings
• Myndex’s issue on font-sizing by x-height