How do I choose fonts and colours for a multilingual website?

Choose a website font by testing the languages, content and customer tasks it must support. Then choose colours by their role and readable contrast. An expressive heading may attract attention, but body copy, prices and buttons must remain easy to understand. There is no universal typeface or colour that guarantees retention or sales.

Start with the job, not a font trend

Write down the audience, the decision they need to make and the places where text appears. A manufacturing buyer scans specifications; a visitor booking a service looks for availability and the next step. Make a specimen containing a real service paragraph, a price, a navigation label, a form error and a call to action. A beautiful alphabet on a poster is not enough evidence for a working interface.

Which font styles should do which jobs?

• Body text: compare a restrained sans serif and a text serif using the same paragraph. Judge character distinction and reading comfort at the actual size.
• Headings: use weight, size and spacing to establish priority before adding another family.
• Display or script: reserve expressive styles for short passages, after testing every required character. Avoid using them for prices, instructions or long articles.
• Numbers: compare 0/O and 1/I/l, decimals, currency and table alignment. A font that works for a slogan may fail in a quotation table.

Which families should I try for each language?

The following are candidates to evaluate, not a ranking or a promise that every downloadable subset covers your content. Check the exact font files, licence and local letterforms before selecting a family.

A single brand can use coordinated script-specific families. Matching tone, apparent size and spacing is more useful than forcing one font file to cover every writing system. Mark page languages correctly; language metadata cannot create glyphs missing from a font.

How do colours support attention without hiding content?

Give colours jobs: page surface, primary text, secondary text, action and feedback. Make the main action distinguishable without turning every heading into an accent. Test button labels, links, disabled controls, focus rings and errors on their actual backgrounds, including dark mode. Explain success and failure with words or icons as well as colour. Check the requirements in the contrast guide.

How can I test the shortlist for free?

1. Open Google Fonts, paste the same real multilingual specimen into each candidate and compare the weights you will use.
2. Build two otherwise identical page mock-ups. Keep copy and layout fixed so you are comparing typography rather than different offers.
3. Check text/background pairs with WebAIM Contrast Checker and inspect the actual rendered font in browser developer tools.
4. Test a narrow phone view, text zoom, a slow connection and the fallback font. Look for clipped diacritics, broken buttons and shifting lines.
5. Ask representative readers to find the price, explain the offer and identify the next step. Record completion and misunderstandings before asking which design they prefer.

How should we judge the result?

Separate attention, comprehension and business outcomes. A longer visit can mean interest or confusion. Use task completion, useful enquiries and return visits with appropriate consent, and compare variants only with enough evidence. Keep a short decision record: candidate, languages tested, failures, chosen styles and remaining risks. Connect it to the brand identity brief so campaign media and the website follow the same rules.