Text

Text Variants

Size Variants

For responsive scaling, body text typically stays fixed at 16px — it's already readable on all viewports. If you do scale, use clamp() conservatively: clamp(1rem, 0.5vw + 0.875rem, 1.125rem). Generate values with the Clamp Calculator.

Semantic / Color Variants

Weight Variants

Formatting Variants

• Italic: font-style: italic — emphasis, citations, foreign terms
• Underline: Typically reserved for links. Use sparingly for emphasis.
• Strikethrough: text-decoration: line-through — deprecated content, price comparisons
• Monospace: font-family: var(--font-mono) — inline code, technical identifiers
• Uppercase: text-transform: uppercase; letter-spacing: 0.05em — overlines, category labels

Text Properties

Design Token Mappings

The 65ch measure (approximately 65 characters per line) is the typographic sweet spot for body readability. Research consistently shows that 45–75 characters per line is optimal; 65ch is the middle of that range. Set this as the default max-width on body text containers.

Select your body typeface with the Font Explorer. Prioritize typefaces with a generous x-height, open counters, and distinct letterforms (especially l/I/1 and O/0 disambiguation) for maximum screen readability.

Text States

Text is primarily a static content element, but several contextual states apply:

Line Clamping

Multi-line truncation uses -webkit-line-clamp, which is supported in all modern browsers (despite the -webkit- prefix):

.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Always provide access to the full text — via a "Read more" toggle, a Tooltip, or an expanded view.

Accessibility

Text accessibility is about ensuring content is perceivable, readable, and adaptable across all user contexts.

Color Contrast (WCAG 1.4.3 Contrast Minimum):

• Body text (under 24px / 18.66px bold) requires at least 4.5:1 contrast ratio against its background.
• Large text (24px+ or 18.66px+ bold) requires at least 3:1.
• Secondary and tertiary text variants must still meet these thresholds. A common mistake: using #9ca3af (gray-400) on white backgrounds — that's only 2.9:1, failing AA. Use #6b7280 (gray-500) or darker.
• Verify all text color variants against your backgrounds with the Contrast Checker.

WCAG 1.4.12 Text Spacing:

• Users must be able to override text spacing without loss of content. Your text component must not break when users apply custom styles:
  • Line height to at least 1.5× font size
  • Paragraph spacing to at least 2× font size
  • Letter spacing to 0.12× font size
  • Word spacing to 0.16× font size
• Test by applying these overrides via a bookmarklet or browser extension.

WCAG 1.4.4 Resize Text:

• Text must remain readable when zoomed to 200%. Use relative units (rem, em) — never px for font sizes in production CSS. The clamp() approach with rem-based values satisfies this requirement. Configure via the Clamp Calculator.

WCAG 1.4.8 Visual Presentation (Level AAA):

• Line length (measure) should not exceed 80 characters. The 65ch max-width default handles this.
• Text should not be fully justified (text-align: justify) — it creates uneven word spacing that harms readability, especially for dyslexic users.
• Line spacing should be at least 1.5× within paragraphs. The default 1.6 line height satisfies this.
• Paragraph spacing should be at least 1.5× line spacing.

Semantic HTML:

• Use <p> for paragraphs, <span> for inline text, <strong> for important text (not <b>), <em> for emphasis (not <i>), and <small> for fine print.
• Screen readers distinguish <strong> (importance) from <em> (emphasis) — use them semantically, not for visual styling.
• Truncated text must have accessible alternatives. Either provide the full text via title attribute (limited — not accessible to keyboard users) or use aria-label on the container, or a "Read more" disclosure.

Language:

• When text is in a different language from the page's lang attribute, use lang on the element: <span lang="fr">bonjour</span>. This ensures screen readers switch pronunciation rules (WCAG 3.1.2 Language of Parts).

Usage Guidelines

Do:

• Set a base font size of 16px (1rem) — this is the browser default and the foundation of accessible typography
• Use a max-width of 55–75ch on body text containers (65ch is the sweet spot)
• Maintain a line height of 1.5–1.6 for body text
• Use the variant prop for semantic coloring rather than hardcoded color values
• Choose the appropriate semantic element via as — <p> for paragraphs, <span> for inline, <small> for fine print
• Select a body typeface optimized for screen readability — test with the Font Explorer
• Provide "Read more" or tooltip alternatives for truncated text

Don't:

• Don't use font sizes below 12px — they are unreadable for many users and inaccessible
• Don't use text-align: justify — it creates rivers of whitespace that harm readability
• Don't rely on color alone to convey meaning (WCAG 1.4.1 Use of Color) — combine with icons, weight, or context
• Don't set line heights below 1.4 for body text — it cramps readability
• Don't mix more than 2–3 text sizes on a single view — too many sizes create visual chaos
• Don't use letter-spacing on body text (except uppercase variants) — it disrupts natural reading rhythm
• Don't hardcode pixel values for font sizes — use rem for zoom accessibility

Readability Checklist:

1. ✅ Font size ≥ 16px for body text
2. ✅ Line height 1.5–1.6
3. ✅ Line length 45–75 characters (65ch sweet spot)
4. ✅ Contrast ratio ≥ 4.5:1 (verify with Contrast Checker)
5. ✅ Relative units (rem) for all font sizes
6. ✅ Text remains readable at 200% zoom
7. ✅ No justified alignment
8. ✅ Paragraph spacing ≥ line height

Design System Implementations

Material Design (MUI) handles body text through <Typography> with variants: body1 (16px), body2 (14px), caption (12px), overline (12px uppercase). The component prop controls the rendered element. MUI's type scale is based on a 14px base with a 1.43 ratio, using Roboto. The gutterBottom prop adds consistent bottom margin. MUI v5 supports the sx prop for inline style overrides using the theme's spacing/color tokens.

Ant Design uses <Typography.Paragraph> for block text and <Typography.Text> for inline text. Both support type (secondary, success, warning, danger), strong, italic, underline, delete (strikethrough), code, mark (highlight), and disabled. The ellipsis prop supports rows (line clamping) with an expandable "Read more" toggle built in — one of the most complete truncation implementations across design systems.

Chakra UI provides a <Text> component inheriting from Box with full style prop support. The fontSize prop accepts the theme's size scale (xs–6xl) or responsive arrays. noOfLines implements line clamping. Chakra pairs well with the @chakra-ui/layout Stack components for controlling paragraph spacing. Color is controlled via color prop mapped to the theme's color tokens.

Bootstrap styles body text via global CSS resets (body { font-size: 1rem; line-height: 1.5; }) and utility classes: .text-muted, .text-primary, .lead (1.25rem intro text), .small (0.875rem). Bootstrap does not provide a Text component — it's CSS-class-based. The $font-size-base, $line-height-base, and $paragraph-margin-bottom Sass variables control global text behavior.

Apple Human Interface Guidelines defines body text through Dynamic Type styles: Body (17pt), Callout (16pt), Footnote (13pt), Caption 1 (12pt), Caption 2 (11pt). All styles respond to the user's Dynamic Type size preference. In SwiftUI, .font(.body) applies the Body style. Apple emphasizes that body text should use San Francisco (system font) for maximum legibility on Apple displays.

Tailwind CSS provides text sizing utilities (text-base, text-sm, text-lg), color utilities (text-gray-600), weight utilities (font-medium), and line-height utilities (leading-relaxed). Truncation: truncate (single line) and line-clamp-3 (multi-line via @tailwindcss/line-clamp plugin, now built in). Tailwind's prose class from @tailwindcss/typography applies opinionated but beautiful body text defaults — optimal line length, spacing, and sizing.