- Documentation

Typography

The typography system is designed to ensure consistent and responsive text scaling across different screen sizes. It uses the CSS clamp() function combined with custom properties (CSS variables) to dynamically adjust font sizes based on the viewport width. This approach ensures readability and visual harmony on all devices.

Key Features

Responsive Typography: Font sizes scale fluidly between a minimum and maximum value based on the viewport width.
Consistency: Predefined CSS variables for each heading level (h1 to h6) and paragraph (p) ensure uniformity across the design system.
Customizability: Developers can easily override or extend the system by modifying the CSS variables.

How It Works

The system uses the clamp() function, which takes three arguments:

min: The minimum font size (in rem).
val: The preferred font size (in vw for responsiveness).
max: The maximum font size (in rem).

The formula ensures that the font size scales fluidly between the min and max values based on the viewport width.

css

font-size: clamp(var(--min), var(--val), var(--max));

Typography Scale

The typography scale is defined for each heading level (h1 to h6) and paragraph (p). Each level has its own set of CSS variables for --min, --val, and --max.

Implementation

To use the typography system, simply apply the appropriate class or HTML element. The CSS variables will handle the responsive scaling automatically.

html

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<p>This is a paragraph.</p>

Custom Classes:

If you need to apply heading styles to non-heading elements, use the corresponding class (e.g., .h1, .h2, etc.).

html

<div class="h1">This looks like a Heading 1</div>
<div class="h2">This looks like a Heading 2</div>

Overriding Defaults

If you need to customize the typography for a specific component or section, you can override the CSS variables.

css

.custom-section h1 {
  --min: 2.5rem;
  --val: 5vw;
  --max: 4rem;
}

Best Practices

Use Semantic HTML: Always prefer using the correct HTML elements (h1, h2, etc.) for headings and paragraphs.
Avoid Overriding Unless Necessary: Stick to the predefined variables for consistency unless a specific design requirement demands a change.
Test Across Breakpoints: Ensure the typography scales appropriately on all screen sizes by testing on different devices and viewports.

Here’s the complete CSS code for the typography system:

css

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body .h1,
body .h2,
body .h3,
body .h4,
body .h5,
body .h6 {
  font-size: clamp(var(--min), var(--val), var(--max));
}

h1, .h1 {
  --min: 1.9838rem;
  --val: 4.029999999999999vw;
  --max: 3.052rem;
}

h2, .h2 {
  --min: 1.58665rem;
  --val: 4.029999999999999vw;
  --max: 2.441rem;
}

h3, .h3 {
  --min: 1.482rem;
  --val: 4.029999999999999vw;
  --max: 2.28rem;
}

h4, .h4, blockquote {
  --min: 1.26945rem;
  --val: 4.029999999999999vw;
  --max: 1.953rem;
}

h5, .h5 {
  --min: 1.17225rem;
  --val: 4.029999999999999vw;
  --max: 1.563rem;
}

h6, .h6 {
  --min: 1.0625rem;
  --val: 4.029999999999999vw;
  --max: 1.25rem;
}

p, .p {
  --min: 1rem;
  --val: 4.029999999999999vw;
  --max: 1rem;
}