Typography System

Fluid, responsive typography that scales with viewport size

What is Fluid Typography?

Fluid typography automatically scales font sizes between minimum and maximum values based on viewport width. BreakColorUI uses CSS clamp() to create smooth, responsive type scales that adapt perfectly from mobile to desktop without breakpoints.

Why Fluid Typography?

  • • Scales smoothly across all screen sizes (no breakpoints needed)
  • • Better readability on mobile devices
  • • Maintains visual hierarchy at every viewport size
  • • Uses modern CSS clamp() for precise control
  • • Accessible and responsive by default

Typography Scale

BreakColorUI provides a complete 10-step type scale from large display headings to small body text:

7 Heading Levels (H0-H6)

From massive hero titles (H0) down to smallest headings (H6) - complete hierarchy for any content

3 Body Text Sizes (L/M/S)

Large lead text, standard body copy, and small captions - all with fluid scaling

Type Scale Overview

H0: Largest display heading, hero titles

H1: Main page titles

H2: Section headings

H3: Subsection headings

H4: Component headings

H5: Small headings

H6: Smallest headings

Text L: Large body text, lead paragraphs

Text M: Standard body text

Text S: Small text, captions, labels

How Fluid Sizing Works

Fluid typography adapts seamlessly across devices using CSS clamp() - no media queries required:

Mobile (320px)

Uses minimum font size for comfortable reading on small screens

Tablet (768-1024px)

Scales proportionally between min and max sizes as viewport grows

Desktop (1440px+)

Uses maximum font size for optimal readability on large screens

CSS clamp() Examplecss
/* Example: H1 heading */ font-size: clamp(32px, 2vw + 1rem, 56px); /* How it works: */ /* 32px = minimum size (mobile) */ /* 2vw + 1rem = preferred size (scales with viewport) */ /* 56px = maximum size (desktop) */ /* The browser automatically picks the right size! */

No Breakpoints Needed

Unlike traditional responsive typography with multiple media queries, fluid typography scales continuously. Your text adapts to every viewport size, not just predefined breakpoints.

Configuring Typography

Set up your typography system in the dashboard with just a few clicks:

Configuration Steps

  1. 1. Open Typography Tab - Navigate to your project's Typography section
  2. 2. Set minimum sizes - Configure font sizes for mobile devices (starting at 320px)
  3. 3. Set maximum sizes - Configure font sizes for desktop (up to 1440px+)
  4. 4. Configure viewport range - Adjust if needed (default: 320px to 1440px)
  5. 5. Add line heights - Optionally configure line-height for each level
  6. 6. Save - Click save to generate CSS variables

Using Typography Variables

Once configured, your typography system becomes available as CSS variables:

Typography CSS Variablescss
/* Font size variables (fluid clamp) */ --hcl-text-h0 /* Largest display heading */ --hcl-text-h1 /* Main page title */ --hcl-text-h2 /* Section heading */ --hcl-text-h3 /* Subsection heading */ --hcl-text-h4 /* Component heading */ --hcl-text-h5 /* Small heading */ --hcl-text-h6 /* Smallest heading */ --hcl-text-body-l /* Large body text */ --hcl-text-body-m /* Standard body text */ --hcl-text-body-s /* Small text */ /* Line height variables (optional) */ --hcl-lh-h0, --hcl-lh-h1, etc.
Practical Usagecss
/* Headings */ h1 { font-size: var(--hcl-text-h1); line-height: var(--hcl-lh-h1, 1.2); /* fallback if not set */ } h2 { font-size: var(--hcl-text-h2); line-height: var(--hcl-lh-h2, 1.3); } /* Body text */ p { font-size: var(--hcl-text-body-m); line-height: 1.6; } .lead-text { font-size: var(--hcl-text-body-l); } .caption { font-size: var(--hcl-text-body-s); }

Line Height Best Practices

Proper line height improves readability and visual rhythm:

Large Headings (H0-H3)

1.1 - 1.2 line height - Tighter spacing for impact and hierarchy

Small Headings (H4-H6)

1.3 - 1.4 line height - Moderate spacing for clarity

Body Text

1.5 - 1.6 line height - Comfortable reading with good breathing room

Line heights are optional

If you leave line heights empty, BreakColorUI won't generate --hcl-lh-* variables. Your headings will use browser defaults, which is perfectly fine for most projects. Only configure line heights if you need precise control.

Real-World Example

Here's how a complete page might use the typography system:

Complete Page Stylingcss
/* Hero section */ .hero-title { font-size: var(--hcl-text-h0); /* Large display text */ line-height: var(--hcl-lh-h0, 1.1); font-weight: 700; } /* Page title */ .page-title { font-size: var(--hcl-text-h1); line-height: var(--hcl-lh-h1, 1.2); margin-bottom: 1rem; } /* Section headings */ .section-heading { font-size: var(--hcl-text-h2); line-height: var(--hcl-lh-h2, 1.3); } /* Lead paragraph */ .lead { font-size: var(--hcl-text-body-l); line-height: 1.6; color: var(--hcl-neutral-11); } /* Standard body */ p { font-size: var(--hcl-text-body-m); line-height: 1.6; color: var(--hcl-neutral-12); } /* Captions */ .caption { font-size: var(--hcl-text-body-s); line-height: 1.5; color: var(--hcl-neutral-11); }

Next Steps

With typography configured, you're ready to set up your spacing system:

Continue to Spacing

Head to Spacing System to configure fluid, responsive spacing for components and sections that adapts just like your typography.