There is no reason nor excuse why websites should still get away with bad typography and therefore bad readability. Applying some basic rules and using proper fonts can yield a big improvement without much work.

For me typography is about aesthetics and readability at the same time. It is a form of art as letters alone, without other abstract shapes involved, can form a design. The fonts themselves can be considered art as they exist in millions of different shapes and styles. Some of the most recognized brands in the world use only letters for their logos. I’ve seen people fall in love with a certain typeface or even just a single letter, including myself.

But there is also a very functional approach to typography. »Form follows function« is a famous quote by the american sculptor Horatio Greenough which can also be applied to text and readability. Reading a book or a long article on the web has to be as efficient and pleasant to the eye as possible. If you can read a long text very fast and almost effortless it is an indicator for good typography. If you have to focus on the letters and words, if you accidentally skip lines or read the same line twice, if your eyes get tired while reading even a short paragraph, you are experiencing bad typography.

Fortunately, it is not hard to achieve good readability as all the essential knowledge that was acquired in the past centuries has been distilled to a countless number of books and articles on the web. Yet it is shocking to see how many books, articles and websites with bad typography are still being published. In the web this is easy to fix, there is no excuse. Edit and upload the stylesheet, reload and review the effect of your changes. In CSS you don’t have all the tools and tricks available like in desktop publishing software but it is absolutely sufficient. Lets look at some basic rules, fonts and tools to improve web typography.

Structure, Length, Line Height and Size

Structure is about breaking a long piece of text into smaller parts by various means. It is very annoying to read a 5000 words article in one block so the first step is to create paragraphs that are neither to long nor to short and which group sementic blocks of content together. This sounds very obvious but I see many bad examples of this on the web and its easy to fix. Using commas, quotation marks, headlines, sub headlines, block quotes is also helpful for structuring the text for the readers eye. The distance of two structural elements should be greater than the line hight. When experimenting, rather use more distance than less. If things are looking to narrow, tight, crowded – try more distance between the elements.

The lines of the paragraphs should not be too long nor too short. Usually the rule of thumb is to have between 50 and 80 characters per line but this is not typography law. Pick a good book from your bookshelf or a website which you remember being pleasant to read and count the characters on a couple of lines. They will be around those numbers. For short / special paragraphs of text, longer and shorter lines are acceptable.

The wrong line height can seriously harm the readability of your text. If the lines are too narrow you will skip lines or start reading the same line twice. Basically, you lose track of the lines which you’ve just read and can’t find the next one. If the lines are too far apart, the same happens and the eyes will have to travel a longer distance which makes them tired more easily. For paragraphs you can start using a line height of x 1.5. If your font size is 16px, a line height of 24px is a good first approximation. From there, fine tune as required. Headlines usually need less line height.

There is no definite rule which font size is the correct one for which application. The best way to find a good font size for long text, regardless if its for print or screen, is to create three variations of font size, of the same text, in the desired layout and putting them side by side. Now you read the same paragraph on all three variations, in the typical reading position of the given medium, one after another and your eyes will tell you which size is better in terms of readability. Like I said in the beginning, the faster and effortless you can read it, the better it is. Obviously this is highly subjective which is why you should also ask a friend, your mum or whoever else is around, to do the same thing and let them tell you which they think is best. This can be a decision where you have to compromise between aesthetics and readability.

Text alignment

Exactly seven years ago I wrote a blog post called »Typography and the Web« which was mostly about text alignment. In the past seven years nothing much changed here which is why I will make this short: Do not use justified text for paragraphs. Please read my old blog post if you want a more elaborate answer. Just use the alignment which is natural to your language, which means for all languages that are read from left to right: use left aligned text.

Choosing the right font for the job

This is something you can decide on your own. Serif fonts are generally a good choice for long texts because the serifs will make it easier to read as it is easier for the eyes to distinguish the characters and follow them along a line. If you don’t want a serif font for whatever reason, this is not a problem though. There are many, very good and readable sans serif fonts that are absolutely suitable for long texts.

Times New Roman, Georgia, Verdana, Helvetica, Arial, Courier – those fonts dominated the web from the late 1990’s up until the early 21st century. They were preinstalled on Macs and PCs and could be used anywhere without paying royalties. The font distributors would not allow people to host a font on their own web server, to use them on their own website, because anybody could then just download them. Those license / royalty issues and an elaborate debate about different font formats prevented other fonts to be used on the web, but luckily those days are over. The format debate came to a conclusion and the font distributors found licensing models that would allow people to finally chose any font they want. You can buy web fonts from almost any big font foundry directly but I would also recommend to check out myfonts.com which is a web shop for fonts with a large library from multiple foundries.

