Posted on by & filed under Fire-and-Forget.

QUICK WIN

To make sure larger blocks of text are readable on the web and across all devices you need to go with a fairly large (16px will do) base font size, 1.5em line height (proven to increase readability), 1.125em paragraph margin-bottom (will make the text easier to scan). Even quicker win is to copy-paste this into your main CSS file, right after the CSS reset:
p {font-size: 16px;line-height: 1.5em;margin-bottom: 1.125em;}

WHAT NEEDS TO BE SOLVED?

In the previous post we have seen that the font family plays a major role in legibility and readability. Let’s delve into the depths of the readability, investigating font size and paragraph rhythm.

FOR FONT’S SAKE

Do you recall the glory days of FFF fonts? “Fonts for Flash” stood for pixel perfect fonts, mostly used in full flash websites, that where perfect if set to 8px font size (it was not even their real size, some of them, like FFF Minute had only 5px height).
fff-fonts-are-evil
When FFF fonts where the blight of UX, the base font size of 12px used to be the standard of the web. That was ok(ish) in the era of 800×600 or lower resolution CRT monitors. Nowadays we are surrounded by full HD monitors. Fortunately today’s web has moved towards the 14px scale. While that might seem enough, I’m a huge evangelist of the 16px font size for body text.

16PX BASE FONT SIZE FOR THE WIN

Going way above 12px for the size of paragraph texts will increase the ease of distinguishing glyphs (representations of a character), it will make reading significantly slower, and scanning the whole text almost is impossible in case of most monitors.

I have created a reading experience test. It is based comparing 8 different font sizes (6,8,10,14,16,18,20,22) to the same text rendered in 12px size. The 12px size was used as a standard unit (control case), with the predefined score of 3. The questions where based on that font size, and responders could give the score of 1 of definitely worse, 2 of slightly worse, 4 slightly better, and 5 definitely better. The score of 3 could not be given by respondents, to make sure they pick a side, instead of going with “just about the same” as answer. The test subjects used 1920×1080px screen resolution, 27” monitor and 100% zoom in Chrome browser, Win 8.1. I assume that significantly different screen resolutions, monitor sizes, and browser zoom would change the results, but then again with responsive design this can be a starting point. A larger experiment could be made to decide this.
reading-experience

To the moment no statistically representative research was made. The sample of the graph above was not weighted, not randomly sampled and contained only Romanian users. The victory of the 16px font size is not definite, but good as a starting point for most purposes. Not coincidentally that is the size I would go with in case of most website. It is interesting, that while going above the 16px size the reading experience does not decrease as fast, as it does in case of going below 16px. Then again, a statistically representative test needs to be conducted to prove that.

Measure everything else in em

After setting a base font size, it makes sense to create a typographical rhythm based on that font size. Moreover it makes changing font size quite easy. Why change from 16px? Maybe because full HD monitors became obsolete, or possibly because your client thinks that 16px font size is too big. If you calculated everything manually, you would need to change each and every value in the CSS. Fortunately we don’t need to specify sizes in px any more, we can and should do it em.

An em is a unit in typography and CSS, equal to the currently specified point size. For example, one em in a 16px font is 16 pixels wide. Note that actual letters in a 16px font will not be 16px wide. Traditionally em was equal to the width of the capital M in the given font, but nowadays this is not the case. There are two UTF-8 characters that will have a width always equal to 1em, those are the em space or   (   ) and the em dash or — (—).

Long story short: we will measure everything besides the base font size in em, thus writing flexible css code for out sites, and easily create typographical rhythm.

line-height

The line height is the distance between lines of text (Thank you, Captain Obvious!). It basically controls the vertical white space inside a given paragraph.

By default browsers will have a line-height between 1-1.2 em, but most CSS resets and CSS frameworks will set this to 1em. A notable exception is Bootstrap, where a line-height of 1.428 is used. With the 14px base font size Bootstrap uses, this gives a 20px calculated line-height. With @font-size-base LESS variable set to 16px, the calculated line-height will be 22.84px.
This is a step in the right direction because it will make the text less cluttered (removes the intimidating wall of text effect) and makes the entire document easier to scan.

Golden ratio enthusiasts would use 1.618 line height. In case of 16px base font size, this would be 25.88px calculated line height. I would go with the time tested classic formula of 1.5em. This will give 24px calculated line height, while keeping things simple on the back end, and readable on the front end.

Please note, that all three of the above line height numbers are good choices. I would avoid anything above 1.8, and below 1.3, because that can cause clutter when the descenders (downward strokes) of some letters (p, y, j, q, etc) reach the ascenders (upward strokes) of other letters (t, f, k, b, etc.).
line-height
I have included all major line-height values used in web typography to the picture above, so you are free to pick your favorite. But if you want a quick win, go with 1.5.

Margin after paragraphs

The function of a paragraph is not only to divide and organize the text, but also mark a pause. No larger text should be written without use of paragraphs. There are two commonly used methods to differentiate paragraphs. You can use an en space (half em width space) or em space to indent paragraphs after the first, alternatively you can leave a vertical distance after each paragraph.

In print indenting used to be more popular, because of the paper saving. On the other hand, on the web the vertical distance is more common because it is easier to scan. Vertical distance can be created with padding-bottom or margin-bottom. I would suggest margin-bottom, because css margins collapse between adjacent elements, so this will make sure we don’t end up with huge gaps if the element after our paragraph has a margin-top. If you have a background color/image set for your paragraphs, a padding is more fitting, because in that case the background will fill the padding too. The thing is you should avoid setting background to paragraphs of the main text, because most of the time that creates bad user experience. If the given paragraph is floating above an image for instance, setting a background can help readability.
margin-bottom
The last question of the blog post is the size of the given margin-bottom. This should be at least 1em to make sure it is visible enough, but a lot more than that will give huge gaps between the paragraphs, thus giving a disconnected feel to them. I usually go with 1.125em, and would consider 1.25em or 1.5em only in case of especially loose designs.

Futuresight

When the resolution and/or size of the current monitors will grow the base font size will change. But then again, based on the principle of responsive design different devices can (and should) have different base font sizes. Contrary to the base font size, I think, that line height and paragraph margins will stay for the years to come.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.