How to Make Typography Responsive

Responsive typography keeps a heading readable and appropriately prominent as the space around it changes. Fluid typography varies the size continuously within a range; breakpoint-based typography changes it at selected widths. Both approaches still need limits and a text column that suits the content. Reducing the font size on a phone is only one part of that job. A heading can fit inside its container and still feel cramped, break at an awkward point, or overwhelm the paragraph that explains it.

Consider this fictional heading: “A calmer way to manage complex projects.” It might look composed across two lines on a wide page. On a narrow screen it could become five dense lines, with “projects” stranded at the bottom. The answer is not automatically smaller type. The column may be unnecessarily narrow, the font may have wide proportions, or a desktop line break may be forcing the wrong shape.

GOV.UK changed the small text, not just the large headings

A useful counterexample to “make everything smaller on mobile” comes from GOV.UK. Its current type scale keeps the 19px body size at 19px on small screens, while an extra-large heading changes from 48px to 32px. The roles respond differently because their reading jobs differ.

In its explanation of the typography revision, the team reports community concerns about shrinking small text and the impact on people with visual impairments. The current implementation is the useful reference for the values below; the earlier article explains the motivation.

For a product page, this suggests separating two decisions that are often bundled together. A display heading may need less visual weight when the screen narrows. Instructions, eligibility conditions and body paragraphs still need comfortable reading. Scaling every role by the same multiplier can solve a headline problem by creating a body-text problem.

A fluid typography CSS rule you can test

For a display heading, an illustrative starting rule is:

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

With a default 16px root, that produces about 32px at a 390px viewport, about 43px at 768px, and 63px at 1440px. The useful property is that the text has a floor and a ceiling.

The calculation has two transitions worth checking. Below 400px of viewport width, the 32px minimum wins. Above roughly 1467px, the 64px maximum wins. Between them, adding 100px of viewport width adds 3px to the heading. That makes the rule easier to reason about: if a headline gains an awkward line around 900px, you can inspect the available column width against that growth rate instead of guessing at a different mobile size.

Treat the formula as a candidate. At an intermediate width, the heading can grow faster than its column, creating an extra line even as the screen becomes wider. Put the longest real headline next to the real image before accepting the curve. If the middle state fails, reduce the rate of growth or change the column allocation; adding manual breaks to every title creates a maintenance problem instead.

A rem contribution does not automatically make a fluid rule pass text-resizing checks. Browser zoom changes both effective viewport space and text size, and the viewport term can partially offset the increase. Test the rendered outcome with zoom and enlarged default text settings. The requirement is readable, available content, not merely the presence of a relative unit in the stylesheet.

Describe the discomfort before changing the font

When a heading feels wrong, identify what you are seeing. “Too large” is different from “too many lines.” “Too tight” could mean letters touching, lines crowded together, or the entire text block pressed against the image. Each diagnosis points to a different adjustment.

Read the heading aloud, then look at how the lines divide that phrase. A line ending after a small connecting word may interrupt the natural reading rhythm. A very short final line may look accidental. Neither is automatically a usability failure, but both can explain why an otherwise clean page feels unfinished.

Next, cover the surrounding artwork for a moment. If the heading becomes comfortable without it, the problem may be composition rather than typography alone. An image edge can make the text column feel narrower than it is. A busy illustration can compete with the same words that were clear against an empty background.

Set a role for each level of heading

A page title, a section heading, and a card heading do different work. The page title establishes the main subject. Section headings help readers navigate the argument or offer. Card headings distinguish repeated items. They should not all scale with the same intensity just because they use the same typeface.

On the project-management example, the main heading can be expressive. A section called “Keep decisions with the work” should remain noticeable without competing for first attention. A card called “Project history” needs to sit comfortably beside its description. If every level becomes oversized on desktop, the page can feel like a collection of promotional banners.

Define the relationships before choosing exact values. Decide which level should be seen first, how much text each normally contains, and whether it appears beside an image. Then test the longest realistic example at each level. A typographic system that only works with the shortest heading is a demonstration, not a dependable page rule.

