An Introduction to Web Typography

The world wide web mostly consists of text. And for that reason, web typography is one of the most important skills a web designer must master. You can make your website all flashy and colorful, but if people can’t read your content, they will simply close that tab!

95% of the information on the web is written language

Oliver Reichenstein, 19 October 2006

There are a handful of techniques that make typography on the web readable and beautiful. In this post, we will discuss these web typography techniques and see them in action. I created a sample project, “The Great Gatsby”, so that we could see how these techniques can be implemented on a real–world web project.


6 Steps for Better Web Typography

I followed these 6 simple steps and techniques to better understand typography on the web. And I’m sure if you read through them, you’ll also have a better understanding of web typography.

1. Choosing A Suitable Typeface

When choosing a typeface, the content becomes necessary to understand the context of which the type will be in. You see, a typeface can dramatically affect how the content is perceived. Imagine what would happen if a person used good ol’ Comic Sans on a business report?

There are two types of typefaces; text typefaces and display typefaces. Text typefaces should be chosen first, since they will be applied to the majority of your body text. Display typefaces will be applied in larger and flashier places like main headings. Make sure that the display typefaces pairs well with the text typeface you chose.

A screenshot showing PLayfair Display and Limelight typefaces paired together
Playfair Display and Limelight typefaces in action

Because the content for this particular project was the first chapter of The Great Gatsby, I had to consider the time period and the overall feel of the content itself. Important factors to consider were readability, having a small caps version, true italics and several weights. Taking all that into consideration, I decided to go with Playfair Display for the body and Limelight for the main heading.

Further reading on this topic

2. Understanding Content Hierarchy

Understanding your content is king. You need to know what information is important and what information is not. If all text was styled the same, then nothing is important. Similarly, if all text was emphasized, then everything is important, which means nothing is important. There are different ways to highlight the important information on a page: you can use size, weight, color, position and contrast.

A screenshot showing content hierarchy in web typography
Understanding content hierarchy

In this project, I used size, weight and color to emphasize the important information. For example, the title of the page, which is the main heading, has a larger size and heavier weight to highlight it. The text below it was a little less important, so I decided to give it a more toned–down color to signify it is less important than the title. I’ve also given the headings in the main content some emphasis using size and weight.

Further reading on this topic

3. Choosing A Right Scale & Height

There are different ways you can establish a good typographic scale on your webpage. There is the perfect fourth, the perfect fifth and the well–known golden ratio. I used a great tool: Type-Scale to help me get the right scale for my project. I decided to go with a base font size of 1.25em which is 20px, and used the Augmented Fourth scale.

Another important point is line height; the vertical distance between lines of text. Too much line height or too little of it negatively affects readability. There is no perfect way to test this, except trying out different measures and see what feels right to you. After trying out different line heights, I decided to go with 1.6 or 32px. When setting your line height in CSS, it is considered good practice to leave it without a unit, so it should be line-height: 1.6; and not line-height: 1.6em;

Further reading on this topic

4. Establishing a Typographic Baseline

After choosing a comfortable scale and line height for my type, we need to establish a baseline. A baseline is the invisible line upon which most letters “sit”. This is extremely important to achieve vertical rhythm for better readability. In most cases, your baseline is sort of the same thing as your line–height. I used Basehold to visually see where my baseline is to adjust other elements such as headings and lists. Your entire design should be based on this magic number that is your baseline. In this project, the baseline was 1.6em or 32px.

A screenshot showing vertical rhythm in web typography
A baseline creates vertical rhythm

Further reading on this topic

5. Making it Responsive

There are a few things to consider when making your type responsive. The most important thing you need to keep in mind is line length. If a line of text is too long, it will strain your eyes. Similarly, if a line of text is too short, it will also strain your eyes. Robert Bringhurst said that a line of text – in a single column layout – should contain around 45 — 75 characters. The best way to test for this is to add an asterisk * after the 45th and the 75th characters. Then resizing the browser window down until both asterisks are on the same line. This is when you need to adjust your CSS accordingly; either by reducing the containing element’s padding or width, or by reducing the font size.

A screenshot showing the 45—75 character per column rule for line length in web typography
Line length: the 45—75 rule

Further reading on this topic

6. Adding Some Finishing Touches

I’ve covered most of the important typography techniques to consider when designing a website. But there are a few other points you can look into to “up your type game”. For example, you could use letter–spacing to bring your letters closer together in headings. This allows the heading to be more emphasized as a block of color. You should also use smart quotes to properly use quotations and other entities in your content.

Whitespace is another important factor in web typography; your text needs room to breathe. Whitespace or “Negative Space” is the space between elements in a composition. It doesn’t actually need to be “white”; that’s just an expression.

Finally, while researching about web typography, I learned a topic that was entirely new to me… kerning and ligatures. Although they may seem like little details, they really do make a difference. If you have the time, read through some of the resources below to better understand web typography.

Further reading on this topic

Post a Comment

To post code, use the code tag with a class language-*
Examples: code class="language-markup"code class="language-css"