| title | date | submitter | number | tags | discussion | ||
|---|---|---|---|---|---|---|---|
I want intrinsic typography |
2020-04-13 17:00:00 -0700 |
Scott Kellum |
f27d35e6ccddc3bb619db93ed80f6793c42bdcb2 |
|
Good typesetting is subtle, but important for legibility. Line height, font size, font variation settings, and letter spacing need subtle adjustments as a block of text changes size. Currently, the best tool we have to control this with just CSS is clamp, and previously CSS Locks, but these technologies are tied to viewport, not a block of text, as well as having no support for variable font variation settings and a lack of control over rate of change across widths through easing (clamp and locks always have linear transitions).
As a result of all these problems, current tools create a substantial amount of excess code. Fixing this will mean a 60% to 90% reduction in typographic styles by my calculations. Easing and element as opposed to viewport contexts are necessary for these substantial code reductions. We also have variable fonts, and the lack of variable font support in CSS Locks and clamp runs counter to expectations type designers have for the technology. To support the utility of variable fonts moving forward we need better fluid typography tools.
I have prototyped an idea for what a solution might look like called Typetura. It works by binding CSS keyframe animations with resizeObserver to elements. I would love to see something similar be baked into CSS itself.