There are two models to achieve font individuality. The first one is that you find a font you like and buy it. Then you put it on your web server and reference it in your stylesheet. It gives you full control, its straight forward but it is also a bit less flexible if you haven’t decided yet which fonts you like best.

The other option is to use a web service which is hosting the fonts for you. You pay a monthly fee and can try all the fonts available from the given web service. Usually these services offer free accounts which are limited by the size of the font library. Nonetheless this is way more flexible than the self hosted option described above. To use them you have to sign up, embed some code in your website and then you can use their fonts. It could not be simpler than that. The downside is that you now rely on a 3rd party service. If you want access to all the fonts, you have to pay a monthly/yearly fee. Its usually not expensive but definitely more than just paying once. I encourage you to try it out and see if it works for you.

The most prominent font web service is Typekit which is owned by adobe. It is widely used and has a very convenient interface. Another alternative is FontDeck which I haven’t used personally but is worth checking out. Lastly there is Google Web Fonts which does the same thing but completely for free. For free also means that it is really hard to find a good quality font there – but it is not impossible and especially when you are starting to experiment it might be just right for you.

Now seriously, how to find the right font?

With millions of available fonts it is easy to get completely lost. I caught myself countless times browsing through the available fonts at myfonts.com or any other big foundry. The problem is that they are presented out of context which makes it hard to judge. The font may looks pretty on myfonts.com but once you buy it and use it on your website it may look completely inappropriate. Usually you can enter some custom text and adjust the font size but still, you will pick the wrong font this way many times.

If you have little experience with typography its best to go by something you already know. Keep your eyes open and if you see a font that you really like in a similar context, find out what it is and try it. This is where services like typekit shine. Another option is to look for »Best fonts of 20xx«, »Most popular fonts of 20xx« or similar collections on myfonts.com. That can be a good starting point to find a good font for yourself. Myfonts also has a tool on their website which helps you to identify fonts by uploading a picture. Its called »What The Font!« and I’ve used it many times to figure out the name of a font which I liked.

In the end I would approach the search for a font like this: Lets say you have a weblog which has a good amount of text. First focus on finding a font for the content. Look for readability rather than aesthetics. Some fonts have super nice character shapes but in a paragraph they look just too quirky and odd. Once you have a good font for the paragraphs you can start looking for a headline font. Either its the same, just bold or black. Maybe even in another style like sans serif, if the text font was serif. Or a completely different font that can focus less on readability. If you want you can have yet another font for the interface elements on your weblog.

The Ultimate Webfont Playground

There is yet another web service for evaluating different fonts on the web with different sizes, line heights etc. The service is called Typecast and I like it a lot! Once you sign up you can create new projects which are based on common website use cases like blogs, news sites etc. In this project you can compose text with any font in their extensive library, play with font sizes, line heights, colors, styles etc. You can edit everything live and in place. It is so extremely nice to work with that I have to mention it in this article. For me this was the most helpful tool to decide on the various aspects of typography of this blog. The service offers much more but it has a downside – it is not for free. Again I recommend that you create a trial account and see for yourself what they have to offer. If I was still earning my money with graphic design I would probably use this service on a daily basis.

What About Free Fonts?

The short answer is: There is nothing wrong with free fonts, go ahead and use them. The long answer is that most free fonts are not as good as commercial fonts. It is extremely hard to create a font where all the distances between all the letter combinations are optimal, where all characters fit visually together, which are easily readable in many different situations, which include non-latin characters for foreign languages which look good as well and so on and so forth. Its a work of months, sometimes even years. This is why some fonts cost money, because people spent significant amounts of their lifetime to create them. It is their job, their profession. Now free fonts can work for some use cases super well but usually they just lack a certain quality compared to those commercial fonts. If you pay attention and invest a bit of time you can find free fonts which are so good you wont ever notice a difference.

Often you can find free versions of commercial fonts as free samples. Usually it is just the regular version and you have to pay for the italic or bold one. But still, if you get a commercial text font for free this is perfect. On myfonts.com you can get these free sample fonts. In fact I got the font for my blog as a free sample from myfonts.com and then later I bought the other styles, then I bought the sans serif version, then some more variations … but you don’t have to go that route and just stick with the free version.

Conclusion

With the basic rules in the first part of this article, it should be possible for everyone to evaluate their own website and improve the readability and appearance if necessary. Question everything, inform friends, website owners if you think their typography needs improvements.

Take a look at the tools that can help you improve and find the right fonts for the job.

If you find spelling mistakes and other errors please let me know. I’m looking forward to your feedback and questions!

Meta

The terms font and typeface are used almost synonymously these days but there is a difference. A typeface can maybe described as the design and a font is its implementation. In the old days you would get a set of metal blocks with letters on them when you bought a font, today you get a piece of software, a file.

I’m using the font Calluna and CallunaSans for this blog. The SMYCK font is the Advert Light.