Search Engine Optimization (SEO)

How to intelligently use typography on a website

27 June 2019 Maxence Pezzetta
|

Communication plays an important role in the creative process. In the context of web design, this often means using textual language. The form it takes, its typography, therefore has a direct impact on its effectiveness in conveying information. This is a major aspect since the ultimate goal of a website is to enable users to achieve their ends as easily as possible.

In this sense, choosing the perfect typography makes reading enjoyable and effortless. In other words, carefully selecting fonts when creating websites will enhance the user experience.

Here are some rules to consider in terms of typography, to make your content accessible and aesthetically pleasing.

Table of content

Choosing a standard typography

There are practically limitless free fonts available online. These enable you to create modern and unexpected designs. However, this approach presents a conundrum: Internet users are more familiar with standard script fonts that they can read faster.

Opt for the classics

Unless you desperately need an original identity or want to offer an immersive experience, designing your website with classic fonts is a good idea. That's why the traditional Arial, Calibri and Times are so popular. They help focus the reader's attention on the content, rather than the form. For those who still want to have an original font consider choosing a font in the same style as those standards.

Keep the number of fonts to a minimum

In general, it is also recommended to limit the number of typographies to the bare minimum when developing an application or a website. Choose one, or two, and apply them to the entire project. If you can’t help but use many, be aware of each one’s visual impact. A very large font will overshadow another with thin lettering.

Make sure your typography is readable on small screens

It’s important to remember that people will have access to your website with devices that have screens with different sizes and resolutions.

Avoid confusion

Ensuring that the chosen font is easily readable is essential, regardless of format. Certain typographies can create confusion when uppercase and lowercase letters have a similar appearance. An example is the similarity between a certain font’s capital “i” (I) and lowercase “L” (l).

Limit the length of lines

As an increasing number of people read on mobile devices, having the right number of characters on each line is also a big challenge. While a total of about 60 characters per line should allow optimal reading on a standard computer monitor, this number decreases to 30-40 for a smartphone screen. On this point, however, your web designer’s experience with responsive web design will make all the difference.

Create ample line spacing

In typography, line spacing is the term for the spacing between two lines of text. By increasing this distance, you increase vertical white space between lines, greatly improving readability. As a general rule, the line spacing should be about 30% higher than the height of the characters for good comprehension. Proper use of white space will provide your readers with editorial content that is 20% easier to learn than if space is lacking.

Consider typography colors

Your color scheme will also have an impact on how information is absorbed by your website visitors.

Emphasize contrast

Never use similar colors for text and background. The more visible the text is, the more the reader can scan the page and read it effectively and quickly. Once you have made your choice of color, it is absolutely necessary to test it with real users on most devices. If one of the tests demonstrates a problem with reading your content, then you can be sure that users will also struggle.

Avoid red or green text

Color blindness is a common condition, especially for men. For this reason, it is recommended to use other hints, in addition to color, to help important elements stand out on your website. Also avoid using red and green colors to convey information, as colorblind people have the most difficulty in differentiating these two colors.

Conclusion

Making the right typography choices can give your website a clean, professional look. On the other hand, bad typographic choices can distract and annoy readers. Your chosen font should therefore support the content and not add to the user's cognitive load.

To help you with your typography selection, or to assist you in your website project, you can count on the My Little Big Web team. Our team’s know-how is matched only by their desire to provide a first-rate service. Contact them today!

Maxence Pezzetta
Cofondateur et Spécialiste Web Marketing et acquisition de clients Diplômé d’une double Maîtrise en Marketing et Communication, Max cumule plus de 10 ans d’expérience en Marketing digital. Ancien employé de Microsoft, sa mission est de « mettre le Web à la portée de tous » pour aider les entreprises à améliorer leur présence en ligne.
Send a message
Free Quote

More reading

Search Engine Optimization (SEO) ||||

What are heading tags and how do you optimize them?

Search Engine Optimization (SEO) ||||

On-site SEO optimization: The best practices for your website

Search Engine Optimization (SEO) optimisation page produit||||definition fiche produit|blogue boutique en ligne|maillage interne page produit|balise titre et meta description page produit|image page produit|description page produit|avis page produit|conditions d'achat page produit|suggestions de produits complémentaire page produit|titre rabais page produit|page produit description technique|temps de chargement page produit|appel à l'action fiche produit|composantes page produit|titre page produit

Product page optimization powered by SEO and UX: 7 must-have elements

Search Engine Optimization (SEO) |

7 alternative search engines to Google

Search Engine Optimization (SEO) ||||||

How to optimize your site for Google’s local pack

Search Engine Optimization (SEO)

E-Reputation clean up: Improve your online image with 5 helpful tips

Youpi!
Scroll top