A headline that feels balanced on a laptop can crowd a phone screen, while comfortable mobile body text may seem understated on a wide monitor. A responsive type scale solves that tension by giving every text role a predictable range of sizes. The goal is not to make all fonts grow with the screen. It is to keep the hierarchy recognizable as available space changes.
The most reliable approach combines a handful of text roles, sensible minimum and maximum sizes, and fluid typography between those limits. You can build it without setting a different font size for every device.
Start with the text people read most
Choose body text before designing an oversized headline. For many sites, 1rem—often 16 CSS pixels with default browser settings—is a useful starting point. A slightly larger size may suit the font or audience better. Two fonts declared at 16 pixels can appear quite different because of their proportions.
Read a real paragraph on a narrow screen. If letters feel crowded, adjust the body style first. Heading sizes should grow from that foundation rather than dictate it. A guide to choosing web fonts can explain how x-height and character width affect apparent size.
Define roles before calculating sizes
You rarely need a dozen styles. Start with body text, supporting text, tertiary headings, section headings, and a main page heading. Each needs a clear job. Captions can remain relatively stable while display headings change more noticeably.
Keep roles consistent across pages. If a section heading looks prominent in one article, it should not resemble body copy in another. Treat the sizes as reusable typography tokens, not isolated decisions within individual templates.
Use a modular type scale as a guide
A modular type scale builds successive sizes by multiplying a base by a ratio. Starting at 16 pixels with a ratio of 1.25 produces approximately 20, 25, 31, and 39 pixels. The progression helps you explore hierarchy, but it is not a law.
A ratio that works on desktop might create excessive jumps on mobile. Consider a gentler progression on small screens, and adjust individual roles to suit the font and content. The system should serve real headlines, not just tidy mathematical intervals.
Choose minimum and maximum sizes
Before making values fluid, decide where each role should stop shrinking and growing. Body text might range from 16 to 18 pixels at default settings, while a main heading ranges from 32 to 56 pixels. A section heading could fall between 24 and 40 pixels. These are illustrative design values, not universal accessibility standards.
Limits stop large screens from producing enormous titles and narrow screens from making text tiny. Express the bounds in rem units so they can respond more naturally to user font-size preferences.
Make font sizes fluid with clamp()
CSS clamp() accepts a minimum, a preferred value, and a maximum. For body text, try font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem). The rem units help maintain a connection to font settings, while the viewport-width term introduces modest growth. The size remains within the stated bounds.
For a main heading, try font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem). For a section heading, use font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem). Together, these rules create responsive font sizes with smoother transitions than several rigid breakpoint-only steps.
Follow one real-world example
Imagine a tutorial website with lengthy article titles. On a viewport about 375 CSS pixels wide, the main-heading formula produces roughly 33 pixels with a 16-pixel root size. On a wide desktop it eventually reaches its 56-pixel cap. Body text grows far less because reading benefits from stability. That difference preserves a clear relationship between the headline and paragraph.
These numbers are starting points. Browser zoom, font settings, and container width all affect the final result. Viewport width is not a perfect substitute for the actual space available to a heading.
Scale line height and spacing thoughtfully
Size alone does not guarantee readable text. Paragraphs often work with unitless line-height around 1.5 to 1.7, depending on the font and line length. Larger headings usually need tighter leading, perhaps 1.1 to 1.25. Check wrapped titles carefully: a value that looks elegant on one line may feel cramped across three.
Spacing should reinforce, not compete with, the hierarchy. Use relative units for most gaps and inspect the relationship between headings and paragraphs at several widths. A consistent typography hierarchy makes those choices easier to maintain.
Test awkward widths, not only device labels
Preview your scale at approximately 320, 375, 768, and 1280 CSS pixels, then drag slowly between those widths. Look for one-word heading lines, tall wrapped titles, and small supporting text that fades into the background. Use real article headlines rather than placeholder copy.
Also test browser zoom and larger default text settings. Fluid typography does not automatically guarantee accessible resizing or reflow. Check that content remains readable and usable without unexpected horizontal scrolling. If one heading breaks badly, refine its growth rate, maximum, or available width before adding another breakpoint.
Calibrate for your actual typeface
Two fonts with identical declared sizes may occupy different widths. A broad geometric face can wrap earlier than a narrower humanist face; a tall x-height can make small type appear larger. Test your final font files and weights, not just the temporary system font used in mockups.
For sites combining several families, tune roles visually rather than applying the same ratio mechanically. An accessible line-height reference can also support more careful decisions about paragraph reading comfort.
Frequently asked questions
How is fluid typography different from a responsive type scale?
Fluid typography changes size continuously, often according to viewport width. A responsive type scale is the broader system of related roles, limits, and hierarchy. It may use fluid values, breakpoints, or both.
Should body text grow as much as headings?
Usually not. Body copy needs a dependable reading size, so a narrow range often works best. Display headings can vary more because their job is visual emphasis.
Does clamp() replace media queries?
No. clamp() handles smooth growth inside a bounded range. Media queries remain useful when a particular width calls for a genuinely different typographic treatment.
Do I need a separate modular ratio for each screen?
Not necessarily. Ratios help generate candidate sizes, but carefully selected bounds and fluid formulas are often simpler to maintain. Judge the relationships using real text.
Keep the hierarchy coherent
A strong responsive type scale is deliberately restrained. Set a readable base, define a few meaningful roles, choose sensible limits, and allow selected sizes to move between them. Test actual content in actual fonts. When headings stay expressive and paragraphs remain comfortable, scalable typography becomes a dependable system rather than a collection of device-specific fixes.