Typography Guide for UI Design

Bad typography makes a polished design look amateur. Good typography is mostly invisible — users just find the interface easy to read. Getting there requires a few specific rules applied consistently.

What a type scale is

A type scale is a set of font sizes that work together harmoniously. Instead of picking sizes freely (14, 15, 17, 21, 28...), you commit to a defined set and only use those.

A practical scale for most products:

| Name | Size | Use | |---|---|---| | xs | 12px | Labels, captions, meta info | | sm | 14px | Secondary body, UI labels | | base | 16px | Primary body text | | lg | 18px | Lead paragraphs, emphasized body | | xl | 20px | Small headings, card titles | | 2xl | 24px | Section headings | | 3xl | 30px | Page headings | | 4xl | 36px | Display, hero |

You don't have to use every size. Pick the ones your product needs and stick to them. The constraint is the point.

Tailwind CSS's default scale (text-xs through text-9xl) is a good reference if you need something established.

Line height rules

Line height is the vertical space between lines of text. Too tight and lines blur together. Too loose and the text feels disconnected.

Body text: 1.4 to 1.6 times the font size. At 16px, that's 22–26px. 1.5 is almost universally correct for reading.

Headings: 1.1 to 1.2. Headings are short enough that generous line height wastes space and creates awkward gaps. At 30px, use 33–36px line height.

Single-line UI elements (buttons, labels, badges): 1 or a specific pixel value that centers the text visually. Don't use body line height here.

Set these as styles or variables in Figma so you're never eyeballing it.

Font pairing

Pairing two typefaces adds visual interest and creates clear hierarchy. The most reliable pattern: a sans-serif for body text, a contrasting typeface for headings.

Serif + sans-serif: Classic and trustworthy. Works well for editorial, fintech, and premium products. Example: Playfair Display (headings) + Inter (body).

Two sans-serifs: Works when one is geometric/display and the other is neutral/readable. Example: Clash Display (headings) + Söhne or Inter (body). Dangerous if you pick two similar fonts — they'll look like a mistake.

Single typeface with weight contrast: Often the cleanest approach for product UI. Inter Bold for headings, Inter Regular for body. No pairing needed. This is what most SaaS products use.

Limit yourself to two typefaces maximum. Three is almost always too many.

For free options, Inter is the default for product UI for good reason — it's highly legible at small sizes. Geist (by Vercel) is a newer alternative. For serif headings, Fraunces and Playfair Display are both strong.

Try Figma Free

Responsive typography

At smaller screen sizes, large display text looks overwhelming. At larger screens, small body text becomes hard to read.

The pragmatic approach is two scales: one for mobile, one for desktop. Your 36px heading on desktop might be 28px on mobile. Your 16px body text might drop to 15px.

In Figma, set up separate text styles or variables for each breakpoint, or use separate frames for mobile and desktop layouts. Don't try to handle responsive type in Figma with complex constraints — just design the breakpoints explicitly.

In CSS, clamp() handles fluid typography between breakpoints. If you're handing off to a developer, specify the min and max sizes and let them handle the interpolation.

Common mistakes

Too many font weights. Using light, regular, medium, semibold, and bold in the same interface creates visual noise. Stick to 2–3 weights. Regular and semibold will handle most situations. Add bold only when you genuinely need stronger emphasis.

Inconsistent sizes. If you're not on a scale, you'll end up with 13px here, 15px there, 17px somewhere else. It looks inconsistent because it is. Enforce the scale.

Measure (line length) that's too wide. Long lines are hard to read. The ideal is 60–80 characters per line. In CSS that's roughly max-width: 65ch. If your body text spans the full width of a desktop viewport, it's too wide.

Poor contrast on body text. Body text should be high contrast. Save light gray for secondary text. #6B7280 (Tailwind gray-500) is fine for captions — it's too light for paragraph text.

Uppercase body text. All-caps is appropriate for short labels, badges, and navigation items. Never use it for paragraph text. It's significantly harder to read.

Implementing in Figma

Create text styles for every combination of size and weight you'll use. Name them consistently: text/base/regular, text/base/semibold, heading/2xl/bold.

Once your scale is defined as styles, applying it is a single click. Updating it later changes every instance automatically.

If you're building a design system, move your type scale into Figma Variables as number variables for size, and keep the full style (including line height and letter spacing) as Text Styles. The two systems complement each other.

Good typography isn't about picking beautiful fonts. It's about making deliberate decisions and applying them without exceptions.