Avoid using size to compensate for unclear wording. “Everything you need” can be set beautifully but still fail to identify a section. If the reader must examine every paragraph to discover what the page contains, stronger headings may require more precise language as well as better spacing.

Make the text column earn its width

A heading’s line breaks depend on the space allocated to it. Before reducing the font, inspect the container. Side padding, a grid gap, an empty column, or an unnecessarily large image can be taking space away from the words. Those choices may have been appropriate at a wider size and simply persisted too long.

For the fictional heading, compare two narrow layouts with identical typography. In one, large side margins leave the text squeezed into a slim column. In the other, the margins become more modest while remaining consistent with the rest of the page. The second can produce a calmer heading without changing its size or weight at all.

On a wide screen, the opposite problem appears. Letting a title stretch across the entire page can turn it into a long horizontal strip, weakening its relationship to the content below. A maximum width can preserve its editorial shape. Choose that width by examining actual headings rather than treating a character count as a guaranteed line length.

Remember that a font’s letters are not equally wide. A column that fits twelve narrow letters does not necessarily fit twelve wide ones. Values based on typographic units can be useful starting points, but the rendered words remain the evidence. This is especially important when a brand name or technical term must remain intact.

Choose a scaling range, not an endless growth rule

You can use a small number of size changes or a fluid scale. Either approach can work when its lower and upper limits are sensible. The important question is how the heading behaves between the views you deliberately designed.

The web.dev typography lesson explains fluid sizing and cautions against using viewport units alone for text size. Its broader point is useful here: reading depends on more than choosing a font. Keep a relative text-size component and test what happens when the reader changes zoom or text preferences.

Check the middle of the range. A heading can look good at its minimum and maximum while forming an awkward three-line block between them. Adjusting the column or the rate of growth may be more effective than introducing another abrupt size change. Keep the rule understandable enough that someone can maintain it when the copy changes.

Refine the space around and within the words

Line height: keep a phrase together

Line spacing is the distance that makes a multiline heading feel like one readable unit. Too little can make adjacent lines collide visually, particularly around tall capitals and descending letters. Too much can separate the lines so strongly that the phrase feels like several unrelated labels.

Compare the actual letter shapes, not just the numbers in a style panel. A typeface with a large lowercase height can feel crowded at a setting that works for another font. Heavy weights may make the gaps seem smaller because there is more dark material on the page. Accented characters can also expose a line box that was too tight for the original sample.

Use a heading with a mix of capitals, lowercase letters, and punctuation during review. “WORK BETTER” is a poor substitute for the mixed-case sentence that will actually appear. It hides several of the shapes that matter. If the page supports multiple languages, the heading test should eventually include those scripts as well.

Judge the space below the heading separately. Increasing line spacing to create more distance before the paragraph changes the heading internally and may produce the wrong effect. Give the heading-to-paragraph gap its own value and review whether those two elements still feel connected.

Letter spacing: preserve word shapes

Letter spacing deserves attention when a heading feels compressed even though its lines have enough room. Strong negative spacing can make a title look dramatic in a large static composition, then become uncomfortable when rendered smaller. The same setting may also look different in a lighter or heavier weight.

Start from the typeface’s normal spacing and compare small adjustments. Look at combinations with round letters, diagonal strokes, and repeated verticals. Do not judge only the first word. A change that opens “calmer” nicely may make another part of the phrase look loose.

Keep words visually coherent. Excessive positive spacing can slow recognition and turn a sentence into a sequence of isolated characters. It also increases the total width, potentially creating the very line break you were trying to remove. When the title is already long, spacing and column width need to be evaluated together.

Avoid treating uppercase and sentence-case headings identically. An uppercase eyebrow label may benefit from a little extra separation, while a long sentence-case headline often needs a quieter setting. The point is to support the role of the text. A style copied from a tiny label rarely makes a good rule for the main title.

Wrapping: avoid brittle line breaks

A deliberate line break can improve one composition, but it can also make that composition brittle. If you insert a break after “manage” in the project-management heading, the final words may work beautifully on a wide screen. At a narrower width, the first part may already wrap, producing an unexpected extra line.

