CSS Typographic Initiatives

This is the project space for the open web standards work of Scott Kellum and Typetura.

Making typography on the web better is the reason why Typetura was founded, and improving the web platform as a whole is critical to achieving this goal. This project space is made possible by the generous support of the Google UI Fund.

Ruleset interpolation

Explainer

The biggest tension in responsive web design is the interaction between flexible media and inflexible text. In responsive layouts, text behaves like an incompressible liquid that expands in the block direction as it is compressed in the inline direction. Conversely, flexible media shrinks in the block direction proportionally to shrinking in the inline direction.

Providing a toolset to interpolate styles as containers shrink will allow web authors to ensure text is well styled regardless of layout or device. Balancing line length, font size, and line height along with variable font settings like optical size, width, and weight.

Simple typesetter

An exploration of all the decisions that go into typesetting for fluid media and how might we make simple controls around them? This project is currently in the early exploration phases.

Glossary

Typographic terms can be confusing. The differences between terms like leading and line height, type design and typography, and typeface and font can dramatically change what is being communicated. It’s important to have clear and well documented definitions of the terms we use to ensure we are all on the same page.

Web typography audit

There is a lot of work that has been done to make the web a better place for typography. There is also a lot of low-hanging fruit that needs to be implemented, is implemented and needs a clear spec, or where there is opportunity for iteration. This is a survey of these areas and where we might improve typography on the web platform incrementally.