Меню McDonalds существует на 115 языках, а интерфейс MacBook — на 40. На то, чтобы это случилось, работали команды дизайнеров и локализаторов в разных странах. Но Apple и McDonalds — огромные и давно существующие корпорации, а в стартапах и небольших командах, которые делают многоязычные проекты, работа устроена по-другому. Чаще всего с несколькими языками работает одна студия или даже один человек, который вместе с создателями тестирует гипотезы и разбирается в том, как устроены разные рынки. Такой дизайнер (или студия), как правило, владеет не всеми языками, на которых (будущий) стартап говорит. Сделать хороший и типографически выверенный проект в таких условиях — сложная, но выполнимая задача. В этом материале мы расскажем о том, что поможет её решить.

Содержание

1.	Что нужно узнать о проекте, с которым вам предстоит работать
2.	Что нужно узнать о письменности и языке, с которыми вам предстоит работать
3.	На что обратить внимание в шрифте, с которым вам предстоит работать
4.	Чего не стоит делать
5.	(Почти) универсальные советы

Что нужно узнать о проекте, с которым вам предстоит работать

Решения, которые принимает дизайнер, работающий над многоязычным проектом, часто продиктованы, например, бюджетом такого проекта или его планами по выходу на новые рынки. В этом разделе — вопросы, ответы на которые дизайнеру стоит найти до того, как приступать к работе.

Среда

Если в случае с печатными макетами среда, в которой они будут работать, чаще всего очевидна, то дизайнер, который разрабатывает сайт, далеко не всегда знает, на каких устройствах люди будут его открывать. Целевой аудиторией сайта могут оказаться, например, люди из менее обеспеченых регионов, которые пользуются старыми моделями компьютеров, или опенсорс-активисты, которые пользуются только операционными системами Linux.

Планы

Если вы делаете, например, сайт посольства Франции в Великобритании, то, вероятнее всего, новых языков — кроме французского и английского — на нём никогда не появится. Но если вы делаете интерфейс для стартапа или молодого бизнеса, стоит узнать, планирует ли проект в обозримом будущем выходить на новые рынки и, соответственно, переводить интерфейс приложения или печатные материалы на те языки, которые в ваших макетах не использовались.

Уточните, планируется ли перевод на языки, в процессе работы с которыми могут возникнуть проблемы (например, на датский, в котором средняя длина слова варьируется от 8 до 12 знаков). Выясните, собирается ли проект добавлять сайты на языках с другим типом письма Тип письма — характер передачи знаками элементов речи. Всего существует четыре типа письма: пиктографический (где каждый знак обозначает изображённый объект), идеографический (в котором знак обозначает идею или морфему), слоговой (где знак обозначает слог) и алфавитный (в котором знак обозначает фонему). (например, включить в изначально англоязычный проект хинди, который пользуется слоговым письмом).

Сайт биеннале Typojanchi 2019, которая проходит только в Корее, на корейском и английском. Добавить третий язык в такой макет было бы достаточно сложно. Дизайн: Мёнсан Ю, Чин Далле, Пак Ухёк

Сайт недели инклюзивного искусства, которая проходит в разных странах, на корейском и английском. Его удобно переводить на другие языки. Дизайн: Everyday Practice

Что нужно узнать о письменности и языке, с которыми вам предстоит работать

У каждой письменности и у каждого языка — свои особенности и свои правила типографики. Мы не сможем рассказать обо всех, но перечислим те, о которых важнее всего узнать, начиная работу над многоязычным макетом.

Направление

У разных письменностей разное направление. Если латиница и кириллица читаются (и пишутся) слева направо, то арабский и иврит — наоборот. Поэтому читать на арабском будет гораздо проще, если текст будет с выключкой вправо, а на латинице — с выключкой влево.

TD1 TD2 TD3

Брошюра для конференции Tasmeem Doha 2017 на арабском и английском. Дизайн: Лорен Торсон

Меню на борту самолёта авиакомании El-Al, 1970. Дизайн: Отто Тройман, Георг Хим

