How to Use Typography in Web Design: Tips for Effective Communication
What color should a font have? What is its optimal size? How to manage whitespace and text alignment on a web page? These questions are legitimate and need to be answered.
If you have decided to become a web designer you must answer these questions and know how to use typography.
But what is typography? I’ll leave you to the definition by Patrick J. Lynch and Sarah Horton from the Web book. Style guide. Website Design: ” Typography is the balance and interrelation between the shape of the letters on the page, a verbal and visual equation that helps the reader understand the shape and absorb the substance of the content. “
The concept is clear. If you dominate typography, you can hierarchize content, improve readability and achieve a balanced design. Ultimately, you can create effective communication.
How about delving into the topic? Find out how to use typography in web design.
Web Typography: Limit the number of characters
How to use typography in web design? Here is the first suggestion: do not exceed the number of fonts when building a website like Amazon Ungated Categories service.
Aim for sobriety, and create a functional user experience for the user. How to choose the right font for your blog? Go for a sans serif (no stretches). This lightweight, no-nonsense solution is ideal for computer, smartphone and tablet screens.
By moving in this direction you can improve the readability of content. Without forgetting that the sans serif font family harmonizes better with different fonts.
Serifs, on the other hand, are less used and are suitable for titles, subtitles and print media.
You can mix both in moderation but make sure they complement each other and are pleasing to the reader. The doubt that assails those who have recently worked as a web designer: how many different fonts to use in a project ?
At most three:
- A font for the body;
- A font for the menu;
- A font for the headings.
Where to find effective fonts for the blog or website? I leave you two free and interesting resources. I’m talking about Google Fonts and FontSquirell.
The importance of white space
Using typography in web design doesn’t just define the use of fonts. White space has its importance: it gives order to a page, increases the understanding of the text and enhances the font.
This tool, in fact, performs several functions: it prevents typefaces from colliding with visual elements, lets the text breathe, positions the brand and highlights the message.
Choosing a good font is always accompanied by carefully selected white space. Never underestimate this tool for isolating concepts and dividing the text into paragraphs.
The right amount of characters on each line
To optimize the readability of an online text you need to be aware of the right amount of marks on each line. What is the perfect number? According to the Baymard Institute, 60 characters is the preferred option.
On the other hand, a line that is too short interrupts the reading rhythm, conversely, a very long line can strain the gaze and concentration. To guide your work in the best possible way at this stage, you can adjust yourself as follows:
- For the desktop, the ideal number of types per row is between 50 and 75.
- From mobile the ideal number of types per row is between 30 and 40.
Right, left or centre alignment?
Using typography in web design also means thinking about alignment. The optimal one starts from the left – creates a start and end point .
While the middle one gives a feeling of balance but stretches over too many lines, take advantage of it for quotes. Right alignment can be fine for headings but can make it difficult to read if you decide to apply it to an entire page.
The leading, a question of the right distance
Leading is the horizontal space between two lines. In this situation, using typography in web design means being able to calibrate the optimal distance between one line and another.
So as to avoid an excessive approach of the upper signs with the lower ones. My advice? Select a line spacing between 2 and 5 points more than the font size .
Pay attention to the contrast between background and character
Good use of typography in web design involves some contrast between the font color and the page background. This way the user scans the text quickly and effortlessly.
To understand if you have done a good job from this point of view, I suggest you do some tests.
Using typography in web design: your experience
Using typography in web design correctly is a must. You have to honour the quality of the content and the reader who gives you a gift of his most precious asset: time.
