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.
- 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.
- 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.
- 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
- Currently this is English only and requires a prefix.
- 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.
- Initial Letters
- Leading trim
- Helpful to align the first or last line of text with the container or other content on the page.
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.
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.
- 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