Приложение YouTube на английском (слева) и на иврите (справа)

Цифры

У арабско-индийских цифр есть так называемые национальные варианты. Например, лаосские, тайские и тамильские. В наборный текст корректные цифры, вероятнее всего, вставит редактор, но прежде чем пользоваться цифрами в акциденции, проверьте, не нужно ли вам использовать национальный вариант.

Текстура

У разных письменностей — разная история, они появились в разное время и начинали свой путь с разных инструментов. У них могут быть очень разные пропорции и формы знаков. Например, выносные элементы грузинских букв традиционно в два раза выше, чем строчные знаки, а значит, грузинскому письму нужен более щедрый интерлиньяж, чем, например, латинице, чтобы набор не казался слишком плотным. Современные грузинские шрифтовые дизайнеры часто отказываются от соблюдения этого правила и делают выносные элементы короче, именно для того чтобы грузинское письмо и латиница были сбалансированы. Даже если вы выбрали один из таких шрифтов, стоит уделить особенное внимание интерлиньяжу в макетах, где грузинский сочетается с другими письменностями, — даже сбалансированный грузинский шрифт может выглядеть слишком плотно по сравнению с латиницей из-за большего количества выносных элементов.

Книга «Point par point» на английском и грузинском языках. Дизайн: Тимур Ахметов

У разных языков, которые пользуются одной письменностью, текстура тоже может быть разной: в одних языках очень часто встречаются знаки с вертикальными штрихами, в других — много знаков с диакритикой.

Чтобы приблизительно понять, как выглядят текстуры разных письменностей и языков, откройте спесимен шрифта — шрифтовые дизайнеры часто включают в него блоки текста разных кеглей на разных языках.

Длина слов

В разных языках разная длина слов — например, в немецком средняя длина слова больше, чем в английском. Это особенно важно учитывать во время проектирования максимального и минимального размеров кнопок или карточек в дизайн-системе для многоязычного интерфейса.

Приложение Endel на английском (слева) и на немецком (справа)

Правила работы с пунктуацией

В разных языках — разные типографические правила работы с пунктуацией. Правила расстановки пробелов вокруг тире, например, отличаются даже в американском и британском английском. Проверяйте, как в языках, с которыми вы работаете, ставятся кавычки, купюры и пробелы разной толщины. Самые распространённые правила для языков, которые пользуются латиницей и кириллицей, описаны в нашем Справочнике.

Переносы

Практически во всех языках, которые упоминаются в этой статье, слова переносятся по слогам, но отдельные правила переноса могут отличаться. Например, в русском языке нельзя отрывать ь и ъ от предшествующей согласной, а в немецком буква ß в середине слова может превратиться в ss, между которыми разрешено ставить знак переноса. В армянском же существуют скрытые слоги, где гласный ը [э] произносится, но не отражается на письме. Если перенос стоит после скрытого слога, то ը нужно дописать. Автоматически программы, например, пакета Adobe сделать этого не могут, потому что в их списке языков нет армянского.

Несмотря на то что большая часть многоязычных проектов — это сайты и приложения, а переносы чаще всего необходимы в печатной продукции, помнить о том, как они работают, важно — например, на случай появления у проекта буклетов.

Особенности работы с софтом

Проверяйте, правильно ли в вашем макете стоят диакритические знаки. Например, до недавнего времени Figma некорректно поддерживала диакритику в деванагари. Причина того, что диакритика отображается не так, как в полученном вами от редактора текстовом документе, может быть не только в ошибке программы, но и в ошибке в шрифте. В таком случае вам придётся связаться с автором шрифта (если он известен) или обратиться за помощью к шрифтовому дизайнеру (если у шрифта открытый исходный код и автор нигде не указан).

Как Figma работала с диакритикой в деванагари в 2021. Изображение: Давид Бржезина
Как должна выглядеть диакритика в деванагари. Изображение: Давид Бржезина

