Typography in Web Design: A Beginner’s Guide

There is a fundamental difference between art and design. Purpose. While art doesn’t need purpose and can be the object of its own purpose, design is the application of art towards a goal, an objective.

When developing your website, you’re probably not doing so to create a piece of art. You might be doing it to sell your products online, provide a better customer experience, to inform people of your project or movement, or for an infinite number of other reasons. But whatever the reason, there is a reason.

And that reason is what you should be designing around. While different reasons warrant different designs, there is one universal design aspect that is always present. Typography. No matter your website’s purpose, it’ll contain text. In order to fulfill your goals, you’ll want to keep your visitors on your website long enough to convert them, inform them, or whatever else you’re trying to achieve. To that end, good typography is always necessary.

But what is good typography?

Good typography is – to some extent – subject to the eye of the beholder. It also depends on the tone you are trying to set, what industry you are in, and what you are trying to achieve. But there are some tips that apply to any website.

1. Simplicity

Don’t use more than two fonts. In fact, you should probably stick to one font and differentiate different levels of text (more to that later) by alternating weight, size, and color. If you do decide to use two different fonts, make sure the fonts you pair harmonize well with each other. Picking fonts that are too similar to each other makes it difficult to differentiate the two while making them just different enough to evoke uneasiness. Fonts that clash too much is also not the way to go. There is, however, no one way to pair fonts and you do have some space to play around.

Recommend Reading: YouTube SEO Guide: How to Rank Your Videos #1

2. Structure your styles

Alternate between font size, weight, color, and spacing to distinguish between headers, sub-headers, paragraphs, and any other elements on your site. This way you can use the same font while also allowing creating strong element hierarchies. See the illustration below showing the difference between a title, a subtitle, and a paragraph.

3. Legibility

No one wants to have to struggle to read the text on your website. No matter how creative the font. Avoid fonts that are too curly and eccentric and stick to simpler ones. But ensuring legibility goes beyond the obvious. It is vital that texts are large enough and that the line spacing is appropriate.

Not enough line space and letters on adjacent lines will bump into each other, severely reducing legibility. Too much line spacing and moving from one line to the next will be difficult, as will be knowing what text elements belong together. You should aim for a line spacing that is around 140% to 180% of your font size. Counterintuitively, the smaller your font size, the more line spacing you will need. Further, different fonts have different maximum heights while still being the same font size and so will need different line spacing. One final aspect you should keep in mind is line length. Very long lines (longer than 80 characters) reduce legibility. If they are absolutely necessary, you can compensate by increasing the line spacing.

Typography is an integral part of your website design. Ignore it at your own risk.