Before adding manual breaks, try adjusting the width and scale. If a manual break is still important to the design, document the conditions in which it applies and check what happens outside them. Do not assume that a line break chosen for English should remain in every translation.

Avoid holding a long phrase together simply to protect a preferred shape. Preventing all wrapping can force the text outside its container or require an unreadably small size. Keep inseparable items limited to cases where splitting would genuinely harm meaning, such as a short value with its unit, and review the remaining space afterward.

When a final line looks too short, consider whether the copy itself can be edited without losing meaning. Removing an unnecessary phrase may improve both the sentence and its layout. But typography should not force deletion of a product limitation, a meaningful qualifier, or a term the reader needs to identify the offer.

Use color and weight to support the hierarchy

A large title does not need every other emphasis treatment at once. Heavy weight, tight spacing, a bright gradient, and a strong shadow can compete within a single text block. Decide which treatment carries the prominence and let the others stay restrained.

For a page with a colorful illustration, a solid dark heading may create the clearest reading order. If the design calls for a subtle gradient, check that its lighter portion remains readable against the background. A title that is clear at full size can lose contrast when reduced to a smaller display or viewed beside bright artwork.

Separate secondary information through a combination of size, weight, and placement before making it very pale. A quieter subtitle should still be easy to read. The same applies to captions and labels: making them nearly invisible does not create useful hierarchy; it removes information.

Compare the page in a quick glance and then in sustained reading. The glance should establish the main subject. The closer read should reveal supporting detail without strain. If every heading shouts equally, reducing some weights or sizes may do more than adding another accent color.

Test the font that actually loads

A design can change when its intended font becomes available, or when that font fails to load. Different letter widths may alter line breaks and push nearby content. Treat the fallback state as part of the review rather than assuming every visitor sees the same typography immediately.

In a development review, ask which font is actually rendering and whether the expected weight exists. A request for a weight that the asset does not contain can produce an unintended result. If the title looks unusually heavy or narrow, verify the asset before compensating with spacing changes.

Look for layout consequences when the text changes shape. Does the paragraph jump downward? Does a badge overlap the title? Does a fixed-height hero crop the final line? These observations are more useful than reporting only that the font “looks different,” because they identify the conditions the layout needs to accommodate.

A fallback does not need to be visually identical to the brand font, but it should preserve a usable page. Keep enough flexibility that the title can occupy a different number of lines without breaking the section. If exact brand rendering is important, it still needs to coexist with the practical reality of variable loading conditions.

Run a compact heading review

Choose three headings: the main title, a long section heading, and the longest typical card title. Review them with the surrounding content rather than in an isolated specimen. Inspect a narrow, middle, and wide view, then resize between them while watching for abrupt changes.

At each view, read the full phrase. Check whether the line breaks preserve meaning, whether the internal spacing is comfortable, and whether the heading remains distinct from the paragraph. Then increase browser zoom and repeat the essential reading task. Observe the result rather than assuming a particular sizing technique guarantees good behavior.

Use a longer alternate heading as a maintenance test. For the fictional page, change the title to “A calmer way to manage projects across distributed teams.” You are not committing to that copy. You are finding out whether the component can support a reasonable editorial change without custom repairs.

Document the decision in ordinary language: “The heading may use an additional line on narrow screens; keep the sentence intact and let the section grow.” That is more durable than preserving one screenshot’s exact line count at every size. It tells the next editor what the design values and what may change.

Make the revision specific in OpenDesign

OpenDesign’s HTML preview and desktop, tablet, and mobile views can help compare the same heading across layouts. For a focused revision, identify the heading and the discomfort you observed. If the issue is only spacing or a supported style property, manual editing may be enough; a structural request can be described in chat with the intended constraints.

For example, ask to keep the wording and typeface, relax the cramped letter spacing, and allow the heading to occupy another line on the narrow view. That keeps the revision about typography. A vague request to make the entire hero more premium could alter the illustration, colors, and copy while leaving the original reading problem unresolved.

After the change, return to all three headings in the review set. A shared style may affect more than the title you were looking at. Compare the relevant views and confirm that the supporting text still has the intended role.