Typography often feels like a small piece of the design puzzle, but it's actually one of the most impactful. Getting your type right isn't just about making text look pretty — it's about readability, accessibility, and consistency across your product.
I'll share my experience building a typographic system inside a design system. We'll cover why relative units matter, how tokens keep your system coherent, why spacing should scale too, and how type scale, weight, and color work together to guide users' attention. Think of it as a practical roadmap for turning scattered styles into a thoughtful, scalable system.
Don't sleep on REM
Using relative units like rem instead of px makes typography more accessible. Since rem scales based on the browser's root font size, it automatically respects a user's preferred text size — essential for anyone with low vision. In contrast, px values stay fixed and ignore these settings.
Tailwind CSS already uses rem by default, so classes like text-lg are actually relative to the root size (typically 16px). This small detail ensures that when someone adjusts their browser's default font size, your entire interface scales gracefully.
A Token of Consistency
Once you've chosen relative units, the next step is to stop scattering them all over your stylesheets. Define your font sizes as tokens or variables, such as --font-size-md: 1rem; and --font-size-lg: 1.125rem;. This approach does two things. First, it creates a single source of truth. If you ever need to adjust your base scale, say you want to make everything slightly larger for readability, you can tweak one value instead of hunting down dozens. Second, it makes your typography system readable. Seeing --font-size-heading tells you more about intent than 1.75rem ever could.
Most design systems, whether coded in CSS or managed through tools like Figma, rely on tokens to bridge the gap between design and implementation. They help ensure that when a designer says "body text," and a developer writes text-body, they're literally referencing the same value.
Size Everything, Relatively
Typography doesn't live in isolation. Once you've set your font sizes in rem, it makes sense to scale spacing, padding, and layout dimensions the same way. Using relative units keeps proportions consistent when users adjust their root font size or when your interface needs to adapt across breakpoints. If your type scales but your margins stay locked in px, the rhythm breaks — headlines might look cramped, or white space may suddenly feel off. Defining tokens like --space-md: 1.5rem; or --gap-lg: 2rem; helps maintain harmony across text and layout.
This approach isn't just about math. It's about visual consistency and accessibility — the feeling that everything grows or shrinks together. It's the difference between a page that breathes and one that creaks when resized.
Type Scale, Weight and Color for Hierarchy
When we talk about type scales, the Major Second ratio (1.125) is one of the most common. It means that each successive font size is about 12.5% larger than the previous one, creating a gentle, readable progression. This subtle increase keeps text hierarchy clear without feeling jarring, making it ideal for both body text and headings.
Beyond size, font weight and color are powerful levers for establishing hierarchy. A bold heading naturally draws attention, while a lighter body text recedes, helping readers scan content effortlessly. Color can reinforce this hierarchy: darker tones signal importance, while muted or subtle shades indicate supporting information.
When combined with a clear type scale, these tools allow you to create a visually structured page without adding extra elements. Essentially, weight and color act like signposts, guiding the reader's eye through the content in an intuitive way.
Using relative units like rem ensures your interface respects user preferences and remains accessible, while defining font sizes and spacing as tokens creates a single source of truth and keeps your system readable. Scaling text, spacing, and layout consistently preserves visual rhythm, and leveraging font weight and color alongside a clear type scale helps users scan and understand content intuitively. Ultimately, a thoughtfully planned typographic system makes a product feel polished, flexible, and accessible — not just visually, but functionally.
- https://typescale.com/ — Typescale: create stunning typography, generate CSS, and find inspiration.
- https://tailwindcss-typography.vercel.app/ — Tailwind CSS Typography.
- https://www.youtube.com/watch?v=eW2-ghXuYC8 — Tonic: how to set up your typography sizing and line height for web design.
- https://www.youtube.com/watch?v=9w-BwzcuxYM — Hoonie XP: typography — ultimate design system breakdown (font sizes, text style naming, responsive scaling).