First of all, we should start with the question: “What is readability?”.
Readability is an attribute of your writing. When the readability of your text is high, users will be able to understand what you wrote easily. If it is low, although people might still understand your text, reading it can be a tiring experience. They will spend too much energy trying to unfold all those complicated words and complex phrasing.
But, even if you have the best text written, if it isn’t presented correctly, it can kill the reader’s interest.
That’s where legibility comes in to work with readability. Legibility relates to the ability to distinguish one letter from another when reading. It’s mostly connected to the design, specifically with typography.
To help you give your users a better reading and overall experience, there are three main CSS rules that can help you:
- font-size;
- line-height;
- letter-spacing;
- max-width.
Font-size of 16 pixels seems to be the ideal font-size. Our preferences and aesthetic taste can change easier than we think. When something “looks neat!” it’s probably because we’ve seen other designers’ work that seemed to be good on the eye.
Having a 16-pixel font size on a screen is about the same as the size of text printed in a book or magazine. We read books relatively close - several centimetres away - and they are typically set at about 10 points."If you were to read them at arm’s length, you'd want at least 12 points, which is approximately equivalent to 16 pixels on most screens.
For text-heavy pages, you don’t want a font smaller than 16px. You can even use 18px font size, it might become easier for users to read your text, but that depends on the type of users you have.
- At age 40, only half the light gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%.
Around 1 in 10 of your users also has an eye disease. The ones who don’t probably will have a hard time reading text smaller than 16 pixels. We can wrap it up by saying that in order to have the maximum number of people reading and understanding your text, you should set 16 pixels as the minimum size.
Line Height defines the space between lines of text. With the right line height, you can improve the readability of your body text and headers big time!
If the line height is too small users will have to squint while reading. If it is too high, the text will seem disconnected from other lines, instead of looking like a piece of text.
Letter Spacing, like line-height, will affect user readability. It controls the amount of space between each letter in a given element or block of text. Despite negative letter-spacing being something possible, it shouldn’t be used in body text.
Max width property limits how far an element will stretch. It can be your best buddy in a fluid design. It allows an element to scale down as screen sizes decrease, but at the same time lets you control when bigger is just too big.
Color property ensures an even better reading and overall experience. You should check if the contrast between the text color and its background is enough. You want to avoid bad color combinations like yellow text on a green background or yellow on white. Poor contrast leads to a tiring experience, especially if the text has more than one line.
Certain levels of contrast can help you understand how your text performs. To calculate it, you go here.
It’s a very nice balance of flexibility and control with just one CSS rule.
According to Robert Bringhurst in The Elements of Typographic Style, an ideal line length for reading is between 45 and 75 characters (max-width: 75ch;). This rule was created well before screens or the web was around, but this range still holds true for our screen-based type.
These rules are guidelines and can be broken in certain situations, but I’ve found them helpful in improving the readability of the content.
Photo by Vikas Pawar on Unsplash