Web Typography

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.

38 thoughts on "Web Typography"

  1. Nice to see other people thinking of good web typography.

    I’d like to use some prettier fonts for my blog too, but for a private blog which does not generate any income most font licensing options are too expensive. And most of the fonts I tried from Google had problems with some characters, which were not available.

    PS: I don’t like your style for the strong element. It differs too less from the surrounding text.

    1. hukl says:

      Regarding the strong element. Can you provide a screenshot and some details about the browsing device you used? It looks fine over here but it may be due to some implementation details.

      1. Sure. Screenshot can be found here. It use OS X 10.8.2 with Chrome 24.

        In Safari it looks much nicer :).

        1. hukl says:

          Is it fixed now?

  2. Lukas says:

    Take a look at Nice Web Type.

  3. Marc says:

    I’m having some trouble viewing your site:

    http://imgur.com/VRoR16a

    I’m using Chrome 24.0.1312.52 on Windows XP, and I don’t think I’ve changed any settings.

    1. hukl says:

      Thanks for reporting! Need to figure out what is going on there.

  4. me says:

    The web font used for this blog is rendered horrible here: http://www.imm.io/UaSS

    Firefox 18.0 under Ubuntu 12.04.

    1. hukl says:

      Ah! This looks indeed horrible. Need to fix this asap. Thanks for reporting!

  5. Lindemann says:

    Very good article so far…but it would be great if you add some example pictures to illustrate the difference between to long/short line length, to height/low line hight, structured/unstructured text and so on.

    Some outstanding cool resources about Web Typography are:

    The talk from Jason Santa Maria (http://jasonsantamaria.com/about/), http://vimeo.com/34178417

    A collection of good fonts at Google Web Fonts, http://hellohappy.org/beautiful-web-type

    A nice showcase of fonts which play nice with each other, http://daneden.me/type/

  6. Sebastian says:

    Nice article, liked it a lot. Small typo in the “free font” paragraph, “visiually” –> “visually”.

    What about custom fonts and browser compatibility? Is it a webkit-only thing or does it work in Firefox and IE as well?

    1. Lukas says:

      Pretty much cross-browser: http://caniuse.com/#search=font

  7. k-os says:

    using typography for the web is key to “sell” your identy on the web and not being the website in 10000 that uses georgia. this becomes even more important with the introduction icon fonts, which renders good on older browsers and devices and is gorgeous on retina screens without caring a lot about vector support.

    speaking of thinks that dont look right… your h2 headings have some strange second appearance on an iPad 2 with the latest iOS. webkit seems the render the heading twice with some slight offset (the S appears to have two tips).

    1. k-os says:

      oh… using typekit fixed it 🙂

  8. oopz says:

    I think this post would work a lot better if you showed people instead of telling them.

    1. hukl says:

      I show them. The typography of this blog is following all the rules. Its is not that easy to make proper examples without violating your own layout. I thought about extra html documents that I could link to or make a super bad, opposite version of this article to show the contrast … what would you prefer?

  9. jenett says:

    You may want to correct spelling for ‘therefor’ and ‘pardy’ – just to help

    1. hukl says:

      Thank you, but what is wrong with therefor?

      1. Charles says:

        The spelling, obviously. What else would be wrong with it?

        1. hukl says:

          To me the spelling seems correct, thats why I’m asking.

          https://en.wiktionary.org/wiki/therefor
          http://www.dict.cc/?s=therefor

        2. hukl says:

          Ok, I just checked the meanings of therefore and therefor and there is indeed a difference which is why I corrected it as well. Thanks again.

  10. Neil Bowers says:

    Your comment on use of serif fonts over sans-serif isn’t backed up by research: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/

    1. hukl says:

      Well, especially on displays its debatable, I agree. That is why I did not make a strong argument pro serif fonts. In the end its mostly a matter of taste and design. I like serif fonts for long texts better, on a display they need a certain font size to work properly if no retina display is at hand.

      Thanks for the link!

  11. General says:

    Actually the font on this website looks kind of ugly, doesn’t it? http://i.imgur.com/K5GoSur.png (inb4: it’s my failure)

    1. hukl says:

      Hmm, what kind of OS and Browser are you using? I’m aware that older browsers may render the site a bit ugly but I tried hard to make work on as much devices as possible. If you tell me about your environment I will try to fix it.

      Bonus points for browsing via IPv6 – I hope its not related to that 🙂

      1. General says:

        > I’m aware that older browsers may render the site a bit ugly
        Well…I am using debian testing with iceweasel 10 (which is a fork of firefox 10) so I assume this is the problem…

        1. hukl says:

          Hrm that still sucks. Could you try another / more recent browser to confirm or are you ‘stuck’ with this version for whatever reason?

        2. hukl says:

          Another question: do you have javascript enabled or not? Because the smyck font is rendering just fine

          1. General says:

            Yes I do have javascript enabled. I also visited this site with chromium 22 and the font looks pretty great with it.

  12. Sebastian says:

    I can highly recommend the #webtypobuch by Gerrit van Aaken. In this book he goes into each detail of web typo. Right from scratch, so I find it very suitable to get a very good overview: http://webtypobuch.de

    1. hukl says:

      Indeed, but it is in german only as far as I know.

  13. Charles says:

    Aren’t you breaking one of the most universal rules of web typography in this article – that paragraphs should rarely be more than three lines long?

    Dr. Ken Evoy first preached this in 1999 and it has been a fundamental rule since.

    1. hukl says:

      A definite no. This guys must have said that in a different context or he must have a very special interpretation of typography. Books with three line paragraphs would be quite annoying to read.

      1. Charles says:

        Really? Evoy has written at least four books and they’re all written with three line paragraphs.

        Short paragraphs are easier to skim over. In books it doesn’t matter so much, but on the web they’re a must, since everyone has such a short attention span.

        1. hukl says:

          I will just disagree with you and Evoy there 🙂

Leave a Reply to Lukas Cancel reply

Your email address will not be published. Required fields are marked *