Overview

Our typography system uses CSS custom properties (CSS variables) to provide consistent, accessible, and maintainable typography across the entire application.

The system is responsive and scales appropriately across different breakpoints. All typography values use semantic naming conventions for easy understanding and maintenance.

Use semantic HTML elements (<h1> through <h6>, <p>, <small>) to automatically apply the correct typography styles. You can also use CSS custom properties directly in your components for custom typography needs.

Headings

All heading levels from h1 to h6 with their respective font sizes and line heights.

Responsive: At tablet landscape breakpoint (1024px and above), h1-h4 sizes increase for better readability on larger screens.

Body Text

Standard paragraph and body text styles.

Text Semantics

Additional text formatting elements.

Usage

Use semantic HTML elements to automatically apply typography styles. The system will automatically use the correct font sizes and line heights:

            
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<p>This is a paragraph of body text with <a href="#">a link</a> inside.</p>
<small>This is small text for disclaimers.</small>
            
          

You can also use CSS custom properties directly in your components for custom typography needs:

Using CSS Custom Properties

For custom components that need typography styles, use the CSS custom properties directly:

            
.my-custom-heading {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

.my-custom-text {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
}
            
          

The mapping between semantic elements and CSS custom properties is:

CSS Custom Properties

All typography values are defined as CSS custom properties, making them easy to override and theme:

            
:root {
  /* Headings */
  --font-size-h1: 1.625rem;
  --line-height-h1: 2rem;
  --font-size-h2: 1.25rem;
  --line-height-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --line-height-h3: 1.75rem;
  --font-size-h4: 1.125rem;
  --line-height-h4: 1.625rem;
  --font-size-h5: 1rem;
  --line-height-h5: 1.5rem;
  --font-size-h6: 0.875rem;
  --line-height-h6: 1.25rem;
  
  /* Body text */
  --font-size-p: 1rem;
  --line-height-p: 1.5rem;
  --font-size-small: 0.875rem;
  --line-height-small: 1.25rem;
}

@media (min-width: 1024px) {
  :root {
    /* Responsive overrides for larger screens */
    --font-size-h1: 2rem;
    --line-height-h1: 2.5rem;
    --font-size-h2: 1.625rem;
    --line-height-h2: 2rem;
    --font-size-h3: 1.5rem;
    --line-height-h3: 2rem;
    --font-size-h4: 1.25rem;
    --line-height-h4: 1.75rem;
  }
}
            
          

Note: You can override these CSS variables in your own stylesheets or themes to customize typography without modifying the base system.

Responsive Behavior

The typography system automatically scales at the tablet landscape breakpoint (1024px):

Format: font-size / line-height. Pixel values in parentheses approximate a 16px base font size.