Web typography: the formula
4 elements to create a great typography
Try to imagine your own site’s typography like a chemical formula where some elements combined together will give you a result that varies depending on the elements’ quantity and quality.
In our case, the formula is made by four elements that combine together will give to your site a great typography style.
The one you see above is my personal formula to set up a great typography and is based on the balance of 4 elements: Font, Size, Contrast and Space.
Font (+ Hierarchy)
Determine the content hierarchy is one of the most important things to do when you’re creating a website and reflect that hierarchy on graphic design is an essential skill that every designer should have; to make the basic info easily recognizable at a quick glance there are several methods that you can choose but certainly the most widely used is a proper choice and differentiation of fonts.
There are no written rules about fonts, basically we can say it’s a good practice to choose maximum 3 different fonts for a website and “play” with them to make the hierarchy easy to understand.
Fonts are divided into two different families: serif and sans-serif.
After the fonts’ decision you can tweak and tune the style: for example, you can differentiate your content using all-caps for titles and italic for sub-heading. Serif and sans-serif fonts can also be mixed to give to the hierarchy a clearer and nicer effect.
Size
Varying the size of your content is the second step to give a loud and clear signal to your reader that the importance of the content has changed. It also has a benefit: a bigger text can catch the readers’ eye and if they are in a hurry, they can quickly understand what is your post/text about and decide to stay longer on you website and read what you have to say (and it sounds good!).
To set up a correct size for you font remember that you won’t probably have readers with super-sight so try to avoid small texts: don’t write your content is 10px or 12px, if it’s possible make it bigger. Have you noticed how well-readable are the posts here on Medium? Well, the font size is 22px.
Contrast
Colors and contrast combined together are the third element of my personal typography formula: text exist to be read, allow the reader to do it in the more comfortable way. To check if the colors are properly balanced and the contrast is good there is a little trick: take a screenshot of your page, convert the image in a grey-scale and ask yourself “Can I easily read the text?”. The answer MUST be yes otherwise you have done something wrong. How could be someone interested in your blog or in your site if your design makes the text difficult to read?
Space
Line-height and blank spaces are also important in typography so don’t be afraid of them: your text need to breathe.
Blank spaces are also useful to shift the focus to some specific content: use them to drive your readers’ attention on what you want to communicate. As regards the line-height the standard rule for web typography is to set it at least at 140% of your text size.
Remember, these are not rules but only my personal consideration on typography. I’m quite sure that combining in a good way the 4 elements — Font, Size, Contrast and Space — you will surely make your content neat and attractive.
I’ve never thought about the influence of typography on web design until I decided to create my personal blog (www.digitaljar.net) and to manage the entire graphic design. I love my project and my wish is to make the reader enjoy Digital Jar as I do, the chance to browse it in a quick and comfy way is the aim of my entire work and the try to make it possible is the source of this article.
- S.
