Typography

Typography rendering details that make interfaces feel better, on both the web (React + Tailwind/CSS) and mobile (React Native). Text wrapping and font smoothing are web-only; Dynamic Type, adjustsFontSizeToFit, and fontVariant are mobile-first. Tabular numbers exist on both.

Text Wrapping — Web only

React Native has no text-wrap property. Everything in this section is web-only; the mobile equivalent (controlling line count and shrink-to-fit) is covered under Mobile Text Layout.

text-wrap: balance

Distributes text evenly across lines, preventing orphaned words on headings and short blocks. Only works on blocks of ~6 lines or fewer (Chromium) / 10 or fewer (Firefox) — the algorithm is expensive, so browsers cap it.

/* Good — even line lengths on short headings */
h1, h2, h3 {
  text-wrap: balance;
}