Anyone can choose a font. Just go through that dropdown menu and click on a name. But choosing the right typeface? That choice can set the tone for your entire website. Here, we’ll go through a guide on web typography that will help you to design a beautiful, comfortable reading experience.
Digital typography is quite different from print design. There are a few challenges to keep in mind. Web typography is more fluid and the way it’s displayed on a screen is influenced by a lot of factors, some of which are:
- Screen Size
Even though it’s near impossible to predict, you can use something that is responsive like WordPress website design to make sure that your pages look good on any type of screen. But this means that your typesetting can become useless.
- Screen Resolution
Text readability is greatly influenced by pixel density. Even though high-resolution screens are more accessible to people, designers should still consider older technologies in their work.
- Screen Calibration
This is mostly about the brightness of a screen. While this is usually a personal preference, it determines how colors will appear on a screen. Therefore, you should be careful with your choices and make sure they will be visible in most settings.
I’ve been using Cloudways since January 2016 for this blog. I happily recommend Cloudways to my readers because I am a proud customer.
Key Factors to Keep in Mind
Here are some of key factors that you should keep in mind when you are designing for readability. Also this covers best practices to web typography.
01. Hierarchy
This defines how readers should go through your content. It helps you differentiate headers from a body of text, for example. Hierarchy is most evident with the difference in size between different elements.
You can get a similar effect with colorful boxes of text. But using the contrast in size between headers and body text gives off a more organized and clean feeling. This plays a big role in how scannable your layout is.
02. Your Headers
As you can probably guess, headers are really important. First of all, the size of your header is a major factor in how readable your content is. Going too big with it can throw your whole page off balance—readers will lose their focal point.
Headers that are too small will disturb the harmony of your webpage, too. If it doesn’t pop for your readers, chances are they’ll miss it. Your headers should guide your reader’s flow through your page.
03. White Space
When your page is loaded with content you should be careful with your spacing. You can use white space to offset large bodies of text. It can help guide your readers through the text while being easy on the eyes.
As you can see in the image above, white space can be used to separate different text elements. The visitor’s eyes go from a body of text to body of text with ease and structure.
04. Consistency
This is a very important detail, not only for usability but for readability also. It goes hand in hand with hierarchy. All elements on the same level should have the same size and font, to be easily recognizable.
For instance, all <h2> headers should look the same. Consistency provides users with a familiar point of focus when they read your content. It also provides a feeling of organization and structure for your webpage.
05. Separators
Using separators can be a great way to divide your text into clean, organized sections. You can use them to isolate different hierarchical elements—like headers and simple bodies of text. Or you can split your content into sections according to their subject.
These separators can either be simple white space, a single line, or even boxes. These elements help a reader’s eyes move through a more complex layout. The main idea is to increase readability by keeping things contained and organized.
06. Good Use of Graphics
You can add structure to your page by using graphic elements in a clever way. Your images should blend into the background. They should create a smooth reading flow and complement the point you are making.
You can use these visual elements as separators or as a way to showcase an important piece of information. The key point here is that text and graphics should complement each other and add up to a clear, organized layout for your page.
07. Use Clear and Recognizable Letterforms
It can be tempting to go overboard and get extra creative with your letterforms. You probably feel that you see some fonts everywhere and that they’ve been used too often. But there’s a reason for that.
Text is most readable when the eye can clearly distinguish the letters. And those overused fonts are specifically designed for that. They are slick and rhythmic and easy on the eyes.
08. Distinctive Letters
When choosing a font, try to analyze how all the letters look next to each other. If there are forms that are too repetitive, they make the letters look illegible. Therefore, you should aim for fonts that have very distinctive shapes for each of the letters.
Usually, the problem occurs with similar letters, like “q” and “p”, or “i” and “l”, for example. If your readers have to take some time to understand what a word means, they will lose their patience. So, make sure you pick a font that is clearly distinguishable.
09. Open Forms
If letters are more airy and open they are less likely to blur into a closed shape. They are also easier on the eye and easier to read. Additionally, closed forms are easier to be confused with other letters, like “C”s and “O”s.
10. Clear Terminals
This one goes hand in hand with having open forms in your chosen font. If the beginnings and ends of your letters are clearly distinguishable, it will help the eye recognize individual letters easier.
It also gives your text a more organized feeling, since forms don’t look like they end suddenly or bleed one into the other. This way you make sure your content is still legible even if the size of the screen shrinks.
11. Letterform Contrast
The best fonts have some contrast within the letterform stroke widths. They shouldn’t go as far as certain strokes disappearing. But it’s pleasing to the eye to see some differences in width.
If all letters look too much alike, or if some are very thin, the eye will get tired when reading your content. This is especially important for bodies of text—headings could be an exception, as they stand out anyway.
What to Remember
When you choose or design an onscreen experience—in this case, web typography, you should never skip testing. While you can know all the theory and influencing factors, the end result can still surprise you.
Web typography is harder than it might seem. There are so many details to take into consideration, so many challenges to overcome. But, at the end of the day, picking a font can make or break a website. So make sure to choose one that fits your page’s personality.
