--- name: cyrillic-typography description: "Typography rules for Russian/Ukrainian/Bulgarian/Serbian sites in Latin-designed editorial fonts. Covers: when to use '&' (almost never in Cyrillic — use 'и' / 'та' / 'и' instead), which display/serif fonts actually support good Cyrillic (Fraunces, Instrument Serif, DM Serif Display, PT Serif, Playfair — NOT most Google display fonts), hyphenation/quotation marks («» not \"\"), dash rules (— em-dash with non-breaking space before), and legibility checks for ampersands/ligatures that render as unrecognizable glyphs in Cyrillic contexts. Use when building a landing page, editorial layout, marketing site, or HTML artifact targeted at Cyrillic-reading audiences." version: 1.0.0 license: MIT source: skillport/originals tags: [typography, cyrillic, russian, fonts, i18n, claude-design, editorial] category: design trust_tier: verified --- # Cyrillic Typography Editorial typography rules for sites in Russian / Ukrainian / Bulgarian / Serbian / any Cyrillic-script language. Most "distinctive" Latin fonts have broken or awkward Cyrillic coverage. Most editorial conventions (ampersands, quotes, dashes) are different. This skill encodes the decisions that separate a polished site from one that looks like it was built by someone who doesn't read the language. ## When to use Activate when: - The site's body or headline copy is in Cyrillic (Russian, Ukrainian, Belarusian, Bulgarian, Serbian, Macedonian) - You're picking a display/serif font for a Cyrillic headline - You're writing hand-crafted HTML where typographic details matter (landing pages, decks, editorial layouts) - The user explicitly asked for "editorial", "premium", "distinctive" aesthetic AND the copy is in Cyrillic Skip for: - Documentation / admin UIs where system fonts are fine - Code comments and logs (don't overthink) ## Iron rules ### Rule 1 — Never use `&` in Cyrillic copy. `&` is a Latin-script ligature (`et`). It has no meaning in Cyrillic writing and looks alien: - In **Fraunces**, **Instrument Serif**, **DM Serif Display**, **Playfair Display** — the ampersand is a heavy italic-style glyph that, at large sizes, reads as a random decorative blob next to Cyrillic letters. Users genuinely cannot tell what it is. - In editorial Russian practice, the word is spelled out: **и** (Russian), **та** (Ukrainian), **и** (Bulgarian), **и** (Serbian Cyrillic). - `&` is also rare in modern Russian editorial even when mixed-script is involved — use **и** / **и** between nouns, or a middle dot `·` for typographic pause. **Wrong:** `Программа & цены` **Right:** `Программа и цены` OR `Программа · Цены` Exceptions (narrow): - Brand names that natively use `&` (`Procter & Gamble`, `H&M`) — keep as-is. - Code, file paths, URL parameters, technical notation. - Explicit "&"-as-logo design decision the user has signed off on. ### Rule 2 — Quotation marks: «ёлочки» outside, „лапки“ inside. Russian/Ukrainian convention: - Outer quotes: **«» (angular, "yolochki")** - Inner nested quotes: **„" (low-9 / high-6, "lapki")** Not `"straight"` (that's ASCII). Not `"curly English"`. Not `''`. ``` Правильно: Команда «Северный Ветер» объявила: «Мы готовы». Правильно: Вожатая сказала: «Это называют „правилом тишины"». Неправильно: "Северный Ветер" / "Северный Ветер" / 'Северный Ветер' ``` Same for Ukrainian («»/„"). Bulgarian uses „" as outer. Serbian Cyrillic uses „" as outer. ### Rule 3 — Em-dash with non-breaking space before. In Cyrillic editorial text: - Dash is **em-dash `—`** (not en-dash `–`, not hyphen `-`) - Preceded by **non-breaking space** ` ` (so the dash doesn't start a line) - Followed by a regular space ``` Правильно: Смена — четырнадцать дней. В HTML: Смена — четырнадцать дней. ``` In pairs (parenthetic dashes), both dashes have the non-breaking space on the inside of the clause. ### Rule 4 — Pick fonts that actually have decent Cyrillic. Most display fonts on Google Fonts have **token Cyrillic** at best: the glyphs exist so the page doesn't fall back, but they're either auto-generated extensions, missing italic, or visibly by a different hand from the Latin. **Tested good for editorial/display Cyrillic:** - **Fraunces** — proper Cyrillic, varies optical sizing, excellent for magazine headlines. - **Instrument Serif** — clean Cyrillic, elegant italic. - **PT Serif / PT Sans** (ParaType) — designed FOR Cyrillic first, bulletproof. - **Involve** / **Involve Mono** (ParaType) — modern, distinctive. - **Roboto Flex** — solid, utilitarian. - **Manrope** — clean sans for body. - **IBM Plex Sans / Serif / Mono** — designed with Cyrillic from day one. - **Commissioner** — variable, good for UI. **Avoid (broken or poor Cyrillic):** - **Playfair Display** — Cyrillic is auto-extended and visibly awkward, especially italic. - **DM Serif Display** — partial coverage, rough italic. - **Abril Fatface** — sometimes missing weights in Cyrillic. - **Bebas Neue** — all-caps, reads ok but feels foreign. - Most "handwritten" Google fonts — Cyrillic is usually an afterthought. **Always verify the font before committing to a headline:** ``` 1. Load the Google Fonts spec URL with &subset=cyrillic or with the Cyrillic range forced (ranges U+0400–U+04FF). 2. Render a sample phrase with the site's actual copy. 3. Check italic separately — many fonts have only Latin italic. ``` ### Rule 5 — Hyphenation and spacing for Cyrillic body text. - Set `hyphens: auto` and `lang="ru"` (or `uk`/`bg` etc.) on ``. Without `lang`, browsers use English hyphenation rules and break Russian words badly. - `text-align: left` is preferred over `justify` in Cyrillic — Cyrillic has longer average word length and justified text gets rivers easily. - Set `font-feature-settings: "kern", "liga"` but avoid `"dlig"` and `"swsh"` with Cyrillic unless you've visually verified them (stylistic alternates are almost always missing for Cyrillic). - Letter-spacing on uppercase Cyrillic headlines: 0.02em–0.04em (more than Latin; Cyrillic has denser vertical strokes). ### Rule 6 — Common mixed-script anti-patterns to reject. - **Cyrillic letter that looks Latin used in place of a Latin letter.** Never write `Claude` with Cyrillic `С` even if it pastes visually identical. URL copy-paste and search break. - **Smart quote auto-replacement** that converts `«` to `"` when the editor doesn't know the locale. Lock the source. - **Latin ligatures in the middle of Cyrillic words.** `tt`, `fi`, `fl` ligatures can leak into Cyrillic bodies if `liga` is on and the font has weird coverage. Disable with `font-feature-settings: "liga" 0` if you see it. - **Monospace font with no Cyrillic.** Common mistake: JetBrains Mono has Cyrillic; many hand-picked "code-looking" fonts don't. Always test. ## Pre-ship checklist Run through these before declaring a Cyrillic site done: - [ ] Zero `&` in visible copy (code/URLs OK). Grep for `&` in rendered HTML (not in HTML entities like `&`). - [ ] All quotes are `«»` / `„"` (or locale equivalent). No `"` / `'` in body. - [ ] Em-dashes are `—` with ` ` before them. - [ ] `` (or correct locale) set. - [ ] Font loaded with Cyrillic subset; italic tested; one Cyrillic-heavy headline visually checked. - [ ] No mixed-script letters (look for any Latin `a/e/o/p/c/x/y` sitting inside a Cyrillic word). - [ ] Hyphens auto, text-align left, letter-spacing nudged up on uppercase. ## Anti-patterns to refuse - Using `&` as editorial "stylish pause" in Cyrillic copy — it looks broken, not sophisticated. - Picking a Latin display font without Cyrillic-check, then shipping headlines with auto-extended Cyrillic that doesn't match the designer's Latin hand. - ASCII double-quotes in Russian body copy ("like this") — always wrong in editorial. - Hyphen `-` where em-dash `—` is the typographic norm. - `` without `lang` attribute — breaks hyphenation and screen reader language detection.