Удостоверьтесь, что письменность, с которой вы работаете, отображается именно так, как должна. Например, буквы в арабских словах связаны между собой, но если вы живёте в стране, где язык с арабским алфавитом не является государственным, программы пакета Adobe будут по умолчанию разъединять буквы. В разных программах эта проблема решается разными способами. Например, в Illustrator нужно нажать CMD/CTRL + K, и во вкладке Type поставить галочку в строке Show Indic Options, а затем в меню вкладки Paragraph выбрать Middle Eastern & South Asian Line Composer.

На что обратить внимание в шрифте, с которым вам предстоит работать

В этом разделе — несколько вещей, о которых стоит подумать, выбирая шрифт для многоязычного проекта.

Языковая поддержка

Выбирая шрифт, убедитесь, что он поддерживает все нужные вам языки. Если в презентации шрифта вы видите текст только на французском и английском, а вам предстоит набирать текст, например, на исландском (где есть буквы Ðð и Þþ) или вьетнамском (в котором огромное количество диакритики), обязательно проверьте, есть ли эти языки в списке поддерживаемых.

Необходимость альтернативного шрифта

Если в интерфейсе есть поля для заполнения, то имеет смысл предусмотреть сценарий, когда пользователь набирает текст на языке, который не поддерживает основной шрифт сайта. Например, такое может произойти, если основной язык интерфейса английский, а в имени пользователя, который на нём регистрируется, есть диакритика. Для таких полей стоит выбрать шрифт с широкой языковой поддержкой (такой как Noto или Roboto), который, возможно, будет менее точным по тону и настроению, но зато не испортит пользовательский опыт.

Обратите внимание, что речь в этом разделе идёт именно о языковой поддержке; если вам нужна поддержка не только большего количества языков, но и большего количества письменностей, то вам, вероятнее всего, понадобится несколько шрифтовых файлов (например, Noto Sans Tamil для тамильского и Noto Sans Georgian для грузинского).

Иконки

В многоязычных интерфейсах, чтобы минимизировать проблемы при переключении с одного языка на другой, часть слов (например, в перечислении услуг сервиса) можно заменить на иконки. Но их стоит подбирать с осторожностью — представители разных культур могут по-разному считывать одни и те же пиктограммы. Кроме того, иконки должны органично работать с типографикой в макете, и толщина линий в них должна соотноситься с толщиной линий в знаках выбранного вами шрифта. Поэтому имеет смысл выбирать шрифт, в котором уже есть набор иконок (такой как, например, San Francisco, где их больше 5000). Часто иконки есть и в шрифтах независимых студий. Если в таком шрифте нет какой-то из нужных вам пиктограмм, можно обратиться к авторам шрифта и попросить нарисовать её за дополнительную плату или заказать автору шрифта набор иконок целиком.

Иконки SF Symbols для шрифта San Francisco

В айдентике ярмарки Preview (на китайском и английском) иконки и стрелки из шрфита Purple Haze работают в качестве декоративных элементов и элементов навигации. Дизайн: Джун Хи Конг

Проверяйте, как работают выбранные вами иконки, в сочетании со всеми письменностями, которыми пользуется (или планирует пользоваться) проект. Из-за разницы в конструкциях символов иконки, подобранные для латиницы, могут не подойти, например, для деванагари или арабского.

Приложение ChatGPT на английском (слева) и арабском (справа)

Лигатуры

Существуют шрифты, в которых стандартные лигатуры (ff, fl, fi, fh) включены по умолчанию. Чтобы набирать текст, например, на немецком языке, их придётся отключить — по правилам немецкой типографики лигатура не может находиться на стыке морфем. Если корень кончается на f, а суффикс начинается на l — f и l должны быть отдельными буквами, не объединёнными в лигатуру. Если вы работаете над интерфейсом на немецком и лигатуры включены по умолчанию, обязательно предупредите разработчика о том, что их нужно выключить.

Обратите внимание, что это правило неактуально для рукописных шрифтов.

Чего не стоит делать

Мы считаем, что в дизайне нет запрещённых приёмов, но есть те, которыми стоит пользоваться с особой осторожностью.

