12 Typography Rules for UI Design (with Examples)

Most of any interface is text: labels, buttons, headings, prices, error messages, help text. Good typography makes all of it easy to scan and read; poor typography makes even a well-planned product feel confusing. The good news is that UI typography is mostly about a few repeatable rules, not artistic talent.

Here are twelve typography rules for UI that cover the majority of decisions you will make. For the fundamentals, see the lesson typography for UI, and for the CSS side, CSS text and fonts.

Rule 1: Choose one or two typefaces, not five

One well-designed family with several weights is enough for most products. If you want contrast, pair one family for headings with another for body text, but make sure they differ clearly (for example a geometric sans for headings and a humanist sans or serif for body). Too many fonts look chaotic and slow down page loading.

For interfaces, choose fonts with: clear letter shapes (distinguish I, l and 1), a large x-height, several weights, good number shapes (tabular figures are a bonus for tables and prices), and support for every language you need.

Rule 2: Use a type scale

A type scale is a small, fixed set of sizes. Instead of picking 15, 17, 19 and 21 on different screens, you choose sizes from the scale. Many scales use a ratio, such as 1.2 or 1.25, between steps. Here is a practical example for a web app:

Save each step as a text style in Figma so the whole team uses the same set.

Rule 3: Start body text at 16px

16px is the default font size in browsers and a comfortable minimum for body text on both mobile and desktop. Going smaller for long paragraphs forces many users to zoom. Use 14px for secondary text and 12px only for short labels. In CSS, express sizes in rem so they respect the user’s browser settings; read CSS units: px, rem, em and vw.

Rule 4: Give body text room to breathe

Line height (leading) of about 1.4 to 1.6 works well for body text. Headings need less, around 1.1 to 1.3, because large text with wide line spacing looks disconnected. WCAG’s Text Spacing criterion (1.4.12) also requires that your layout still works if users increase line height to 1.5 times the font size and paragraph spacing to twice the font size, so avoid fixed-height containers for text.

Rule 5: Keep line length comfortable

Very long lines make it hard for the eye to find the start of the next line; very short lines break the reading rhythm. A widely used guideline is roughly 45 to 75 characters per line for body text. In CSS, max-width: 65ch on a text container is a simple way to achieve this.

Rule 6: Build hierarchy with more than size

Size is only one tool. You can also use weight, colour, spacing, case and position. Often the best hierarchy uses fewer, stronger differences: a heading that is both larger and bolder, followed by body text in a slightly lighter colour. Learn more in visual hierarchy.

Rule 7: Limit weights

Two or three weights (for example Regular 400, Medium 500 or Semibold 600, and Bold 700) are enough. Very thin weights such as 100 or 200 are hard to read at small sizes and on low-quality screens, which are common on budget phones.

Rule 8: Left-align most text

For left-to-right languages, left-aligned text gives a straight starting edge that the eye can return to easily. Centre alignment is fine for short headings, buttons and empty states, but not for paragraphs. Avoid justified text on the web: browsers can create uneven gaps between words (“rivers”), which hurt readability.

Rule 9: Support Indian scripts properly

If your product serves users in Hindi, Tamil, Telugu, Kannada, Malayalam, Bengali or other Indian languages, plan for it from the start:

• Choose a font family that covers the scripts you need, for example the Noto family, which has versions for many Indian scripts. Do not rely on the system to fall back unpredictably.
• Indic scripts often have taller ascenders, descenders and vowel marks than Latin. Increase line height for these languages so marks do not collide or get clipped.
• Translated text can be longer or shorter than English. Design buttons and labels with Auto layout so they grow with the text.
• Test with real translated content, not English placeholder text.
• Set the correct lang attribute in HTML (for example lang="ta" for Tamil) so browsers and screen readers handle the text correctly.

Rule 10: Make numbers easy to compare

In tables, invoices and dashboards, use tabular (fixed-width) figures so digits line up in columns. In CSS this is font-variant-numeric: tabular-nums, if the font supports it. Right-align numeric columns, and format Indian amounts consistently, for example ₹1,25,000 using the Indian numbering system if your audience expects it.

Rule 11: Make text accessible

• Meet contrast requirements: 4.5:1 for normal text and 3:1 for large text (WCAG 1.4.3). See colour theory for UI designers.
• Allow text to be resized to 200% without loss of content (WCAG 1.4.4). Avoid fixed heights and use relative units.
• Use real text instead of images of text.
• Do not use all caps or italics for long passages.
• Use clear, plain language; good typography cannot rescue confusing words.

Rule 12: Test on real devices

Typography that looks perfect on a large, high-resolution monitor can feel cramped on a small Android phone held at arm’s length on a bus. Check your type scale on a real phone, in bright light, and with the system font size increased. Adjust before handoff, not after release.

Putting it into CSS

This small example applies several typography rules for UI at once: rem-based sizes, a simple scale, comfortable line height, limited line length and tabular numbers.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Type scale demo</title>
<style>
  :root { font-size: 100%; }  /* 16px by default */
  body {
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    margin: 24px;
  }
  .content { max-width: 65ch; }
  h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 0.5rem; }
  h2 { font-size: 1.5rem; line-height: 1.25; margin: 2rem 0 0.5rem; }
  .meta { font-size: 0.875rem; color: #4b5563; }
  table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
  td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
  td:last-child { text-align: right; }
</style>
</head>
<body>
  <div class="content">
    <h1>Monthly report</h1>
    <p class="meta">Updated by Priya Raman, Coimbatore</p>
    <p>Body text at 16px with a line height of 1.5 and a maximum width of about 65 characters is comfortable to read on most screens.</p>
    <h2>Sales by city</h2>
    <table>
      <tr><td>Chennai</td><td>₹1,25,000</td></tr>
      <tr><td>Madurai</td><td>₹98,400</td></tr>
      <tr><td>Puducherry</td><td>₹1,11,750</td></tr>
    </table>
  </div>
</body>
</html>

Common typography mistakes and quick fixes

Typography rules for UI: a quick checklist

• One or two typefaces, each with a clear role.
• A documented type scale saved as text styles.
• Body text 16px, line height about 1.5, line length about 45–75 characters.
• Two or three weights at most.
• Left-aligned paragraphs, no justified text.
• Fonts cover every language you support, with adjusted line height for Indic scripts.
• Contrast and resize requirements met.
• Checked on a real phone.

Frequently asked questions

Further reading

• w3.org/WAI/WCAG22/Understanding/text-spacing.html
• w3.org/WAI/WCAG22/Understanding/resize-text.html
• w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric