better-typography

Use text-wrap: balance on headings to distribute text evenly across lines, and text-wrap: pretty on descriptions to prevent a single short word on the final line. Skip both in long-form text, where they waste space and hurt readability.

Keep the input font-size at 16px or larger, since Safari zooms when it is smaller. Either size the input up on mobile with a responsive class, or keep 16px and render the intended size with a transform scale while compensating width and line-height.

font-weight is a CSS property that keeps working when a non-variable fallback font renders, while font-variation-settings with the wght tag silently does nothing on fallback fonts. Reserve raw axis tags for custom axes like GRAD that have no property equivalent.

Digits have different widths by default, so timers, counters, and prices shift the layout as they change. Apply font-variant-numeric: tabular-nums to any changing value so every digit occupies equal width.

Use text-overflow: ellipsis with overflow: hidden and white-space: nowrap for single-line truncation, and line-clamp when multiple lines are allowed before cutting off. When the hidden text matters, keep the full value reachable in a tooltip or expanded view.