Before we begin with the design, it's advisable to determine the type of font we will use.
It's generally not advisable to use too many different font styles, as it can make the content appear cluttered. Opt for easily readable fonts. Even if you have a beautiful script font, it might be better to replace it with a simpler one at times.
Also, check if the fonts include all necessary characters. Sometimes, our chosen font may have special characters that are not available in all fonts (across different EU countries). In such cases, we may need to find a font with additional characters, like "latin extended."
Once you have a shortlist of fonts, choose one or two font types for use: one for headings (h1, h2, h3, etc.) and another for descriptive text, or use a single font in various weights and sizes for both headings and descriptions.
Ensure that the chosen font can be used on the website as a web font. Otherwise, we need to adjust the font for web use and check its usage rights. Also pay attention to privacy: if you load a font from Google's servers (Google Fonts), the visitor's IP address is sent to Google; in 2022 a German court of first instance ruled that this is a violation (it awarded the visitor damages). Host fonts on your own server.
With font types selected and their use determined, set sizes and spacings for different sections. Typically, the most significant title is h1, used for category headings, article titles, individual pages, etc. Start with the size of h1 and then proceed to h2, h3, and so on. Ensure that each heading is slightly smaller than the previous one but never smaller than the main content size. The heading should stand out on the page but still be part of the content.
When determining spacings, always ensure an appropriate line height. If lines are too close together, reading web content becomes challenging. If they are too far apart, it gives a sense of disconnectedness between lines.
Frequently asked questions
The font is one of the first elements that defines the feel of the site. A hard-to-read or inappropriate font immediately reduces trust. Sans-serif fonts (Arial, Roboto, Open Sans) are recommended for the web due to better on-screen readability.
Usually at most two fonts: one for headings and one for body text (or a single font in different weights). More fonts create visual chaos and reduce coherence. For privacy reasons, host Google Fonts on your own server.
Body text should be large enough for comfortable reading (usually around 16 px), on mobile devices too. A font that is too small makes reading harder, especially for older readers. Headings should be noticeably larger than body text for a clear hierarchy.
Non-standard fonts are loaded from the server or CDN (Google Fonts) and slightly slow loading. We recommend hosting fonts on your own server (for privacy and speed), preloading key fonts and limiting to 1-2 font families for minimal speed impact.
Indirectly - a readable font improves the visitor experience. Google does not directly evaluate fonts, but text must be readable for crawler bots and for accessibility.
My name is Anže, I am a certified Magento solution expert and the maker of several award-winning online stores. I am the architect of all Degriz projects.
Write to me →
Reading