5 ways how to improve your web typography
Type is fundamental part of every single web project. Legibility and readability are essential part of user experience in general. If you know how to work with type you can increase conversion, duration of every session and your website will be more valuable for people.
But firstly, what is text?
Letters, words, sentences, paragraphs. Text as speaking is way how to communicate ideas to people. It contains informative and certain message that they can read. If you’re writing for people on the internet, it’s neccessary that people will understand what you’re talking about.
As a big fan of Thinking with type by Ellen Lupton, I have to quote the author and say: “In typography, “text” is defined as an ongoing sequence of words, distinct from shorter headlines or captions.”
Good typography should easily guide users to discover what they’re looking for, they have to feel pleasant and productive while they’re reading your texts, so way how you communicate your ideas should be as effective as possible. Bad typography will frustrate and distracte them, they will feel disappointed and they won’t continue in reading.
In this article I will tell you few tips, how to improve your web typography and make your text content more legible and readable. So let's get started.
Font size
Few years ago, it was common to use 10 or 12px size for body text. Nowadays we use FHD or UHD displays, so we have to scale up font sizes too. Use of large default font size will increase your text content legibility. It's optimal to use from 16 to 22px font size for your body (or <p>) to make your content easy to read. Then when you're designing responsive site for smaller screen sizes you can downscale your default text to sizes from 14 to 18px.
These sizes are minimum while designing also for people with visual impairments (those who wear glasses or just seniors).
Optimal body text size is from 16 to 22px to increase legibility of your text content.
But don't forget, your optimal font size always depends on typeface that you've selected for your web project. Here on the image bellow you can see difference between x-height (the distance between the baseline of a line of type and tops of the main body of lower case letters) of Helvetica Neue and Futura.
Line spacing also well-known as line height
In print, it's also called leading, they've used metal strips to separate individual lines.
While designing for web, you should use at least 1.5 multiple of your body text size for your line height and it’s optimal and recommended to use around 1.1 or 1.2 multiple as line spacing for your headlines.
You should use line height at least 1.5 multiple of your body text size.
What does it mean? Practically, when you're using 16px font size for your body content, your line height should be around 24px (as you can see on example bellow).
But sometimes when you want to make your texts more ellegant and you only work with shorter paragraph, you can increase the line height a little bit.
Line length
On the web, people won't read wide blocks of text. It's for them really uncomfortable and hard to scan long lines. Important thing that I have to notice is that people don't move continuously along a line of text while reading, but make short, rapid movements (well known as saccades) intermingled with short stops (fixations) — it was described by French ophthalmologist Louis Émile Javal.
People don’t move continuously along a line of text while reading, but make short, rapid movements intermingled with short stops.
So, the line length should be limited and the optimal number of characters per line is from 60 to 80 to make positive user experience for readers. When you're designing responsive sites, you have to adjust line length to smaller screen sizes — for mobile you should use from 30 to 40 characters per line.
Lines longer than 80 characters are also huge problems for people with dyslexia.
Contrast
Contrast is important from the usability point of view, but it affects legibility and readability as well.
Text that isn't contrastful enough is harder to read and unsing of the site is hell not only for people who have visual impairments. It can decrease conversions, average session duration or can cause the bounce rate.
Nowadays, the trend is to use grey text on white background. But it doesn’t matter if users can’t read your content comfortable. People are reading slower when the contrast isn't optimal. They don't have to decipher any word, they can skip important information in the text, they don't have to discover links or it can be hard for them to scan content easily— even if they're reading on mobile device while walking at the sun.
Content vs background contrast should be guided with 4.5:1 rule.
From the accessibility point of view, content vs background contrast should be guided with 4.5:1 rule which helps also to users with any visual impairments as low vision or color blindness read the content correctly on your screen. But to create optimal contrast is often trickier and it's not only about colors. For example for people with color blindness is problem to see hypertext links and you should underline them (also it's great solution for people with blindness).
Contrast isn't only about colors, people with visual impairments can have problem to find hypertext links when they aren't underlined.
Vertical rhythm
People on the web aren't reading whole blocks of text. They're just scanning the content and look for important information. With vertical rhythm, it's easier. For users it's more comfortable to scan than read on the web. We use vertical rhythm to keep all vertical spaces between elements (headlines, paragraphs, captions or even images) consistent. Also we use vertical rhythm to guide user to find important images easily and they'll have more relaxing and positive experience while using our website.
But how does the vertical rhythm work?
You've probably heard about baseline — it's really important in the print design where the baseline is the invisible line where all characters sit.We also use this term in the field of web design, but it's slightly different. In the field of web design, baseline is determined by the line height (line-height is also CSS property) of the body text.
When you're defining your baseline and creating your own baseline grid, the fundamental point where to start is defining of your body text size (<p>) and its multiple for line height (line-height property in CSS) and then scale everything upwards.
As you can see on the image bellow, I’m using 16px font size for body text and 24px line height, which means that 24px is for me the baseline (for better guiding and setting up all fonts to my baseline, I used to divide this number by 2, 3 or mostly 4 to have more guides on my screen). Based on this definition, all spaces (including borders, paddings or margins) have to be multipliable or dividable by 6px. To make a visual consistency between paragraphs and headlines I decided to create spaces as multiples of number 6— and finally I used 24 or 36px. My font sizes, line heights are multiples of 6px too.
Few words as conclusion
Typography is essential part of web design and with correct decisions your text will be legible, readable and understandable as well. User will have positive user experience while reading your text content and browsing your website and you'll make more profit based on more conversions. Also they will consider your website as more valuable. Just use these few tips and increase your accessibility and average session duration.
