Skip to main content
Termlib

Styling & CSS · Text

Typography

Also called: Type scale, Type hierarchy, Text styles, Font styles

Planning the font, size, weight, line height, spacing, and color of text as a whole, so content is clear, easy to read, and has an obvious order of importance.

Example

In detail

Typography decides whether an interface looks professional. It covers: font (usually the system font stack, like San Francisco on Apple devices and Segoe UI on Windows), the size scale (body 14–16px, subheadings 18–20px, large headings 24–32px), weight (regular 400, bold 600), line height (1.5–1.8 for body text), paragraph spacing, text color (dark gray for body, light gray for secondary text), and line length (about 50–75 characters per line is comfortable for English).

The key is fewer and consistent. A product usually only needs 4–6 font sizes and 2–3 weights. Define them as one type scale and reuse it on every page, instead of picking a size on the spot each time.

When asking AI, you can give it this scale directly, or say "use Tailwind's text-sm, text-base, and text-xl scale."

Developer info
Term ID
style-typography
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • span.ant-typography
  • .el-text
  • .n-text
  • span.arco-typography
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • typography
  • type-scale
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • Typography
Priority
0 · when several match at the same level, the higher priority wins
Version
v1 · updated Sep 30, 2026