
Styling Dynamic Content from CMS Safely
How to control unpredictable HTML while maintaining design consistency.

Explore how fluid typography, design tokens, and modern CSS features like clamp() and variable fonts enable scalable, readable, and accessible type scales across devices.
A robust typographic system starts with a clear scale and a set of tokens. Instead of hard-coding every font-size value, you define a typographic rhythm that can grow or shrink predictably as the viewport changes. This keeps headings, body text, captions, and UI labels in harmonious proportion while remaining legible at all sizes.
Key ideas include: a modular scale, fluid sizing, variable fonts, and token-driven design. When you pair these with accessible defaults (adequate contrast, readable line height, and consistent margins), you get a typography system that scales gracefully from mobile to desktop.
Modern CSS lets us replace fixed pixel values with a fluid scale. The most common approach uses clamp() with a modular ratio to define a stack of typographic steps (step-0, step-1, step-2, …). This creates a predictable hierarchy that still adapts to the available width.
Base size aligned with user expectations (around 16px on desktop, slightly larger on mobile).
Heading levels mapped to steps in the scale so H2, H3, and H4 stay in proportion to body text.
Dynamic adjustments using viewport width (via clamp() and vw-based tweaks) to maintain rhythm.
Below is a compact exemplification of this approach in CSS. It uses CSS variables to store the scale and clamp() to fluidly react to width changes.
:root {
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
--ratio: 1.25;
--step-0: 0.875rem;
--step-1: calc(var(--step-0) * var(--ratio));
--step-2: calc(var(--step-1) * var(--ratio));
--step-3: calc(var(--step-2) * var(--ratio));
}
html { font-family: var(--font-sans); font-size: 16px; }
h2 { font-size: clamp(var(--step-1), calc(var(--step-1) + 1vw), var(--step-3)); }
p { font-size: clamp(0.95rem, calc(0.9rem + 0.6vw), 1.15rem); }Tokens turn typography decisions into reusable, maintenance-friendly decisions. A small set of CSS variables can drive entire type scales, making it easy to adapt to brand changes or different themes without touching markup.
Tips for building tokens:
Define base size and ratio as root tokens.
Expose stepped sizes as --step-0, --step-1, etc. for reuse in headings and body copy.
Consider container queries to tailor scale to content widths in component libraries.
Try combining the following patterns: a fluid base with a modular scale, meaningful typography tokens, and considered line length. This trio yields scalable hierarchies that remain legible across devices.
Fluid base using clamp() with a sensible min and max.
Heading scale tied to a modular ratio for consistent hierarchy.
Container- or viewport-aware rhythm adjustments via CSS variables and media queries.
Accessible defaults: avoid setting body text below 16px equivalent on accessible devices; prefer rem units for predictable scaling.
This paragraph uses the same typographic system and demonstrates how the scale tightens or loosens with available space. Resize the window to see the hierarchy adjust while keeping readable rhythm.
Body text follows the modular scale while remaining legible. The line-height is tuned for readability at multiple sizes.
Note: The scale relies on clamp() plus a small ratio, and can be extended with variable fonts for more efficient weights within the same space.
Readable line length, sufficient contrast, and reasonable line-height are essential. A scalable system should preserve these properties across breakpoints. Favor rem units so user font size preferences are respected, and test with color-contrast tools to ensure legibility at all sizes.
Define typography tokens (base size, ratio, and step sizes) in a single file.
Apply a fluid base and modular scale to headings (H2–H4) and body text using clamp().
Introduce variable fonts where possible to consolidate weights within a single font family.
Test across devices and adjust margins to maintain vertical rhythm.
When you apply these steps consistently, you’ll create a scalable typographic system that’s easier to maintain, more accessible, and ready for design system tooling.
Modern CSS empowers typography with a disciplined, scalable approach. By combining fluid sizing (clamp), modular scales, and design tokens, you can craft typographic hierarchies that elegantly adapt to the web’s diversity of devices and contexts. Start with a solid base, document your scale, and let the math do the heavy lifting of maintaining a harmonious rhythm across your UI.
Let's discuss how I can help bring it to life. I'm happy to answer questions and suggest possible solutions.
Contact me