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
/* 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. Open Typography Tab - Navigate to your project's Typography section
- 2. Set minimum sizes - Configure font sizes for mobile devices (starting at 320px)
- 3. Set maximum sizes - Configure font sizes for desktop (up to 1440px+)
- 4. Configure viewport range - Adjust if needed (default: 320px to 1440px)
- 5. Add line heights - Optionally configure line-height for each level
- 6. Save - Click save to generate CSS variables
Using Typography Variables
Once configured, your typography system becomes available as CSS variables:
/* 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.
/* 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:
/* 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.