English fits in 100 pixels. German needs 140.
Not a quirk. It’s a consistent pattern that breaks layouts across every multilingual website that doesn’t plan for it. Text expansion from English to other languages varies dramatically, and most design systems are built around English assumptions.
German runs about 30% longer than English on average. Finnish can hit 40% longer. Some Asian languages compress shorter. Arabic reads right to left and requires entirely different layout logic.
Building websites for multiple languages isn’t translation. It’s engineering flexible systems that accommodate radically different content characteristics.
Text Expansion Breaks Layouts
A button that fits “Submit” comfortably panics when it needs to display “Einreichen” or “Soumettre.”
Navigation items that line up perfectly in English collide and wrap when translated. Headlines that looked elegant become cramped or overflow. Form labels that aligned neatly now stack awkwardly.
The solution isn’t making everything bigger. That wastes space for shorter languages. The solution is flexible containers that adapt.
CSS flexbox and grid help. Elements that distribute space dynamically handle varying content lengths better than fixed-width containers. Text truncation with tooltips provides fallback when content truly can’t fit.
Testing with pseudolocalization helps catch problems early. Tools that expand English text by adding characters show where layouts will break without waiting for actual translations.
Real translations should drive final testing. Machine-expanded text approximates but doesn’t match real translation patterns. Budget time for layout adjustments after translations arrive.
Typography Across Scripts
English uses Latin characters. A font designed for Latin might not support Cyrillic, Greek, Arabic, or Chinese.
Simple font stacks work when all your languages share a script. A site in English, French, and Spanish can use most Latin fonts without concern.
Add Russian and you need Cyrillic support. Add Japanese and you need extensive character sets that most Western fonts lack. Add Arabic and you need fonts designed for connected, right-to-left script with complex ligatures.
Font fallback chains become necessary. Specify your preferred font, then fallback fonts for scripts the primary font doesn’t support. The browser substitutes when needed.
Visual consistency suffers when fallback fonts activate. A carefully chosen Latin font paired with a system default for Japanese creates jarring inconsistency. For serious multilingual presence, font selection must consider all languages from the start.
Font licensing multiplies costs. Commercial fonts often license per language or per character set. A site in twelve languages might need twelve font licenses for full coverage.
Right-to-Left Layout Restructuring
Arabic, Hebrew, Farsi, and Urdu read right to left. More than text direction. It’s about spatial thinking.
Navigation that sits on the left should move to the right. Progress indicators that fill left-to-right should fill right-to-left. Arrows pointing right for “next” should point left.
The entire interface mirrors. Users expect the starting point on the right, the ending point on the left. Visual flow reverses.
CSS logical properties make this more manageable. Instead of margin-left use margin-inline-start. The browser interprets “start” based on text direction. One stylesheet handles both directions.
Some elements shouldn’t mirror. Logos typically stay oriented regardless of direction. Some icons shouldn’t flip. Phone numbers might stay left-to-right even in RTL contexts.
Bidirectional content creates complexity within complexity. An Arabic page with English product names embedded needs both directions simultaneously. CSS handles this but designers must plan for mixed-direction scenarios.
Content Management Complexity
Managing content in one language is straightforward. Managing content in twelve languages is a workflow nightmare without proper systems.
Translation status tracking becomes critical. Which content is translated? Which translations are outdated because the source changed? Which languages are complete versus in progress?
Version synchronization prevents content drift. When the English page updates, all translations should flag for review. Without tracking, translations become stale while source content evolves.
Workflow routing coordinates human effort. Who approves translations? Who handles review cycles? Who resolves questions translators have about source content?
CMS architecture must support multilingual content models. Not all CMS platforms handle multiple languages well. Some treat translations as separate pages. Others link translations as versions of single content items. The architecture affects workflow efficiency.
Translation memory systems reduce repeated work. Phrases translated once can auto-populate when they recur. For sites with repetitive content, translation memory significantly reduces costs.
Cultural Adaptation Beyond Words
Translation changes words. Localization changes context.
Images that feature American settings don’t resonate in Japan. Examples that reference baseball confuse cricket countries. Metaphors that rely on English idioms fail across languages.
Holiday references differ. American Thanksgiving means nothing outside the US. Christmas timing and significance varies. Ramadan matters in some markets and not others.
Humor is notoriously untranslatable. Jokes that land in English often fall flat or offend when translated. Playing it safer in source content prevents localization headaches.
Currency, dates, measurements, and addresses follow regional conventions. $99 makes sense in the US. In Germany, users expect 99 €. Dates in month/day/year order confuse most of the world.
Legal requirements vary. Privacy policies need regional versions. Required disclosures differ by jurisdiction. Cookie consent implementations vary by regulation.
Machine Translation Realities
Machine translation quality has improved dramatically. For some content types, machine translation with human post-editing rivals pure human translation at lower cost.
For marketing content, brand voice, and nuanced communication, human translation usually remains superior. The machine produces correct text that lacks the soul of good writing.
For user-generated content at scale, machine translation may be the only practical option. Users don’t expect perfection from translated reviews or forum posts.
Hybrid approaches are common. Machine translate everything, then human-review high-visibility content. Prioritize quality where it matters most, accept good-enough elsewhere.
Quality varies by language pair. Machine translation between similar languages like English to Spanish outperforms translation between distant languages like English to Japanese. Set expectations accordingly.
Language Switcher Design
Users need to find and use the language switcher.
Common placements: header corner, footer, or both. Users have learned to look in these locations. Unconventional placement forces users to hunt.
Display options: flags, language names in native script, language codes. Flags are problematic since English isn’t represented by a flag, Spanish is spoken in many countries, and flag associations can be politically sensitive. Language names in native script work better.
Dropdown versus page placement affects discoverability. A dropdown saves space but hides options. Visible language links take space but show availability clearly.
Remember user preference. Once someone selects German, future visits should default to German. Cookies or account settings preserve preference.
Don’t auto-redirect aggressively. Detecting location and forcing a language feels presumptuous. A French speaker in Germany doesn’t want German. Suggest but let users choose.
Technical SEO for Multilingual
Search engines need to understand language relationships.
Hreflang tags tell search engines which page serves which language-region combination. Proper implementation prevents the wrong language page ranking in the wrong country.
Hreflang is notoriously tricky. Every page must reference every other language version, including itself. Missing or mismatched hreflang tags confuse search engines.
URL structure options: subdirectories, subdomains, or separate domains. Each has SEO and operational trade-offs. Subdirectories centralize authority. Separate domains provide clearest geographic targeting.
Canonical tags prevent duplicate content issues. If English and Australian English pages are nearly identical, canonical relationships clarify which is primary.
Testing Across Languages
Functional testing multiplies with languages.
Every form, every flow, every interaction needs testing in every language. Translations might break functionality if text is too long, encoding is wrong, or character sets cause issues.
Visual testing catches layout breaks. Screenshots across languages reveal expansion problems, overflow issues, and rendering inconsistencies.
Linguistic testing catches translation quality issues. Native speakers review not just accuracy but naturalness. Technically correct translations can still sound awkward.
Cultural review catches offensive or inappropriate content. Something acceptable in one culture might offend in another. Local reviewers catch what translators might miss.
FAQ
Should all content be available in all languages, or can we prioritize?
Prioritization is practical and often necessary. Core pages and high-traffic content justify full translation. Secondary content might get fewer languages or machine translation. Define a tiered strategy based on content importance and market size. Just ensure users understand when content isn’t available in their language and can access source language alternatives.
Our team doesn.t speak some target languages. Quality control options doesn’t speak for quality control?
Partner with native speakers, whether in-house, agency, or freelance. Automated quality checks catch technical issues like missing translations or broken formatting. But linguistic quality requires human review. Budget for professional review at least for important content.
Our CMS doesn’t support multilingual well. Rebuild or work around?
Scale determines the answer. For two or three languages, workarounds might suffice. For serious multilingual presence with many languages, CMS limitations create ongoing friction. Calculate the cost of workarounds over time versus the cost of migrating to a multilingual-capable CMS. Often migration pays off faster than expected.
Is it better to launch all languages simultaneously or roll out gradually?
Gradual rollout usually works better. Start with highest-priority languages, learn from issues, refine processes, then expand. Simultaneous launch risks multiplied problems across all languages. Gradual rollout concentrates learning and allows process improvement.
Sources
W3C. Internationalization Best Practices. w3.org/International
Google Search Central. Managing Multilingual Sites. developers.google.com/search/docs/specialty/international
CSS-Tricks. RTL Styling Guide. css-tricks.com/rtl-styling
Smashing Magazine. Designing for Translation. smashingmagazine.com
Phrase. Localization Best Practices. phrase.com/blog