{"id":8655,"date":"2017-04-25T15:06:37","date_gmt":"2017-04-25T14:06:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=8655"},"modified":"2024-03-04T21:41:49","modified_gmt":"2024-03-04T21:41:49","slug":"body-text-small","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/body-text-small\/","title":{"rendered":"Your Body Text Is Too\u00a0Small"},"content":{"rendered":"

Body text is the key component in communicating the main bulk of a message or story, and it\u2019s probably the most important element on a website, even if people sometimes read just the headlines<\/a>.<\/p>\n

Why would we limit the effectiveness of body text by minimizing its size to a browser-default that\u2019s now over 20 years old, even on large displays?<\/span><\/p>\n

What\u2019s Too\u00a0Small?<\/h1>\n

The majority of websites are still anywhere in the range of 15\u201318px<\/strong>. We\u2019re starting to see some<\/em> sites adopt larger body text at around 20px<\/strong> or even greater on smaller desktop displays, but not enough in my opinion.*<\/p>\n

*I\u2019ll be referring to font sizes in px (pixels) instead of pt (point) throughout this article so it\u2019s easily relatable to the framework of the web and digital space.<\/em><\/p>\n

Now, I\u2019m not saying that small typography is bad. An 18px<\/strong> font is perfectly legible from the right distance. Smaller type is extremely useful in certain situations like on captions, cards and other UI elements<\/a>, but there\u2019s good reason to increase it a few more notches for body text.<\/p>\n

A Little\u00a0History<\/h2>\n

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.<\/p>\n

\"1-8tgcugyjplvi_wex_me5aa\"<\/a><\/p>\n

The point<\/a> 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<\/a> and doesn\u2019t translate reliably.<\/p>\n

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\u2019s Mac OS<\/a> went for a straight conversion\u201412pt equaled 12px<\/strong> at 72 ppi<\/a>. Microsoft<\/a> however, determined that 12pt equaled 16px<\/strong> at 96 ppi, which is how IE<\/a> assumed a default base size <\/a>of 16px<\/strong>.<\/p>\n

Throughout the late 1990s and early 2000s, websites had body text anywhere between 9\u201314px<\/strong>. For a while, designers thought 16px was too large<\/a> because they were used to the 12pt (12px<\/strong>) default on their Macs.<\/p>\n

Flash forward to 2007 and believe it or not, 16px<\/strong> was still considered huge<\/a> for body text, but by 2011 the mainstream influx of responsive development and larger resolution displays caused designers to consider 16px as a minimum<\/a>, and we\u2019ve been toiling close to that mark ever since.<\/p>\n

Why Body Text Isn\u2019t\u00a0Bigger<\/h1>\n

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\u2019s because of expectations; it\u2019s what we\u2019re used to and if almost everyone is doing it a certain way, then I guess we should.<\/p>\n

We Design Mobile-First<\/h2>\n

\"1-eswbiz3rev4yiedhtrtrzg\"<\/a><\/p>\n

With a mobile-first<\/a> mindset, we design our body text to be optimized for mobile devices from the outset. This can mean anywhere between 15\u201318px<\/strong>. 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<\/a>, and yes, smart TVs.<\/p>\n

This can lead to a one-size-fits-all mentality where we don\u2019t bother scaling up or consider what happens beyond small desktop resolutions.<\/p>\n

We Associate Big With\u00a0\u201cClunky\u201d<\/h2>\n

\"1-zcoazv6kdggea1p3ddnvzq\"<\/a><\/p>\n

There is a misperception among some designers (and stakeholders) that big body text feels \u201cclunky\u201d, or childish. That association isn\u2019t helped when children\u2019s story books have oversized typography.<\/p>\n

But in actuality it\u2019s not the size that causes that perception, it\u2019s 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\u2019t look quite as appealing when big.<\/p>\n

Zoom Is An\u00a0Option<\/h2>\n

\"1-yt95dzkcz0bzxilthsahsq\"<\/a><\/p>\n

Let\u2019s not forget that zoom<\/a> is a great feature to have in the browser\u2014it\u2019s mandatory in fact. It allows better accessibility for the hard of sight, but we shouldn\u2019t 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<\/a> in unexpected ways unless developed with good responsive practices.<\/p>\n

Legibility Is Confused With Readability<\/h2>\n

\"1-9fwk0b0zuohk2mvdt-lbnw\"<\/a><\/p>\n

We\u2019re focusing on legibility<\/em> instead of readability<\/em>. There\u2019s a difference. If text is legible,<\/em> it doesn\u2019t mean it\u2019s readable<\/em>. With legibility, text can be interpreted, but readability takes it a step further and incorporates the emotional effect of design<\/a> with the amount of effort it takes to read. This is why smaller body text sizes thought as \u201clegible\u201d are considered sufficient.<\/p>\n

We Want To Avoid Scrolling<\/h2>\n

\"1-uwww7ec1c3vclqql8swpa\"<\/a><\/p>\n

Unfortunately, it\u2019s a common mistake to purposefully design a website in a way to avoid scrolling<\/a>. 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.<\/p>\n

Scrolling is a natural, established pattern on the web\u2014people expect to have to scroll. Even when it isn\u2019t possible, people will attempt scrolling to see if a page offers more beyond what\u2019s initially in the viewport. Readability is more important than the amount of scrolling required\u2014good content won\u2019t prevent users from scrolling.<\/p>\n

The Way Frameworks Are Set\u00a0Up<\/h2>\n

\"1-xwp4pcaz637xlhfzd4y4a\"<\/a><\/p>\n

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.<\/p>\n

Bootstrap<\/a> is one of the most popular frameworks for creating responsive web projects, and believe it or not, has a global default of 14px<\/strong><\/a> on body text for its current stable version 3\u2014early releases of version 4 show it has risen to 16px<\/strong>. Now, Bootstrap is a mobile-first-designed framework, but they\u2019re 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.<\/p>\n

Reasons To Design With Bigger Body\u00a0Text<\/h1>\n

Bigger typography adds many enhancements to the experience of a website. Put simply, it\u2019s more effective<\/em>. Even when comparing just 18px <\/strong>to 20px<\/strong>, there can be huge gains that enhance both the design and user experience.<\/p>\n

1. It Works Better From\u00a0Distance<\/h2>\n

\"1-zrfhd9xvxtoudfzhhxx_zw\"<\/a><\/p>\n

We can make assumptions about how far a user is from a screen, whether that\u2019s with a phone, tablet, or desktop computer, but it\u2019s become more common<\/a> 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.<\/p>\n

The truth is, the larger the screen, the more unpredictable the distance. This is why TV manufacturers provide an optimum viewing distance<\/a> range <\/em>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.<\/p>\n

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<\/a> is arguably harder due to definition and three-dimensional factors.<\/p>\n

With handheld devices and laptops, they tend to be no more than an arm\u2019s 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.<\/p>\n

For users at an increased distance, a better experience will come from enlarging elements and utilizing more of the available screen space<\/a>, especially on bigger displays.<\/p>\n

2. It Improves Readability<\/h2>\n

\"1-m3k27kyj6fugnhhabfgsiq\"<\/a><\/p>\n

On average, users will read only about 28%<\/a> of the words on a web page, and usually scan as opposed to read<\/a> due to the immense amount of information available on the web, and limited time available. Intensive reading is rare and requires more focus.<\/p>\n

A larger typeface has been proven to enhance readability for all types of users, regardless of one\u2019s age or quality of eyesight. While it may seem obvious that older users<\/a> require bigger text due to eyesight deterioration<\/a>, younger users<\/a> are more prone to scanning and impatience.<\/p>\n

<\/div>
<\/svg><\/div>

\"A larger typeface has been proven to enhance readability for all types of users, regardless of one\u2019s age...\"<\/p><\/span><\/blockquote>\n

Bigger text inspires us to use less words, and encourages lower content density<\/a>. Since there is less space for superfluous characters, we can focus on getting to the point.<\/p>\n

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.<\/p>\n

3. It Improves Usability<\/h2>\n

\"1-aqfnhiptqz3jvjhpxv3gug\"<\/a><\/p>\n

Our ability to handle large amounts of information is limited by our brain\u2019s processing power. Our performance suffers<\/a> if it takes longer to understand information. We can get overwhelmed and miss important details.<\/p>\n

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.<\/p>\n

4. It Increases Visual\u00a0Impact<\/h2>\n

\"1-6-o-4fducwrhun7y1toq5g\"<\/a><\/p>\n

Larger font sizes on headlines can elicit a much stronger emotional connection<\/a>, and the same applies to body text. Words can appear more prominent. Messages become louder, confident, and have more conviction.<\/p>\n

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.<\/p>\n

Who\u2019s Going\u00a0Bigger?<\/h1>\n

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<\/strong> all the way up to 58px<\/strong>!<\/p>\n

\"The<\/a>

The Washington Post<\/a> \u2014 20px<\/p><\/div>\n

\"Fortune<\/a>

Fortune Magazine<\/a> \u2014 20px<\/p><\/div>\n

\"Zeit<\/a>

Zeit Online<\/a> \u2014 20px<\/p><\/div>\n

\"CSS-Tricks<\/a>

CSS-Tricks<\/a> \u2014 20px<\/p><\/div>\n

\"Edenspiekermann\u2014<\/a>

Edenspiekermann<\/a>\u2014 20px<\/p><\/div>\n

\"The<\/a>

The Great Discontent<\/a>\u200a\u2014\u200a20px<\/p><\/div>\n

\"Medium\u201421px\"<\/a>

Medium<\/a>\u201421px<\/p><\/div>\n

\"Forbes\u201421px\"<\/a>

Forbes<\/a>\u201421px<\/p><\/div>\n

\"Ways<\/a>

Ways We Work<\/a>\u200a\u2014\u200a21px<\/p><\/div>\n

\"Jeffrey<\/a>

Jeffrey Zeldman<\/a>\u201424px<\/p><\/div>\n

\"Alessandro<\/a>

Alessandro Scarpellini<\/a>\u201424px<\/p><\/div>\n

\"Misplaced\u201424px\"<\/a>

Misplaced<\/a>\u201424px<\/p><\/div>\n

\"Trent<\/a>

Trent Walton<\/a>\u201425px<\/p><\/div>\n

\"Commando<\/a>

Commando Group<\/a>\u201426px<\/p><\/div>\n

\"Ediciones<\/a>

Ediciones Daga<\/a>\u201434px<\/p><\/div>\n

\"Eli<\/a>

Eli Rousso<\/a>\u201436px<\/p><\/div>\n

\"Sang<\/a>

Sang Han<\/a>\u201448px<\/p><\/div>\n

\"Van<\/a>

Van Schneider<\/a>\u201458px<\/p><\/div>\n

Optimizing Bigger Body\u00a0Text<\/h1>\n

When designing body text for websites, it\u2019s 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.<\/p>\n

1. Design The Body Text\u00a0First<\/h2>\n

\"1-sewskbs6necx0n62catozw\"<\/a><\/p>\n

Above all, when designing a web page we should design the body text first<\/a>, usually before anything else in the layout. It\u2019s 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.<\/p>\n

2. Choose A Typeface That Scales\u00a0Well<\/h2>\n

\"1-1bczlmlgmaba4nm9k2dcgw\"<\/a><\/p>\n

As a general principal in typography, it\u2019s usually better to stick with a serif or sans-serif font<\/a> 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<\/strong>.<\/p>\n

Text typefaces<\/a> are purposefully designed and optimized to work well between 6\u201314 points (8\u201318px<\/strong>), but because of their increased inter-character spacing, heavier contrasting and lowercase x-height, might seem unappealing at 24-26px<\/strong>. On the other hand, it\u2019s possible for some fonts to maintain their personality and integrity at any scale, and just require tracking adjustment to compensate for any spacing issues.<\/p>\n

With serif fonts, it\u2019s important to examine their characteristics<\/a> 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\u2014higher-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<\/strong><\/a>, <\/strong>Franziska<\/strong><\/a>, <\/strong>Leitura News<\/strong><\/a>, <\/strong>Merriweather<\/strong><\/a>, <\/strong>Miller<\/strong><\/a>, <\/strong>PT Serif<\/strong><\/a>, <\/strong>and Tisa<\/strong><\/a>.<\/p>\n

Sans-serif fonts, despite the fact they\u2019re less popular<\/a> than serif for body text, can be an effective choice when it comes to large<\/em> body text. They generally don\u2019t 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\u2019re able to maintain their form. Some examples of sans-serif fonts that work well for large body text include Atlas Grotesk<\/strong><\/a>, <\/strong>Futura<\/strong><\/a>, <\/strong>Lato<\/strong><\/a>, <\/strong>Maison Neue<\/strong><\/a>, <\/strong>Real Text<\/strong><\/a>, <\/strong>Roboto<\/strong><\/a>, <\/strong>and Suisse Int\u2019l<\/strong><\/a>.<\/p>\n

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

Overall, it\u2019s 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<\/a> can allow us to preview most fonts with lengthy bodies of content, and make easy adjustments and comparisons.<\/p>\n

3. Size Optically From A Minimum Of\u00a020px<\/h2>\n

\"1-owr53typxveplysgrjva0g\"<\/a><\/p>\n

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.<\/p>\n

This is why we should just let our eyes decide<\/a>, and not base it on a numerical value that sounds<\/em> 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.<\/p>\n

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

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

4. Optimize The Letter\u00a0Spacing<\/h2>\n

\"1-np2-lhtyqd4l2keoofzwfa\"<\/a><\/p>\n

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<\/em> value when sizing up due to its extra inter-character spacing.<\/p>\n

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\u2019s really down to the eye again to optically adjust the letter-spacing and font size together.<\/p>\n

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<\/a>, and there are ways to optimize<\/a> typography in development to encourage the use of it where support is available.<\/p>\n

5. Optimize The Line Length And Line\u00a0Height<\/h2>\n

\"1-1ynneq-c2ailzsyragjeiq\"<\/a><\/p>\n

According to The Elements of Typographic Style<\/a>, 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.<\/p>\n

This rule of thinking applies to body text at any scale, because line length is always relative to the size of the typeface.<\/p>\n

In Grid Systems<\/a>, Josef M\u00fcller-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<\/em> 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.<\/p>\n

<\/div>
<\/svg><\/div>

\"The point is, our typography should dictate the width of our text columns, not vice versa.\"<\/p><\/span><\/blockquote>\n

If CPL is important to bigger body text, so is line height. It\u2019s 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<\/a> ratio which we can then adapt based on our desired font style.<\/p>\n

Final Note<\/h2>\n

This is not about having the biggest body text, because biggest isn\u2019t best. It\u2019s about optimizing for the best reading experience<\/em> you can possibly give your users, and smaller body text doesn\u2019t fulfill that potential.<\/p>\n

Follow me on Twitter.<\/a><\/p>\n

This article was originally published on Christian's website<\/a>, and Medium Page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Body text is the key component in communicating the main bulk of a message or story, and it\u2019s 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\u2019s now over 20 years old, even on large displays?… Read More ￫<\/a><\/p>\n","protected":false},"author":131,"featured_media":8657,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-8655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n