User experience is crucial on the web. If reading your website involves putting some effort in, they will likely head straight for the back button and look elsewhere. One vital factor in user experience is typography. On the web legibility and readability are more important than style.
Factors to considered are:
Leading or line-height
Leading is the space between your lines of text. It allows users to read your copy clearly.
If there is too little leading, then the text will look compact, and it will be hard to read. This paragraph is an example of text where the leading is too small. When the copy looks too dense, it feels as though the writer is mumbling.
There can also be too much leading. In this case the text will be too open and is also hard to read. When the copy is too open, it feels as though the writer is speaking with long pauses. At the end of each line, it requires effort to scan down the page for the beginning of the next line.
Capitals
BLOCKS OF TEXT THAT CONSIST OF PURELY CAPITAL LETTERS ARE HARD TO READ. THEY CAN ALSO BE PERCEIVED AS SHOUTING OR AGGRESSIVE. THEY CAN LOOK GOOD AS TITLES BUT PARAGRAPHS OF TEXT IN UPPERCASE SHOULD BE AVOIDED. A LOT OF RESEARCH HAS BEEN CARRIED OUT, AND IT IS UNIVERSALLY RECOGNISED THAT BLOCKS OF TEXT CONTAINING BOTH UPPERCASE AND LOWERCASE TEXT ARE FAR EASIER TO READ.
Reversed-out text
Black text on a white background is the easiest way for the eye to digest information and communicate it back to our brain. Large amounts of white text on a black background is hard to read. A little can be great; it grabs your attention by being different. You will notice examples of this throughout this very website. Too much though can be overkill and start to burn your retinas.
Letterspacing
Letterspacing is (unsurprisingly) the space between etters.
A negative letterspacing can feel like you are trying to squeeze too many people onto a sofa. It starts to feel uncomfortable, as though the letters are almost on top of each other.
<pstyle=”letter-spacing: 24px”>Too much letter spacing is also wrong. I would only usually increase letter spacing where the copy is all in uppercase, which if you’ve been paying attention is only in titles.
Underlining text
On websites, underlined text is seen as a link, and it is assumed that it can be clicked. Therefore never underline text for emphasis as your readers will believe it to be a link.
Orphans
An orphan is a single word sitting on its own at the end of a paragraph. It’s not nice to look at and can disrupt the flow of reading.
On the web, it can be impossible to predict if the last word will be an orphan due to the vast array of screen sizes on which the website is viewed. To prevent an orphan, your web designer can add a ‘non-breaking space’ tag between the last two words in the paragraph. This will ensure there are at least two words on the final line and prevents an orphan.
Size
The font size on the web is essential for readability. Your text could be read by someone on a 32-inch monitor and at the same time by a person using a seven-year-old smartphone.
If users have to press their noses against the screen to read your text or it is so large it looks almost childish then they will not want to read through any large passages of text on your website.
Line length
I try to aim not to have lines of text consisting of more than 80 characters. Text stretching across the entire screen can become bothersome to read. For this reason, columns are used in newspapers and magazines. It is the same on the web.
Font choice
I don’t like to use more fonts on a website than is absolutely necessary. I would usually use two at the most, one for headings and one for the body copy.
Occasionally I may use a third for quotes, but it can begin to look cluttered and messy if too many are used. When mixing fonts I would use one serif and one sans-serif font or two sans-serif fonts. I never mix serif fonts within a layout as they tend to be too similar, and it just starts to look wrong.
Good web typography should be invisible. If nothing stands out and the text is easy to read, then it is being done right. It’s when something is wrong that you begin to notice.
