Дизайн для кириллицы и латиницы: мультиязычная типографика
Практика4 минРедакция Innovialabs
Коротко
Выбирайте гарнитуру с полноценной кириллицей, включая расширенную, и проверьте на ней узбекские o‘, g‘ и апостроф, проектируйте под самый длинный язык без фиксированных ширин и тестируйте макет на реальных переводах, а не на английском черновике.
Коротко: три задачи мультиязычной типографики
Интерфейс на русском, узбекском и английском сталкивается с тремя проблемами:
- Шрифт должен одинаково качественно отображать кириллицу и латиницу, включая особые узбекские знаки.
- Длина текста в разных языках разная, и одна и та же кнопка может не поместить перевод.
- Правила языка — множественное число, форматы чисел и дат — влияют на то, как строятся строки.
Решаются они на этапе дизайна, а не после перевода.
Как выбрать шрифт
Проверяйте гарнитуру по конкретному списку:
- Кириллица нарисована, а не добавлена для галочки. Сравните «ж», «ы», «д», «л» с латинскими буквами того же начертания — они должны выглядеть как одна семья по толщине, ширине и характеру.
- Есть кириллический курсив. Настоящий курсив в кириллице отличается формами букв («т», «д», «и»). Если начертания нет, браузер просто наклонит прямой шрифт, и это заметно.
- Расширенная кириллица. Для узбекской кириллицы нужны «ў», «қ», «ғ», «ҳ». В Google Fonts часть этих букв лежит в наборе cyrillic-ext, а не в базовом cyrillic — его нужно подключить явно.
- Знаки для узбекской латиницы. Буквы o‘ и g‘ используют знак, похожий на перевёрнутую запятую, а тутук белгиси (ma’lumot) — апостроф. Убедитесь, что выбранные вами символы есть в шрифте и не подставляются чужим глифом из системного запасного шрифта.
- Достаточно начертаний. Минимум — обычное, полужирное и жирное. Синтетическое «жирное» браузера выглядит грубо.
Безопасный выбор — гарнитуры с широкой языковой поддержкой: Inter, Manrope, Roboto, Noto Sans, IBM Plex Sans, PT Sans. Но проверять всё равно нужно на своих текстах.
Удобная тестовая строка для проверки:
O‘zbekiston, g‘oya, ma’lumot, sun’iy intellekt
Ўзбекистон, қоғоз, ғоя, ҳаёт
Съешь же ещё этих мягких французских булок
The quick brown fox jumps over the lazy dog
Апостроф в узбекском: что важно знать
Пользователи вводят o‘ по-разному: через обычный апостроф, обратный штрих или правильный типографский знак. Отсюда практические правила:
- В интерфейсе и контенте договоритесь об одном символе и используйте его везде.
- В поиске и фильтрах нормализуйте все варианты к одному, иначе «g‘oya» и «g'oya» окажутся разными словами.
- В формах не считайте ошибкой ввод «простого» апострофа.
- В заглавных буквах проверьте, как смотрится O‘ и G‘ в заголовках — у некоторых шрифтов знак садится слишком низко или слишком далеко.
Длина текста в разных языках
Русские и узбекские формулировки часто длиннее английских. Узбекский — агглютинативный язык: к слову присоединяются суффиксы, и одно слово может стать очень длинным («foydalanuvchilarimizga»). Что из этого следует:
| Где ломается | Как проектировать |
|---|---|
| Кнопки | Ширина по содержимому, а не фиксированная; допускайте перенос на две строки |
| Навигация | Запас места или сворачивание в меню при нехватке ширины |
| Таблицы | Перенос текста в заголовках колонок, а не обрезка |
| Карточки | Без фиксированной высоты; одинаковую высоту в ряду задавайте сеткой |
| Крупные заголовки | Проверка длинных слов, overflow-wrap или аккуратные переносы |
Практика, которая экономит время: сразу верстайте макет на самом длинном языке или используйте псевдолокализацию — искусственно удлинённые строки, которые показывают слабые места до появления реального перевода.
Правила языка, которые влияют на макет
- Множественное число. В русском три формы («1 файл», «2 файла», «5 файлов»), в узбекском существительное после числа не меняется («5 ta fayl»), в английском две формы. Не склеивайте строки из кусков — используйте шаблоны с учётом множественного числа.
- Порядок слов. «Удалить файл» и «Faylni o‘chirish» строятся по-разному, поэтому переменная в строке может оказаться в другом месте.
- Числа и даты. Разделители тысяч и дробной части, формат даты отличаются: показывайте их через средства локализации, а не захардкоженной строкой.
- Текст в картинках. Любая надпись внутри изображения потребует отдельной версии на каждый язык — по возможности выносите текст в вёрстку.
Частые ошибки
- Выбор шрифта по латинской витрине без проверки кириллицы.
- Подключение только базового набора кириллицы, из-за чего «қ» и «ғ» отображаются другим шрифтом.
- Фиксированные ширины кнопок, подобранные под английский текст.
- Обрезка текста многоточием там, где важно полное название.
- Проверка макета только с текстом-заглушкой.