Typography System Template for Product Managers

System fonts (Inter is close to system UI fonts) load instantly and cost zero bandwidth. Custom web fonts add personality but cost 50-150KB and delay text rendering. For productivity SaaS products where speed matters more than brand expression, a system font stack is often the right choice. For marketing sites and consumer products where brand differentiation matters, invest in a custom font. Either way, never load more than 3 font files.

Use rem for all font sizes. This ensures text scales when users change their browser's default font size (an accessibility requirement). Define your scale in pixels for documentation clarity, but output rem in CSS. `1rem = 16px` at default browser settings. The [design token template](/templates/design-token-template) covers the pixel-to-rem conversion strategy in more detail.

Three to four: Regular (400), Medium (500), Semibold (600), and Bold (700). Most products can get by with just Regular and Semibold. Each additional weight adds 40-50KB to the font download. Loading 6 weights of a variable font is acceptable since variable fonts bundle all weights in one file, but loading 6 static font files is wasteful.

45-80 characters per line, with 60-75 being the sweet spot for sustained reading. In CSS, use `max-width: 65ch` on prose containers. `ch` units are based on the width of the "0" character in the current font, so the constraint adapts to the font. Lines shorter than 45 characters cause excessive line breaks. Lines longer than 80 characters make it difficult for the eye to track to the next line.

Use the `sm` (14px) size with `snug` (1.35) line height for table cells and data displays. Tabular numbers (`font-variant-numeric: tabular-nums`) ensure columns of numbers align vertically. Monospace font for numerical data improves scannability. Avoid going below 12px for any data cell. If the data does not fit, the solution is a wider column or horizontal scroll, not smaller text. ---