Typography Guidelines for UI Kits

Typography carries most of the personality in a UI, often more than color or imagery. Here are the guidelines we follow across Niagara UI kits.

Limit type families: one display or heading font paired with one reliable body font is usually enough. Adding a third family rarely improves a design and often muddies it.

Establish a type scale: pick a small set of sizes, for example 14, 16, 20, 24, 32, and 40px, and reuse them everywhere instead of picking arbitrary sizes per screen.

Line height matters: body copy generally reads best around 1.4 to 1.6 times the font size, while tight headlines can use a smaller ratio.

Line length: aim for roughly 45 to 75 characters per line for paragraph text so eyes don't have to work too hard tracking from one line to the next.

Weight over size: use font weight changes (regular, medium, bold) to create hierarchy before reaching for a bigger size, which keeps layouts calmer.

Following this scale keeps text consistent whether it shows up in a product page, a dashboard, or a marketing banner.