Typography

Typography

Stretchy type

Rather than jumping between font sizes at different breakpoints, we can use so-called "css locks" to set a starting font size and line height, then scale it to an upper size proportionally with the viewport until an upper limit is reached at a particular viewport size (or alternatively, continue scaling up forever).

A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other.

-- The math of CSS locks by Florens Verschelde.