Typography is the way a template works with typeface, size, and text weight. Good choices improve legibility before you add a single effect.
What you will learn
- Select a font for body copy and headings.
- Distinguish between system, Google, and custom font-family options.
- Set up moderate font sizes and weights.
- Understand network dependencies associated with Google Fonts.
Three font sources
System fonts use typefaces readily available on the visitor's device. They load instantly and have no external network dependencies, though appearance may vary slightly across operating systems. Google Fonts offers a broader catalog, but it requires an available service, server configuration, and network loading of the font when rendering the final template.
A custom font-family is a CSS text list of font family names. The editor itself does not upload a licensed font file this way. If the family is not actually available on the destination site, the browser falls back to a backup font from the list.
Setting up readable typography
- In global styles, select the font for body copy first. A readable sans-serif family is a safe choice for your first website.
- For headings, choose the same font with a different weight or a single restrained secondary family.
- Set base font size, line height, and font weight. Evaluate longer body paragraphs, not just large headlines.
- For recognized Google Fonts, keep in mind that the export loads a fixed set of weights: 400, 500, 600, and 700. Selecting fewer options in the editor does not reduce the network payload.
- Inspect characters, numbers, buttons, menus, and form samples. Not every font performs well across all languages.
- Switch to mobile preview to make sure headings do not wrap awkwardly one word per line.
What happens when the service is unavailable
The Google Fonts catalog depends on the network. If unavailable, the editor provides a fixed fallback font list. For full preview rendering, the application may temporarily cache font files via the same origin. However, the export does not package Google font files; the final template relies on a remote stylesheet.
Therefore, always specify a sensible fallback, such as Arial, sans-serif. Also consider privacy, loading performance, and target site policies. For projects that must not contact external font services, opt for a system font stack or a font served locally on the destination site through another authorized method.
Less is more
One font family for body text and optionally a second for headings is usually sufficient. Every additional family adds visual clutter and slows down page loading.
Testing with real accented text
In your preview content, insert a heading with accented characters, a longer paragraph, numbers, and short button text. Pay close attention to accented glyphs as well as uppercase and lowercase letter combinations. Some decorative fonts look great in English slogans but become hard to read with certain special characters or longer words.
Evaluate sizing on mobile screens as well. Headings can have a smaller responsive font size, while body text should never be excessively small. After deployment, verify loading speeds and the brief moment before the external font renders: fallbacks should not cause dramatic layout shifts.