Typography in Web design

It was said and repeated for many times that web is 90% typography. If you are a web designer, developer or just anyone working in web industry, typography covers huge part of your work. Typography is also one field that is often overlooked by young designers wanting to start their careers or businesses. This is no surprise. For majority of people, web design is about creating mockups in Photoshop and other graphic software or programming in HTML and CSS (sometimes with JavaScript or jQuery). Sure, these are necessary parts of our process. However website would be empty without text.

Web design is often compared or associated with print design. Have you ever heard about layout, grid or columns? These terms were here long before Tim Berners-Lee, father of the Internet, was born. What is more interesting is never ending discussion between designers about how much should web follow the practices and principles of print. If you want to see fight of two designers, ask them on their opinion about fixed and fluid layout. How many teeth will left in a place nobody knows.

But we are not going to talk about which layout is better, how much similar should web and print be or anything like that. Today, we will take a look at how you can work with type in your projects through CSS so it doesn’t looks like sh*t. Even though our options are quite limited as opposed to print, we still have couple of ways to make the typography beautiful.

Available CSS properties related to typography are font-family, font-size, font-style, font-variant, font-weight, line-height and letter-spacing. You can also use font property to work with all of them at once. There are other properties related to text as well like text-align, text-decoration, text-transform, but we will not care about them for now. Our main focus will be on the first group covering font, lines and letters. We have to add one more property to this list. It is width and I will explain why in a moment.

CSS and typography

From the properties above we can pick three that have the biggest impact on the text. These are width, line-height and font-size. You will also probably work with font-weight and letter-spacing, but if you omit them, the change will not be that drastic. So let’s take a look at the top three.

Width

First property we need to talk about is width. Width of the line is one of the most important factors when it comes to typography. Make the line too wide or too thin and it will be uncomfortable for user to read it. So, how wide the line should be in perfect case? There is a good rule of thumb coming from print design that states it between 60 and 75 cpl (including spaces). Cpl means characters per line. That’s it. This suits well both, desktop and tablet devices. To be more precise, Robert Bringhurst has set the ideal cpl to 66 (“66 characters” rule). For mobile, you should go somewhere between 35 and 40 cpl. By following this principle you will keep the text in digestible form, not too thin and not too wide.

Since there is no property to control the number of words you will have to manually modify the width of paragraphs in a browser and count the characters or you can use some tools available online like Golden Ratio Typography Calculator for example. This is great tool for setting ideal typography properties for font-size, width and cpl you want.

Line-height

Next property to examine is line-height. You can also know this property from print design as leading. If you don’t understand why, try to play with different values on a piece of text and you will see the reason on your own eyes. Too big line height will enlarge the gaps between individual lines of text and, on the other hand, too small will make them smaller. You can also overdo it and make the lines overlap each other. Optimal value for line-height is considered somewhere between 120% and 145%. When you take a look at various stylesheets in use on the web, they often use values ranging from 1.2 to 1.375. So, if by remaining in this range you will be good.

It is important to note that line-height is unitless property. This means that you can either define its value in px, ems, percentages or completely omit the unit. For example, by defining line-height as 1.375 it will cause the changing it to 1.375 times bigger than the font-size. In case of font-size set to 16px, line-height will be 22px.

Font-size

The last property to work with is font-size. Again, good and well tried practice from print design is to use 16px for body text (paragraphs) as the best value. Another reason for this value is that it is also default size for most of the browsers. So, you can either set the font-size property for body element to 16px or to 100%. The result will be the same. According to a A More Modern Scale for Web Typography article, the best values for h1, h2, h3 and h4 elements are following:

Desktop:

h1: 3em;
h2: 2.25em;
h3: 1.75em;
h4: 1.125em;

Tablet:

h1: 2.5em;
h2: 2em;
h3: 1.5em;
h4: 1.125em;

Mobile:

h1: 2em;
h2: 1.625em;
h3: 1.375em;
h4: 1.125em;

These values are based on cpl between 60-75 we discussed above and default base font-size of 16px. Try these values on your own to see how they suit the content of your website.

Summary

Readability and legibility are the main goals of every designer working with type. Whenever the content of the page (text) is hard to read or display, you’ve failed. Yes, text on the web is much harder, if not some times almost impossible, to control. However, doing your best in order to provide content to the user in readable and legible form is your responsibility. Use the rules provided above to create good experience and easily digestible content for your users and remember that web design is not only about code or nice graphic, but typography too.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal