A website can look perfect in English and fall apart the moment someone switches it to German. Buttons overflow, headlines wrap onto three lines, menus collide with the logo and a carefully balanced hero section suddenly looks crowded.

These problems are rarely the translator's fault. They are design decisions made without other languages in mind. The best multilingual websites are planned for translation before the first wireframe is drawn.

Text Expansion Is the First Rule

Different languages need different amounts of space to say the same thing. German and French often run 20 to 35 percent longer than English. Finnish and Russian words can be very long. Chinese and Japanese, on the other hand, usually take up less horizontal space but need taller line heights for readability.

Designers should build flexible components from the start:

• Buttons that grow with their labels instead of fixed widths.
• Navigation that can collapse gracefully when items get longer.
• Headlines that look good on one, two or three lines.
• Cards and grids that handle uneven text lengths.

A quick test is to replace every English string with a version 40 percent longer and see what breaks. It takes an afternoon and saves weeks of fixes later.

Choose Fonts That Speak Every Language

That elegant display font from the brand guidelines may not include Cyrillic, Greek or Vietnamese characters. When a missing glyph appears, the browser falls back to a system font, and the design looks broken.

Before committing to a typeface, check its language support. Many modern font families cover Latin, Cyrillic and Greek. For Arabic, Hebrew, Chinese or Hindi, you will usually need a matching companion font chosen with care so the brand still feels consistent.

Plan for Right-to-Left Languages

Arabic and Hebrew read from right to left, and a proper layout mirrors almost everything: navigation, icons with direction, progress bars and image placement. Using logical CSS properties such as margin-inline-start instead of margin-left makes this much easier. The W3C Internationalization Activity has excellent free guides on direction, encoding and language tagging.

Never Put Text Inside Images

It is tempting to design a beautiful banner with the headline baked into the image. But every new language then requires a new graphic. Keep text in HTML and layer it over images with CSS. Your translators, your developers and your SEO will thank you.

Separate Content From Code

From a development point of view, multilingual sites work best when every visible string lives outside the templates. Modern frameworks support translation files or content management systems with language fields. Hard-coded text in components is the number one cause of half-translated pages.

For agencies managing many client sites, connecting the CMS to a web based translation management system is a game changer. New pages are sent for translation automatically, translators work with context, and approved content flows back into the site without anyone copying and pasting.

Work With Real Translations During Design

Lorem ipsum hides problems. Whenever possible, test layouts with real translated copy, at least for the most important pages. If a client plans to launch in Ukraine, for example, a sample english to ukrainian translation of the homepage will quickly show how Cyrillic text, longer words and different punctuation behave in your layout.

The same applies to French, which many European and Canadian businesses need. Professional french translation services deliver copy that fits the tone of the brand, and designers can then fine-tune spacing, hyphenation and line breaks for the French version.

Language Switchers Done Right

A good language switcher is easy to find and easy to understand. Some best practices:

• Show language names in their own language, such as Deutsch or Français.
• Avoid using flags, since languages are not countries.
• Keep the switcher in the same place on every page.
• Take users to the same page in the new language, not back to the homepage.

Branding Across Cultures

Colours, symbols and imagery carry different meanings around the world. White is associated with weddings in some cultures and mourning in others. Hand gestures that seem friendly in one country can be rude elsewhere. Strong brands keep their core identity but adapt photography and examples so local audiences feel recognised.

Performance and SEO

Every language version needs its own URLs, proper hreflang tags and translated metadata. Page titles, descriptions, image alt text and structured data should all be localised. Fonts for additional scripts add weight, so load only the character subsets each language needs.

A Checklist Before Launch

Before a multilingual site goes live, run through these checks: test every template with the longest language, verify forms and error messages, confirm date, currency and phone formats, check email notifications, and ask native speakers to click through the key journeys.

Multilingual design is not a feature you add at the end, it is a mindset you adopt at the start. Agencies that build this way deliver websites that look great in every language, and clients who can grow into new markets without a redesign.