Should body text be sized in pixels, rems, or something fluid?

Published Read 3 min read

On this page

Size body text in a relative unit, rems being the standard choice, because relative units respect the user’s own text-size preference while fixed pixels quietly override it. That is the deciding factor: rems scale from the browser’s root font size, so when someone has bumped their default text up for comfort or necessity, your body text grows with it, whereas a pixel value ignores that setting and locks the text at whatever you typed. Fluid sizing, where the text scales with the viewport width, is a separate tool that solves a different problem and is worth using in specific places, but for the running body copy people actually read, relative units should be the default because accessibility favors them.

The tradeoff underneath is user control against precise control. Pixels give you exactly the value you specify on every screen, which feels reassuring during design because what you set is what renders, and that appeal is exactly why the pixel habit persists. But that precision comes at the user’s expense: a reader who has set a larger default text size, often because they need it, gets none of it, since the pixel value is absolute and the preference has nowhere to apply. Rems hand part of that control back. You still set the proportions of your scale, but the baseline they multiply against is the user’s, so your hierarchy is preserved while the overall size honors the person reading. For body text, where readability is the whole point, that is the right side of the tradeoff.

Concretely, define your scale in rems against the root. If the root is the browser default, then 1rem is the default body size, a heading might be 1.5rem, a caption 0.875rem, and the relationships hold no matter what root the user has chosen. Now a reader who has set their browser to a larger default text size opens the page and every size scales up proportionally, the body becomes comfortably larger and the headings stay correctly bigger than it, because they were all expressed relative to that root. Had you written those same sizes in pixels, the reader’s setting would have been silently discarded and the text would have stayed small. The accessibility win is not theoretical; it is the difference between a preference working and a preference being ignored.

The point worth naming is that fluid sizing earns its place too, just not as the default for reading text. A hero headline that should feel large on a wide monitor and still fit a phone is a good candidate for fluid scaling, and modern CSS gives you clamp() to do it safely, setting a minimum, a preferred fluid value, and a maximum so the size scales with the viewport but never collapses too small or balloons too large. The mistake is making running body copy purely viewport-driven, since that ties reading size to window width rather than to the reader’s need and can produce uncomfortable extremes. Reserve fluid for display type and clamp it; keep body on a relative unit.

So default body text to rems so user text-size settings still apply, build your whole type scale as relative multiples of the root, and treat pixels as the exception rather than the rule. Where you want type to respond to screen width, use a clamped fluid value with sensible minimum and maximum bounds for headings and display, and leave the body copy on a relative unit so the people who depend on their own settings keep them.

Related posts:

  1. Why can a color look balanced in a small dose but overwhelming across a big area? Area amplifies color, so the same hue that reads as a crisp accent on a small element turns loud and fatiguing once it fills a large surface. The color did......
  2. When should an action be undoable instead of guarded by a confirmation? Reach for undo whenever the action can be reversed and you care about keeping the flow fast, and save confirmation for the truly irreversible or dangerous. The deciding question is......
  3. How much can you reorder content between mobile and desktop before it confuses returning users? You can reorder lightly for priority, but not so heavily that someone who learned the desktop layout can no longer find things on mobile. That is the line. Nudging a......
  4. When does adding a second accent color help vs dilute the first? A second accent helps when it owns a distinct, consistent job the first accent does not, and it dilutes when it competes for the same attention. The whole question turns......
  5. What breaks when every element on a page competes for attention? When every element shouts, the page goes silent, because emphasis is relative and relative emphasis cancels out. The thing that breaks is hierarchy itself, and with it the eye's path......
  6. When does breadcrumb navigation actually help vs add clutter? Breadcrumbs help on deep, hierarchical sites where users need to see and climb the path they came down, and they add clutter on flat sites where there is no meaningful......
  7. How do you decide what earns a spot in the primary nav vs the footer? The primary nav holds the few destinations most users need to reach their goals, and the footer holds the secondary, legal, and reference links people seek out deliberately, so the......
  8. How do you balance a heavy image against light text without one swallowing the other? You balance a dominant image against text by giving the text its own weight, through scale, contrast, space, or a containing element, so the two share the composition instead of......
  9. Why does a “clever” navigation pattern usually cost more than it gains? A clever navigation pattern usually costs more than it gains because navigation runs on learned conventions, so anything unconventional forces users to spend attention learning the mechanism before they can......
  10. How do you make a disabled button’s reason clear instead of mysterious? You make a disabled button's reason clear by showing the blocker rather than letting the user guess it: explain what is missing through nearby text, a tooltip on the disabled......
  11. How do you surface a submit error without making the user hunt for it? You surface a submit error so it cannot be missed by doing three things together: summarize the problems at the top of the form, move keyboard focus to that summary......
  12. How do you design a CTA that stands out without screaming? A call to action stands out through contrast, isolation, and placement in the visual flow, not through sheer size or loud color. The work is to make it the unmistakable......
  13. When is a full-width section right vs a contained, centered one? Choose full width when the content is meant to envelop the viewer and a contained, centered width when the content is meant to be read. That single distinction settles most......

Leave a comment

Your email address will not be published. Required fields are marked *