Body text is the key component in communicating the main bulk of a message or story, and it’s probably the most important element on a website, even if people sometimes read just the headlines.
Why would we limit the effectiveness of body text by minimizing its size to a browser-default that’s now over 20 years old, even on large displays?
What’s Too Small?
The majority of websites are still anywhere in the range of 15–18px. We’re starting to see some sites adopt larger body text at around 20px or even greater on smaller desktop displays, but not enough in my opinion.*
*I’ll be referring to font sizes in px (pixels) instead of pt (point) throughout this article so it’s easily relatable to the framework of the web and digital space.
Now, I’m not saying that small typography is bad. An 18px font is perfectly legible from the right distance. Smaller type is extremely useful in certain situations like on captions, cards and other UI elements, but there’s good reason to increase it a few more notches for body text.
A Little History
Through the typewriter era we ascertained that 12pt was about the optimum size for legibility in print despite the fact that books, magazines and newspapers go smaller to reduce paper quantity costs.
The point unit originates from the 1600s and referred to the height of the metal body on which characters were cast. In the digital space of today however, point is pretty complicated and doesn’t translate reliably.
In the 1990s, digital platforms established a conversion from point to pixels, but of course we had low-resolution 14-inch screens to contend with. Apple’s Mac OS went for a straight conversion—12pt equaled 12px at 72 ppi. Microsoft however, determined that 12pt equaled 16px at 96 ppi, which is how IE assumed a default base size of 16px.
Throughout the late 1990s and early 2000s, websites had body text anywhere between 9–14px. For a while, designers thought 16px was too large because they were used to the 12pt (12px) default on their Macs.
Flash forward to 2007 and believe it or not, 16px was still considered huge for body text, but by 2011 the mainstream influx of responsive development and larger resolution displays caused designers to consider 16px as a minimum, and we’ve been toiling close to that mark ever since.
Why Body Text Isn’t Bigger
To appreciate the benefits of bigger body text we first have to consider the reasons why designers (and developers) opt to keep it small. More often than not, it’s because of expectations; it’s what we’re used to and if almost everyone is doing it a certain way, then I guess we should.
We Design Mobile-First
With a mobile-first mindset, we design our body text to be optimized for mobile devices from the outset. This can mean anywhere between 15–18px. But when designing a responsive website, we tend to forget that font size not only affects people using handhelds, but people using larger devices such as laptops and desktop computers, and yes, smart TVs.
This can lead to a one-size-fits-all mentality where we don’t bother scaling up or consider what happens beyond small desktop resolutions.
We Associate Big With “Clunky”
There is a misperception among some designers (and stakeholders) that big body text feels “clunky”, or childish. That association isn’t helped when children’s story books have oversized typography.
But in actuality it’s not the size that causes that perception, it’s the style of the typeface; its design nuances, kerning, letter spacing, line height, and other attributes that affect our visual interpretation. Some typefaces just don’t look quite as appealing when big.
Zoom Is An Option
Let’s not forget that zoom is a great feature to have in the browser—it’s mandatory in fact. It allows better accessibility for the hard of sight, but we shouldn’t rely on it. Not all users will be aware of this feature and how to use it, and if they do, zooming can break a layout in unexpected ways unless developed with good responsive practices.
Legibility Is Confused With Readability
We’re focusing on legibility instead of readability. There’s a difference. If text is legible, it doesn’t mean it’s readable. With legibility, text can be interpreted, but readability takes it a step further and incorporates the emotional effect of design with the amount of effort it takes to read. This is why smaller body text sizes thought as “legible” are considered sufficient.
We Want To Avoid Scrolling
Unfortunately, it’s a common mistake to purposefully design a website in a way to avoid scrolling. To the detriment of design, body text size is reduced to either reduce scrolling, or condense the layout in order to fit other elements in and around the copy.
Scrolling is a natural, established pattern on the web—people expect to have to scroll. Even when it isn’t possible, people will attempt scrolling to see if a page offers more beyond what’s initially in the viewport. Readability is more important than the amount of scrolling required—good content won’t prevent users from scrolling.
The Way Frameworks Are Set Up
Frameworks can save valuable time and enforce a reliable system for collaboration, especially when it comes to typography. They can still allow customization, but sizes are often just left to the default which can lead to one-size-fits-all.
Bootstrap is one of the most popular frameworks for creating responsive web projects, and believe it or not, has a global default of 14px on body text for its current stable version 3—early releases of version 4 show it has risen to 16px. Now, Bootstrap is a mobile-first-designed framework, but they’re leaving it up to designers and developers to determine what happens beyond that, if at all. Leaving sizes at default, we have mobile sizes on even the largest screens.
Reasons To Design With Bigger Body Text
Bigger typography adds many enhancements to the experience of a website. Put simply, it’s more effective. Even when comparing just 18px to 20px, there can be huge gains that enhance both the design and user experience.
1. It Works Better From Distance
We can make assumptions about how far a user is from a screen, whether that’s with a phone, tablet, or desktop computer, but it’s become more common to browse the web on ultra high-definition displays and smart TVs. A user could be up to anywhere between 3 and 16 ft away.
The truth is, the larger the screen, the more unpredictable the distance. This is why TV manufacturers provide an optimum viewing distance range depending on the size of the screen. For obvious reasons, a small screen would not work well at long-range due to the limitations in detail recognition with the human visual system. There is a threshold beyond which critical detail cannot be distinguished.
This also applies in VR, where long bodies of text would be a bad idea for UX, but the same laws of perceived distance apply. Designing typography in VR is arguably harder due to definition and three-dimensional factors.
With handheld devices and laptops, they tend to be no more than an arm’s length, but with large desktop displays we must assume it could be more than that. The user could be leaned back in a chair while the display is positioned at the back of a deep desk. With larger displays, users would prefer not to lean their faces close to them in order to read the copy.
For users at an increased distance, a better experience will come from enlarging elements and utilizing more of the available screen space, especially on bigger displays.
2. It Improves Readability
On average, users will read only about 28% of the words on a web page, and usually scan as opposed to read due to the immense amount of information available on the web, and limited time available. Intensive reading is rare and requires more focus.
A larger typeface has been proven to enhance readability for all types of users, regardless of one’s age or quality of eyesight. While it may seem obvious that older users require bigger text due to eyesight deterioration, younger users are more prone to scanning and impatience.
"A larger typeface has been proven to enhance readability for all types of users, regardless of one’s age..."
Bigger text inspires us to use less words, and encourages lower content density. Since there is less space for superfluous characters, we can focus on getting to the point.
By improving readability, not just legibility, we will increase the likelihood that users will read or scan the content we present them with. Bigger text will require less focus.
3. It Improves Usability
Our ability to handle large amounts of information is limited by our brain’s processing power. Our performance suffers if it takes longer to understand information. We can get overwhelmed and miss important details.
When we have larger body text in our compositions, it dominates more of the screen. This will require us to design a layout that allows the copy more room to breathe. It also could mean less copy is observable at any one time than before. In short, it could minimize clutter, reduce extraneous cognitive load, and result in improved usability.
4. It Increases Visual Impact
Larger font sizes on headlines can elicit a much stronger emotional connection, and the same applies to body text. Words can appear more prominent. Messages become louder, confident, and have more conviction.
Another visual impact is more subtle. Only with bigger typography can you bring out all the design nuances of a typeface that are not apparent to the human eye at smaller scale. It becomes more apparent what separates a well crafted typeface from a poor one.
Who’s Going Bigger?
The following is a list of sites that have adopted bigger body text even at small desktop or laptop resolutions such as 1440 x 900. They go from 20px all the way up to 58px!
The Washington Post — 20px
Fortune Magazine — 20px
Zeit Online — 20px
CSS-Tricks — 20px
Edenspiekermann— 20px
The Great Discontent — 20px
Medium—21px
Forbes—21px
Ways We Work — 21px
Jeffrey Zeldman—24px
Misplaced—24px
Trent Walton—25px
Commando Group—26px
Ediciones Daga—34px
Eli Rousso—36px
Sang Han—48px
Van Schneider—58px
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.
"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.
This article was originally published on Christian's website, and Medium Page.
