Kern: exploring variable fonts and generating fluid type
Every font in Kern is a small config: a name, a CSS family and a list of axes, each with a tag, a label, a minimum, a maximum, a default and a step. Roboto Flex has weight, width, optical size, grade and slant. Fraunces adds softness and a wonky axis to weight and optical size. Playfair Display has weight only. The slider panel never special-cases any of them. It maps over the list and renders a range input per axis, using that axis's own minimum, maximum and step. A font with one axis gets one slider, and a font with five gets five. Adding a font means adding its config and loading the font file; the panel does not change. The same list builds the CSS. One function writes each axis as a quoted tag followed by its current value, falling back to the default, joined with commas. That string goes straight into font-variation-settings on the preview. A slider that updates a paragraph can…