| name | language-and-multilingual-typography |
| description | Use when shipping content in multiple languages. Languages have different typographic conventions; account for them.
|
Language and Multilingual Typography
Different languages have different typographic conventions: word spacing, hyphen rules, quotation marks. Don't ship English-only and translate later — design for multilingual from the start.
Per-language conventions
| Language | Quotation marks | Note |
|---|
| English | 'curly' or 'single' | Em-dash em-dash |
| French | « guillemets » | Non-breaking space before some punctuation |
| German | „Anführungszeichen' | Compound words long |
| Spanish | « comillas » or 'comillas' | inverted ¿ and ¡ |
| Japanese | 「角括弧」 | Different glyphs, taller line-height needed |
| Portuguese (BR) | 'aspas' | Similar to Spanish |
| Italian | « virgolette » | Similar to French |
CSS for multilingual
Use the :lang() selector:
:lang(fr) { quotes: '« ' ' »'; }
:lang(de) { quotes: '„' ''' '‚' '''; }
:lang(en) { quotes: ''' ''' ''' '''; }
q::before { content: open-quote; }
q::after { content: close-quote; }
Font support
Verify font supports all target languages:
- Latin extended (most fonts)
- Cyrillic, Greek (some fonts)
- CJK (Chinese, Japanese, Korean — usually different font family)
- Arabic, Hebrew (RTL languages — special considerations)
Fraunces + Inter Tight cover Latin; need different fonts for CJK.
Where this fits in the X3 empire
Used in X3 Global-First localization (EN/ES/FR/DE/IT/JA/PT-BR).
