On Beautiful Reading Experiences in CSS

Text is a fascinating problem for me on the web. Ever since Gutenberg and his invention of movable type we were able to make copies and therefore share our texts easily. Publishing houses and Typographers innovated for centuries to create the best reading experience possible. Then the internet came along and with it an abundance of text. But surprisingly our reading experience didn’t get better – it got worse.

I believe that proper handling of text is still one of the most underrated things in the design process of any kind of text heavy web project (which is still a lot of them). It amazes me that even newspapers and magazines have a worse reading experience online even though they should know better. Why do we seem to collectively not value text anymore?

Maybe it is because of a lack of education. I don’t truly believe in this but since I’m writing about it, it’s a beneficial believe to have.

Text size

When reading text one of the first things one has to think about is the font-size of body text. It is a weird thing about our perception of text size but we often create quite dense and small experiences. Surprisingly, I think the text should almost always be bigger than you think. When you look at your text and think that it has a great size then it will be too small for someone who doesn’t stare repeatedly at the same piece of text for minutes. Seriously, try to read the whole thing instead of staring at one line Ramin!

An often recommended size is 16px but honestly even bigger sizes can work great. Medium, serving as an example for an extremely readable site, uses font-size: 21px on desktop and it works great. Also, the New York Times is a good example utilising a rather big font-size: 20px. Wikipedia on the other hand ends up being 14px on my MacBook, which is just a tiny bit too small in my opinion and therefore makes it harder to spend hours on it.

Just compare the readability of the following first two sentences of Moby Dick:

If you are reading this on a desktop the 12px example will seem tiny and if you read this on a mobile device the 20px example will look gigantic. This is why the font-size needs to be adapted to the device. Normally, we display less on mobile and the screen is closer to our eyes therefore I would prefer a slightly smaller font. I always have the feeling of not being able to display enough text at once when using these bigger sizes, but this is one of those unhealthy urges that need to be avoided. Less text better formatted. That is the user’s dream.

Line Height

If font-size is the obvious attribute when looking to make your text more readable then line-height is its underappreciated sibling. I still remember how in high school our teachers told us to use a line height of at least 1.5. “What lunacy!” I thought, “What do they need all this white space for?” Turns out when you need to read thirty 20 page essays you want to have a decent reading experience. So on this one listen to my and everyone else’s teachers and use line-heigh at least with 1.5.

Fancy an example? Let’s revisit Moby Dick:

As we can see in the example above only relatively late does the line-height start to look awkward. On the other hand small line-heights are way more common and as we see in the paragraph with line-height: 1.25 the reading experience is inferior to all the others, including the awkward line-height: 2. Push for white space!

Text Alignment

We live in a dystopian future where people who don’t read text on paper have mostly forgotten about the beautiful block alignments we cherish there. It is true that it is way easier to handle text that has a left alignment, but do you really prefer easy over a bit more difficult but beautiful?

Let’s look at an example first! Depending on your screen there might be not such a big difference between them but in that case just visit almost any other website (Wikipedia for example) and compare the text. Tell us more about the sea Ishmael:

As you can see text-align: justify can be way cleaner than text-align: left. The only problem is that justify can look really ugly when used in the wrong way. Spaces between words can become gigantic and we definitely don’t want that.

To mitigate the spacing issue we can use hyphens: auto. Unfortunately, only English is supported on all major browsers for proper hyphenation. If I would want to write in German or French Chrome’s current version (55) for example wouldn’t be able to hyphenate words properly according to linguistic rules. There is an option to hyphenate your text yourself, but with the current speed of content production I imagine no one utilising this.

Another attribute that can be helpful in modern browsers is text-justify which also enables us to justify the text but in a more fine grained. With it you have the option to justify based on inter-word or inter-character space. If you come this far and you still struggle with the size of the spaces you can try word-spacing. I saw a case where word-spacing: -2px made the trick.

Line Length

Have you ever thought about how your readers skim the text? I for a long time didn’t think about it at all but needed to realise that is in fact a key factor in how fast people are able to read your text. As Christian Holst explains in his article line length can have severe implications on your text’s readability. If your lines are too long your readers will have difficulties quickly switching between lines and too short lines push the reader too much to skim the article. If you want an easily readable layout you can go with Holst’s recommendation to keep “your text within the range of 50-75 characters per line”¹ as I do on this blog.

Links

Link visualisation seems to be one of the last big unsolved questions of the internet. At this point I think there is a consensus that blue underlined text is easily recognized as a link but breaks the reading flow inside a paragraph. There are many suggested ideas through which we will go. Typographer’s like Matthew Butterick suggest to stay away from underlining text, since “It’s ugly and it makes text harder to read.”² But a lot of web designers think differently and prefer the underline for it’s obviousness. You don’t want to retrain your user to find your links, they should feel intuitive to them. This is also why bold and italic, eventhough they could seem like interesting candidates are often rejected for links. And I completely agree. Not every link in a paragraph is an emphasize. Wikipedia articles often distract me because their links keep me focussing on unessential matter.

I actually blieve that most of the time there should be more than one type of link styling because links serve different purposes. If I want to link to something I’m mentioning in my text I want to use a discreet link. Here the best is to have a link styling that doesn’t interrupt the reader’s flow. But sometimes I do want my reader to click on something, because maybe it is essential to my text. Something like the original article I’m discussing or some important website I want them to visit (like to sign for a petition or something of that kind of importance). Then a link should have a stronger emphasis. Here it is okay to break the reading flow a bit. I truly believe that a two styling link system is the way to go.

One of the reasons I believe so is that everyone focusses on loud links but these make it impossible to create highly linked articles. Paragraphs become a sea of blue underlined text and logically authors shy away from that. Even Medium’s fairly unobstrusive thin black line makes it unattractive to link too frequently.

Fonts

One of the topics people actually do like is fonts. People create a lot of rules how fonts work together. A serif font as the header and a sans-serif font for the body or vice versa. I personally don’t understand most of these rules. The only heuristic that could be helpful is not to choose multiple fonts that look too much like each other. Don’t have two almost identical serif fonts for your headings and your body. If your readers are like me they will be mostly irritated by the slight difference.

I believe that most of typography and text layout is there to make the reader get lost in the text and lose any conscious thought about the visual properties of the text. By choosing a font that uses untypical character shapes you can have maybe a prettier text but actually reduced readability. A fascinating relationship between visualisation and underlying content.

Resources

• How Big Should a Font be on a Site? – Rules of Typography
• 80-characters line length limit in 2017 (and later)
• Butterick’s Practical Typography
• Inline Anchor Styles
• underline.js
• CSS Trick: Adjusting Text Underlines
• CSS Underlines Suck
• Crafting link underlines on Medium
• Styling Underlines on the Web
• How physical text layout affects reading from screen
• The Optimal Text Layout is More Than Line Length
• Readability: the Optimal Line Length