Заменять знаки одного языка похожими на них знаками другого

Не стоит использовать буквы одной письменности вместо похожих на них букв другой. Такое решение сделает логотип нечитабельным для людей, владеющих обоими алфавитами. А если вы замените несколько букв в наборном тексте, то слова с ними будет невозможно автоматически выделить на странице, а ещё по таким словам сайт нельзя будет найти в поисковике.

Вывеска ресторана Бебо (на русском), на которой есть грузинские буквы ნ [n] и отзеркаленная პ [pʼ] (вместо букв б и е соответственно)

Это актуально для всех глифов шрифта. Некоторые из них могут напоминать привычные нам знаки пунктуации, но при этом иметь совершенно другое значение в культуре тех народов, для языков которых (в первую очередь) был сделан шрифт. Например, арехвач — армянский знак вечности — похож на астериск или буллит, но использовать его вместо астериска или буллита нельзя.

Выбирать шрифт, который копирует особенности другой письменности

У каждой письменности — своя пластика и свой набор конструктивных элементов. Например, в отличие от кириллицы и латиницы, в арабском и грузинском не может быть засечек в привычном смысле слова. Но существуют шрифты, авторы которых приделывают засечки к арабским буквам в качестве декора или, наоборот, рисуют диакритику в латинице похожей на арабские огласовки. Исследователи дизайна называют такие решения экзотизацией. Мы не рекомендуем пользоваться шрифтами, авторы которых прибегают к таким решениям, если ваш проект не иронизирует над экзотизацией.

Логотип магазина Banana Republic в Катаре. К арабском буквам в логотипе добавлены засечки

Злоупотреблять эмодзи

В разных культурах у разных эмодзи разные значения — например, для японцев 🙏 значит «спасибо», а для представителей многих других культур это руки, сложенные в молитве (не говоря уже о том, что некоторые считывают 🙏 как «дай пять»).

Не стоит использовать и эмодзи-флаги в переключателях языков — на одном языке могут говорить в нескольких странах, а у одной страны может быть больше одного флага.

(Почти) универсальные советы

Универсальных советов не существует, но есть несколько рекомендаций, которые, как нам кажется, будут полезны в любом (или практически любом) многоязычном проекте.

Найдите визуальные материалы на незнакомом вам языке

Чтобы подготовить макет на незнакомом вам языке, не обязательно его учить. Но посмотреть, например, на старые книги, изданные на этом языке, и сделать выводы о том, какие традиции и приёмы в работе с языком и письменностью существовали в регионе, для которого вы делаете проект, однозначно стоит. Кроме старых книг, изучите проекты современных дизайнеров и типографов, чтобы быть уверенными, что вы следуете современным правилам типографики, а не устаревшим.

Французский толковый словарь, 1801. Все знаки препинания (кроме точки) отбиваются пробелом как от предыдущего, так и от последующего знака. В современном французском такого правила нет

Изучайте шрифты, поддерживающие несколько письменностей

Если в вашем макете, например, две письменности и вы хотите выбрать для каждой из них свой шрифт, попробуйте посмотреть на то, как соотносятся эти письменности в шрифте, который поддерживает обе. Например, если у одной из письменностей только один регистр (как у иврита), а у другой — два (как у латиницы), посмотрите, как высота знаков первой соотносится с высотами строчных и прописных второй. Выводы, которые вы сделаете, помогут вам сбалансировать два разных шрифта, поддерживающих две разные письменности.

Пригласите консультанта, который владеет языком

Если вы не владеете языком, с которым вам предстоит работать, возьмите несколько консультаций у его носителя (желательно тоже дизайнера). Такой человек сможет ответить на достаточно узкие вопросы, указать на ошибки, рассказать о критериях качественного шрифта с поддержкой своего родного языка или даже поделиться скриптами, которые ускорят вашу работу.

Мы благодарим Александра Ратасепа и студию Together with You за помощь в работе над этой статьёй.

How-to: Многоязычные проекты

Несколько советов для тех, кому предстоит работать с проектом, который говорит на нескольких языках