Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Typography

Typography scale and font family definitions for readable, accessible content. All text meets WCAG 2.2 contrast requirements.

Heading 1 (2rem / 32px)

Heading 2 (1.5rem / 24px)

Heading 3 (1.25rem / 20px)

Heading 4 (1.125rem / 18px)

Body text (1rem / 16px) - The minimum font size should always be 16px for optimal readability and to prevent mobile zoom on input focus.

Small text (0.875rem / 14px) - Only use this if you have space restraints in a user interface component.

CSS

:root {
    --ads-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --ads-font-mono: 'Courier New', Courier, monospace;
}

body {
    font-family: var(--ads-font-family);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ads-text-color);
}

h1 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.875rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}


p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 1rem;
}

Accessibility Guidelines

Key Requirements

  • Minimum font size: Always use 16px (1rem) minimum for body text to ensure readability and prevent mobile zoom
  • Line height: Use 1.5 minimum for body text (1.6 recommended) to improve readability for users with dyslexia
  • Contrast ratios: Text color (#1a1a1a) on white background provides 11.5:1 contrast ratio
  • Secondary text: Color (#4a4a4a) provides 7.5:1 contrast ratio, exceeding WCAG AAA requirements
  • Font family: System fonts ensure fast loading and familiarity across platforms

Custom Implementation Notes

Why 16px minimum? Font sizes below 16px cause iOS Safari to zoom in on input fields when focused. This creates a disorienting experience for mobile users. Using 16px as your base font size prevents this automatic zoom behavior.

Heading hierarchy: Always use heading levels in order (h1, then h2, then h3) to maintain document structure for screen reader users. Never skip heading levels for visual styling - use CSS instead.

Line length: For optimal readability, limit line length to 70-80 characters (about 40-50rem). Longer lines make it difficult for readers to track from the end of one line to the beginning of the next.

References