The typeface is the first thing a visitor reads on your website and the last thing they think about. They only notice it when it gets in the way: when the price list is hard to make out on a phone, when the ß in a heading comes from a different font, or when the page jumps during loading because the house font arrives after the text. The choice is huge, with free font families available by the hundred, and that is exactly why a method beats gut feeling. This article shows how to choose one or two families, pair headings with body text, check figures and umlauts, and stay fast with only a few weights. How to embed fonts without sending visitor data to third-party servers is covered in our article on external content, maps and fonts; this one deals with the design decision that comes before it.
Type is reading matter, not decoration
Web fonts have long been the norm. In 2025, around 88 percent (HTTP Archive Web Almanac 2025) of the websites studied loaded web font files, up from about 87 percent (HTTP Archive Web Almanac 2025) in 2024. Only a minority of around 12 percent (HTTP Archive Web Almanac 2025) stick to the fonts that are installed on every device anyway. So the question is rarely whether a website gets its own typeface, but which one and how many. That is where the typical mistakes happen: a heading face that ends up in body text, four families on one page because every template brought its own, or a thin weight that looks elegant on a laptop and disappears on a phone in the sun.
On a business website, type has three jobs, and all three are down-to-earth. It has to keep body text legible at small sizes on a phone. It has to show figures, prices, phone numbers and opening hours unambiguously. And it has to set German text completely, with umlauts, ß and proper typographic quotation marks. The personality of the brand comes after that, usually through the headings. Choosing in this order rarely leads to a typeface that gets replaced three months later because customers cannot read the price list or mistype the phone number.
One or two families are enough
A font family is one typeface with all its variants: light, regular, bold and italic weights and styles. A business website needs one or two families.
A single family looks calm and consistent as long as it offers enough weights for headings and text. Two families add character: a distinctive one for headings, a calm one for body text. The XICflow documentation sums it up: two typefaces are enough, and more rarely looks better (XICflow documentation). A third family rarely adds expression, but it reliably adds files, coordination and chances for two typefaces to look so alike that they read as a mistake.
Scroll table sideways
| Set-up | When it fits | What to watch |
|---|---|---|
| One family for everything | Calm, text-heavy pages, businesses with a matter-of-fact image | At least one regular and one bold weight so headings stand out |
| Two families: distinctive and calm | Brands with their own character, such as trades, restaurants or practices | A clear difference in form, not just in size |
| System font | Customer portals, tools, pages where speed is the top priority | Looks slightly different on every device, no fixed brand appearance |
| Display or handwriting face | Headings, short lines, elements close to the logo | Not in body text, not in forms or price lists |
The system font is a real option, not a fallback of last resort. The system-ui value uses the interface font of the visitor's operating system and needs no font file at all. Around 9.7 percent (HTTP Archive Web Almanac 2025) of desktop pages and 9.3 percent (HTTP Archive Web Almanac 2025) of mobile pages now use it. The price: the page looks different on a phone than on a laptop, lines break in different places, and the brand gets no handwriting of its own. For a website that is meant to sell and be recognised, a deliberately chosen web font is usually the better choice; for a customer portal or an internal tool it often is not.
Pairing headings and body text
The most important rule for pairing is contrast rather than similarity. Two sans-serif typefaces that differ only in details do not look like a design decision side by side, they look like a glitch in the template.
Two approaches have proven themselves. The first pairs a serif face for headings with a sans-serif for text, or the other way round; the difference is visible at once and both roles stay clearly separate. The second uses a single family and separates the roles by weight: headings in bold or semibold, body text in the regular weight. If you are unsure, take this route, because it can hardly go wrong. The specimen card above shows both approaches with the same heading and the same text.
- Similar proportions: the lowercase letters of both typefaces should look roughly the same height, otherwise body text looks too small or too large next to the heading
- Same basic attitude: a sober text face suits a clear heading face, a playful heading needs especially calm body text
- Use display and handwriting faces only for short lines: headings, quotes, a promotional band, no paragraphs
- Test the heading face with long German words such as “Öffnungszeiten” or “Gebäudereinigung” before you commit to it
- Look at both typefaces next to the real logo, not next to a placeholder
- Give every typeface one role and stick to it: no third font for buttons, the footer or a promotional banner
The long-word test
Readable at small sizes
Whether a text face is any good is decided not in the heading but in the small print: price notes, form labels and the footer.
Highly legible text faces have generous lowercase height, open shapes in letters such as a, e and c, and characters that are easy to tell apart. A quick test is the sequence “Il1 O0”: if capital I, lowercase l and the figure 1 look the same, every invoice number becomes a guessing game. Be careful with very thin weights: a light weight quickly loses contrast on a pale background, even if the colour looks right in the draft. How to check text colours for contrast is shown in the article on brand colours and contrast; which font sizes work on a phone is covered in the article on mobile usability.
The Web Content Accessibility Guidelines set two requirements that relate directly to the choice of typeface. Under success criterion 1.4.4, text must be resizable without assistive technology up to 200 percent (W3C, WCAG 2.2) without loss of content or functionality. Under success criterion 1.4.12, nothing may be lost when users set line height to 1.5 times (W3C, WCAG 2.2) the font size, spacing after paragraphs to 2 times (W3C, WCAG 2.2), letter spacing to 0.12 times (W3C, WCAG 2.2) and word spacing to 0.16 times (W3C, WCAG 2.2). For your choice of typeface this means: a very wide face that only just fits its buttons and boxes at default settings is the first to break under these settings. Fixed heights for text boxes are therefore just as risky as typefaces whose characters almost touch at normal spacing. What role WCAG 2.2 plays under the German Accessibility Strengthening Act is explained in the article on accessible websites for businesses.
For longer texts, success criterion 1.4.8 at the highest level AAA gives further guide values that also work as a voluntary benchmark: lines of no more than 80 characters (W3C, WCAG 2.2), line spacing of at least space-and-a-half (W3C, WCAG 2.2) within paragraphs, and text that is not justified (W3C, WCAG 2.2). Justified text is especially tricky in German, because long compound words tear wide gaps into lines on narrow screens. Automatic hyphenation helps; the browser handles it when the page language is marked up with lang="de" and the hyphens: auto property is set. It is rarely used: only about 10.5 percent (HTTP Archive Web Almanac 2025) of pages set hyphens: auto in their CSS. Three more things cost readability: paragraphs in capitals, which rob the eye of word shapes, italic body text, which becomes restless at small sizes, and light grey text on a white background.
Check figures, umlauts and special characters
Many typefaces are presented with English sample lines, and those do not reveal what is missing for German.
Before a typeface is settled, your draft therefore needs its own test line: “Größe, Öffnungszeiten, 0 1 7” shows umlauts, ß, the comma and figures that are easily confused at a glance. Add typographic quotation marks, the en dash, the euro sign and the capital ẞ. The official German spelling rules explicitly allow both forms when writing in capitals, the capital ẞ and the double SS (Rat für deutsche Rechtschreibung, section 25 E3). If you set headings or labels in capitals, you need to know whether your typeface contains the capital ẞ. If a character is missing, the browser switches to a fallback font for exactly that character, and a letter in a foreign shape appears in the middle of a word.
Figures deserve a second look. Many typefaces offer two kinds: proportional figures, which flow harmoniously in running text, and tabular figures, which all have the same width and line up neatly in price lists, opening hours and tables. Among the fonts found on the web that have OpenType features, around 20 percent (HTTP Archive Web Almanac 2025) include tabular figures as a switchable feature. They are turned on with font-variant-numeric: tabular-nums (W3C, CSS Fonts Module Level 4), which so far happens on only 3.2 to 3.3 percent (HTTP Archive Web Almanac 2025) of pages. If you show a price list with amounts stacked in a column, check whether the typeface's figures are of equal width by default or can be switched; otherwise decimal commas and euro amounts sit crookedly under each other, and the list looks untidy even though every number is right.
/* Mark up the language so hyphenation works: <html lang="de"> */
body {
font-family: "Your text face", system-ui, sans-serif;
line-height: 1.5;
}
p {
max-width: 65ch; /* keep lines from getting too long */
hyphens: auto; /* hyphenation based on the page language */
}
.price-list td,
.opening-hours {
font-variant-numeric: tabular-nums; /* figures of equal width */
}Every weight is a file
A weight, or style, is one stroke thickness or slant of a family: regular, semibold, bold, italic. With classic web fonts, every weight is a separate file that the browser downloads on the first visit.
A typical web font file is 30 to 40 KB (HTTP Archive Web Almanac 2025) compressed, and many websites load several of them. Two families with two weights each make four files; embed a whole family with all its weights and italics and you quickly reach eight or more, of which the page may use two. The rule of thumb for business websites: one regular weight for text, one bold for emphasis and subheadings, and one weight of the heading face if there is a second family. Italic only if you actually use it.
Text: one regular weight
The regular weight carries paragraphs, lists, form fields and the footer. It has to stay calm and unambiguous at small sizes, because the readability of the whole page depends on it.
Emphasis: one bold weight
Semibold or bold for subheadings, prices and important notes. One strong weight is enough; a second one is barely noticeable next to the first and still costs a file.
Headings: one weight of the second family
If there is a separate heading face, it usually needs only one weight. Headings rarely appear in several weights, so every extra weight would be a file without a job.
The file format is largely settled: about 65 percent (HTTP Archive Web Almanac 2025) of requested font files are WOFF2, the format with the better compression. Variable fonts, which combine many weights in one file, are growing alongside it; 39.4 percent (HTTP Archive Web Almanac 2025) of desktop and 41.3 percent (HTTP Archive Web Almanac 2025) of mobile websites use at least one. A variable file is usually larger than a single weight but replaces several. It pays off if you really use three or more weights; for two weights, two lean single files are often the smaller solution. Every file also comes with a licence. Around 64 percent (HTTP Archive Web Almanac 2025) of the websites studied use at least one font under the SIL Open Font License, which allows use, modification and redistribution and therefore also hosting on your own server. With purchased fonts this cannot be taken for granted: many licences distinguish between print, desktop and web, and some require a separate add-on for embedding in a website. If you bring a house typeface over from print, check before the relaunch whether the web licence is included.
Loading without the page jumping
If a web font has not arrived yet, the browser has to decide: show invisible text and wait, or draw a fallback font right away and swap later. The font-display property controls this.
For swap, the specification recommends, in most cases, a very short block period of 100 milliseconds (W3C, CSS Fonts Module Level 4) or less, after which the font can be swapped in at any time; for block it recommends, again for most cases, a block period of 3 seconds (W3C, CSS Fonts Module Level 4), during which the text stays invisible while the font is missing. About half (HTTP Archive Web Almanac 2025) of the pages using web fonts set swap for at least one font. The swap has a side effect: if the fallback is wider or narrower than the real typeface, lines and paragraphs shift as soon as the real font arrives, and anyone who is reading loses their place.
The stricter option is optional. If the font is not there at first paint, the fallback stays for that page view; according to the specification, such a font must not make the layout jump as it loads (W3C, CSS Fonts Module Level 4). To make sure it usually arrives in time anyway, the most important file is requested early with a preload hint. So far optional is hardly used, on about 0.4 to 0.5 percent (HTTP Archive Web Almanac 2025) of pages. What delivery, caching and preloading mean for loading time overall is explained in the article on static delivery and PageSpeed. Around 72 percent (HTTP Archive Web Almanac 2025) of websites now serve at least one font file from their own server, and the Web Almanac sees the balance tilting further towards hosting fonts exclusively in-house, likely for performance and privacy reasons. What data protection requires here is explained in the article on fonts without data leaks.
Setting typefaces in XICflow
In XICflow you choose typefaces once for the whole website, separated into two roles: one for "Headings" and one for "Body text" (XICflow documentation).
You can choose from 775 open-source font families (XICflow features page) with search and a category filter, split into 272 sans-serif, 147 serif, 191 display, 128 handwriting and 37 monospace families (XICflow documentation). For each family you decide which weights ship; the default is the regular weight 400 plus 600 and 700 where the family has them (XICflow documentation). Every extra weight is delivered with the site, so it pays to tick only the weights your pages really use. Where the setting lives is shown in the brand and design documentation; what the design system offers beyond that is in the Flow Design feature overview.
On publish, the build fetches only the chosen families and weights and stores them as woff2 with your website (XICflow features page); no font is loaded from third-party servers when someone visits. The character sets for Latin and extended Latin are included, covering umlauts, ß and Western European special characters. The delivered page uses font-display: optional and preloads the main weight of each family so the text does not shift during loading. One note for choosing: the preview line in the list shows your computer's fallback font as long as the family is not installed there; you see the real typeface after publishing (XICflow documentation). So check your test line on the published page, on a phone and on a computer. How typeface, colour and layout work together in finished websites is shown in the demos.
The type check before going live
- Pick two or three candidates per role and allow display or handwriting faces for headings only
- Set a real heading with the longest word from your offer and look at it full size on a phone
- Check the test line “Größe, Öffnungszeiten, 0 1 7” and the sequence “Il1 O0” in body text, plus quotation marks, en dash, euro sign and the capital ẞ
- Set a price list or your opening hours and check whether the figures line up neatly
- Zoom the text to 200 percent (W3C, WCAG 2.2) in the browser and increase line and letter spacing: nothing may be cut off or overlap
- Count the weights that are actually shipped and deselect everything that has no job
- Load the page on an older phone with a slow connection and watch whether text shifts
Fewer typefaces, a clearer page