Optimizing Bigger Body Text

When designing body text for websites, it’s important to realize there is no one-size-fits-all, because it all depends on factors such as the typeface design, the background/foreground color, and viewport dimensions.

1. Design The Body Text First

Above all, when designing a web page we should design the body text first, usually before anything else in the layout. It’s the most common element and its appearance will have an evident effect on the rest of the composition. This is particularly true with bigger body text since it takes up more space.

2. Choose A Typeface That Scales Well

As a general principal in typography, it’s usually better to stick with a serif or sans-serif font for body text. However, not every font works well when scaled up. Some typefaces can look crisp and sharp at smaller sizes but feel awkward and poorly designed when big. System fonts, like Georgia and Arial for example, feel clunkier enlarged because they were designed with limited details in order to be legible at 14px.

Text typefaces are purposefully designed and optimized to work well between 6–14 points (8–18px), but because of their increased inter-character spacing, heavier contrasting and lowercase x-height, might seem unappealing at 24-26px. On the other hand, it’s possible for some fonts to maintain their personality and integrity at any scale, and just require tracking adjustment to compensate for any spacing issues.

With serif fonts, it’s important to examine their characteristics at larger sizes; especially the hairlines, serifs, and sharp corners. A larger font size allows the possibility of incorporating a serif font with more details—higher-contrasting strokes and reduced x-height, but you run the risk of reducing legibility when it needs to scale down for smaller screens. Some examples of serif fonts that work well for large body text include Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif, and Tisa.

Sans-serif fonts, despite the fact they’re less popular than serif for body text, can be an effective choice when it comes to large body text. They generally don’t suffer from the same issues with enlargement as serifs due to their low contrast, consistent stroke thickness, and their scarcity of details or flourishes. They’re able to maintain their form. Some examples of sans-serif fonts that work well for large body text include Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto, and Suisse Int’l.

It might also be interesting to note that more recently designed typefaces are better optimized for the responsive web than ones originally designed for print—some modern serifs can perform exceptionally well on screen and at different scales. With responsive websites it becomes a question of balance — a typeface that works well both large and small.

Overall, it’s best to give our body text a test-run at larger sizes (and small) to scrutinize the details before committing to a typeface. Tools such as Typecast can allow us to preview most fonts with lengthy bodies of content, and make easy adjustments and comparisons.

3. Size Optically From A Minimum Of 20px

Since there are so many different characteristics between typefaces, one size for a particular design will have a perceptually different scale to a different typeface at the same size.

This is why we should just let our eyes decide, and not base it on a numerical value that sounds good or worked well for a different typeface or on a different project. Each time a typeface is changed it needs to be re-optically adjusted accordingly.

The perceived size of a typeface can also vary depending on the color of the foreground and background, so it’s also better to optically select a font size according to near-finalized colors, or in different color scenarios if necessary.

While the minimum font size for body text has been acknowledged as 16px for a while, I believe a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices. Even then, it would be better to start at 18px depending on the typeface and increase it responsively for larger screens.

4. Optimize The Letter Spacing

Enlarged body text may require us to fine-tune the letter spacing to attain better readability and aesthetics. Different forms of typeface require different adjustments. A text typeface, for example, may require a negative value when sizing up due to its extra inter-character spacing.

Any change to tracking on body text should be minimal and used with caution as too much adjustment can potentially make it worse, not better. Not every typeface will need adjustment, and it’s really down to the eye again to optically adjust the letter-spacing and font size together.

Kerning is entirely separate from letter spacing and concerns the space between two specific characters. Most modern and carefully developed web fonts contain kerning tables, and there are ways to optimize typography in development to encourage the use of it where support is available.

5. Optimize The Line Length And Line Height

According to The Elements of Typographic Style, Robert Bringhurst states that the optimal line length, or number of characters per line (CPL) in typography is around 55 to 75. A long line of text causes fatigue because readers will have to scan further from side to side, searching for the beginning of the next line. If a line is too short, there are words or phrases that are broken up which are meant to be a unit.

This rule of thinking applies to body text at any scale, because line length is always relative to the size of the typeface.

In Grid Systems, Josef Müller-Brockmann stated that the width of a column must be proportioned to the size of the type. So, as we increase the font size of our body text, we need to increase the width of the container or column that frames it in order to maintain the optimal line length. The point is, our typography should dictate the width of our text columns, not vice versa.

If CPL is important to bigger body text, so is line height. It’s all about proportion and balance to promote better readability. The line height should also be relative to the font size as it scales up for larger displays. There are various ways to achieve the optimal line height ratio which we can then adapt based on our desired font style.

Final Note

This is not about having the biggest body text, because biggest isn’t best. It’s about optimizing for the best reading experience you can possibly give your users, and smaller body text doesn’t fulfill that potential.