How to Use Typography in Web Design: Tips for Effective Communication
4 min readWhat 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 Event Video Production Company In Dubai 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 subject? 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 in the construction phase of a website.
Aim for sobriety, create a functional user experience for the user. How to choose the right font for your blog? Go for a sans serif sans serif sans serif (no stretches). This light, no-nonsense solution is ideal for computer, smartphone and tablet screens.
By moving in this direction you can improve the readability of a content. Without forgetting that the sans serif font family harmonizes better with different fonts.
The 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 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 experts, 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 center 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, use it for quotes. Right alignment can be fine for headlines 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
A 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 honor the quality of the content and the reader who gives you a gift of his most precious asset: time.
About Author
