Typography System
Fluid typography that scales automatically from mobile to desktop
Try It
Drag the slider to see how font sizes scale fluidly across viewports.
Fluid Typography System
1024px viewportViewport Width1024px
375px1920px
H1Step 6
44px (2.737rem)
The quick brown fox
font-size: var(--hfs-h1);Range:2rem (32px)→3.2rem (51.2px)
H2Step 5
35px (2.211rem)
The quick brown fox
font-size: var(--hfs-h2);Range:1.75rem (28px)→2.5rem (40px)
H3Step 4
29px (1.807rem)
The quick brown fox
font-size: var(--hfs-h3);Range:1.5rem (24px)→2rem (32px)
Text MStep 0
16px (1.000rem)
The quick brown fox
font-size: var(--hfs-text-m);Range:1rem (16px)→1rem (16px)
How It Works
BreakColorUI uses CSS clamp() to create smooth typography that adapts to any screen size - no breakpoints needed.
Mobile (320px)
Uses minimum font size
Desktop (1440px)
Uses maximum font size
Generated CSScss
/* Example output */
--hfs-h1: clamp(2rem, 1.5rem + 1.5vw, 3.2rem);
--hfs-h2: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
--hfs-text-m: clamp(1rem, 0.9rem + 0.2vw, 1.125rem);Available Tokens
7 Headings (H0-H6)
From hero titles to small headings
3 Body Sizes (L/M/S)
Lead text, body, and captions
CSS Variablescss
/* Headings */
--hfs-h0, --hfs-h1, --hfs-h2, --hfs-h3, --hfs-h4, --hfs-h5, --hfs-h6
/* Body text */
--hfs-text-l, --hfs-text-m, --hfs-text-s
/* Line heights (optional) */
--hfs-lh-h1, --hfs-lh-h2, etc.Usage
In Breakdance / Oxygencss
h1 { font-size: var(--hfs-h1); }
h2 { font-size: var(--hfs-h2); }
p { font-size: var(--hfs-text-m); }Quick Tip
Use the Chrome Extension to insert variables with one click directly in Breakdance or Oxygen editor.