[Перевод] Как создать собственный шрифт
В этом месяце я решил узнать, как создать шрифт, который буду использовать в своём комиксе hakum. Раньше я рисовал текст в цифре на своём планшете. Результат оказывался хорошим, но иногда трудночитаемым (размер текста часто скакал на одной странице). Мне не хотелось использовать готовый шрифт, поэтому я решил создать собственный на основе своего рукописного текста. Шрифт повысит читаемость текста и сделает его однородным.
Примечание: это моя первая проба создания шрифта. Я не дизайнер, не освоил создание шрифтов в совершенстве и не специалист по программе FontForge. Возможно, существуют способы получше добиться того же результата. В этой статье я опишу свой процесс, который, вероятно, поможет другим начинающим создать свой первый шрифт (для личного пользования). Моя цель заключалась в создании шрифта TTF для применения в веб-публикациях с ограниченным набором символов (без полужирного и курсивного написания).
Итерации
Я создал две итерации своего шрифта.
(На самом деле, вторая итерация была, наверно, десятой. Я вносил много изменений, много раз заново экспортировал шрифт)
Первая основана на моём цифровом тексте (введённом через планшет), а вторая — на отсканированном изображении бумажного рукописного текста.
Вторая итерация шрифта была более естественной, потому что на бумаге моё письмо менее точное и более органичное.
В процессе создания шрифта я многое о них узнал. Ниже приведены термины, описывающие все части гарнитуры. Зная эти термины и их предназначение, вы сможете делать осознанный дизайнерский выбор и нарисуете функциональный шрифт.
Анатомия гарнитуры
Ascender (линия верхнего выносного элемента): часть строчной буквы, выдающейся выше средней линии шрифта. То есть часть буквы в нижнем регистре, которая выше линии прописной буквы (x-height).
Baseline (базовая линия): линия, на которой находится большинство букв и ниже которой выдаются линии нижнего выносного элемента (descender).
Cap Height (линия заглавной буквы): линия, обозначающая высоту большинства заглавных букв.
Descender (линия нижнего выносного элемента): часть буквы, выдающаяся ниже базовой линии шрифта (например, в буквах p и q).
X-Height (линия прописной буквы): расстояние от базовой линии до средней линии строчных букв гарнитуры.
Для своего рукописного шрифта я выбрал глифы в верхнем (A-Z) и нижнем (a-z) регистрах, числа (0–9) и глифы для основных знаков препинания (запятая, восклицательный знак, вопросительный знак и так далее).
В своём скетчбуке я прочертил карандашом опорные линии для базовой линии, линии заглавной буквы, линии прописной буквы и линии нижнего выносного элемента. Я не делал символы большими и не особо тщательно их прорисовывал.
Символы получились неплохими, но из-за рисования их между опорными линиями они стали слишком жёсткими. Поэтому вместо этого я много раз написал фразу »The quick brown dog jumps over the lazy fox» заглавными и строчными буквами. При написании предложения буквы выглядели красивее, потому что я не особо задумывался над леттерингом; при рисовании на сетке я думал об ограничениях.
Я выбрал предложение, которое получилось лучше всего и использовал его для создания шрифта (некоторые буквы из сетки мне тоже пригодились). Из-за этого позже пришлось исправлять в цифровом виде линию заглавной буквы (cap-height), линию прописной буквы (x-height) и нижнего выносного элемента (descender) каждого символа.
Отсканировав буквы, я применил пороговое значение (Color > Threshold в Gimp), чтобы избавиться от всех оттенков серого в изображении.
Из-за особенностей поведения карандаша на бумаге и отсутствия сетки я потратил некоторое время на исправление неточностей при помощи инструмента Pencil в Gimp (отключив в Tool Options всю динамику, чтобы получить чистые линии).
Моя самодельная сетка шрифта в Gimp
Я скопипастил все подчищенные буквы в новый документ Gimp (см. изображение выше) с высотой и шириной, в которые могла бы поместиться самая высокая и широкая буква: заглавная M. Это подходящий момент для того, чтобы проверить весь всех линий; если толщина сильно варьируется, то это может выглядеть некрасиво.
Я по отдельности экспортировал все буквы в папку проекта в виде изображений PNG.
FontForge
Для создания шрифта я выбрал FontForge, потому что знал, что он работает в Linux, и потому что его рекомендовали знакомые мне люди (а не потому, что он лучший из лучших). Я по-прежнему не знаю, какая программа «самая лучшая», но мне понравилось с ним работать.
После создания проекта в FontForge открывается окно. Это окно Font View, в котором показана таблица всех глифов в шрифте. На данный момент все ячейки пусты.
Для начала выберем Element>Font Info, чтобы заполнить информацию о шрифте. В разделе PS Names введите название шрифта.
Если ваша цель — экспорт в TTF, то в том же окне перейдите в General и измените Em size на 1024. В шрифтах TrueType величина UPM (Units per Em) стандартно является степенью двойки, обычно это 1024 или 2048. У шрифтов OTF другие требования. Примечание: во времена, когда печатные буквы отливались металлическими блоками, каждая буква помещалась в собственный контейнер, обеспечивающий равенство высот всех букв. Высота элемента шрифта называется «em» и названа в честь ширины символа «M» в верхнем регистре.
При двойном нажатии на глиф в Font View он открывается в Character View. Здесь можно рисовать и редактировать глифы или один за другим при помощи интерфейса со вкладками, или параллельно с подготовленным текстовым файлом слов.
В левом нижнем углу есть поле с тремя слоями. В левом нижнем меню выберите слой Back, перейдите в File > Import для импорта PNG-глифа для буквы X. На холсте появится пример глифа.
Полезные горячие кнопки: z — приближение, x — отдаление.
На этом этапе вы можете выбрать самостоятельное вычерчивание глифа (см. туториал Font Forge по рисованию) или использовать автоматическую трассировку Autotrace (для этого выберите слой Fore и перейдите в Select > Autotrace).
Autotrace использует фоновое изображение в качестве справочного и воссоздаст его в виде контура, выполненного из контрольных точек и кривых Безье. Однако контур может быть немного хаотичным (слишком много точек) и вызывать проблемы с отсутствующими с экстремумами (крайними частями кривых). После получения замкнутой фигуры глиф появится в другом окне.
На этом этапе я предпочитаю настраивать пространство слева и справа от глифа перетаскиванием левой и правой направляющих (они определяют ширину готового глифа). Если вы хотите автоматически центрировать все глифы, перейдите в Metrics > Auto Width. Если вы хотите, чтобы все глифы были центрированы, выберите Metrics > Center In Width.
При исправлении контура глифа полезно бывает отключить справочный слой (снять его флажок).
Если вы хотите начать редактирование глифа с самого начала, перейдите в Font Window и выберите нужный глиф, а затем в том же окне перейдите в Edit > Clear. Для удаления справочного слоя выберите Edit > Clear Background.
ПОДСКАЗКА. В Character View, есть текстовое поле над рабочим холстом, где представлена буква, над которой вы работаете. При нажатии на текстовое поле вокруг символа появятся квадратные скобки. Ввод слов или произвольных букв после квадратных скобок позволит понять, как они выглядят друг рядом с другом.
Повторите эту процедуру для всех глифов. Не забудьте настроить левую и правую направляющие для глифа пробела, чтобы между словами было не слишком много места.
Кернинг
Слева: с кернингом; справа: без кернинга
Кернинг — это процесс настройки места между символами шрифта, чтобы его приятнее было читать.
В окне Font перейдите в Element > Font Info, Lookups, нажмите на вкладку GPOS, а затем на Add Lookup.
В раскрывающемся меню Type выберите Pair Position (Kerning). В столбце Feature нажмите на стрелку вниз рядом с New, выберите Kern Horizontal Kerning и нажмите на OK.
Выберите новый созданный элемент во вкладке GPOS и нажмите на Add Subtable (справа). Оставьте имя без изменений и нажмите на OK.
В этом меню не меняйте никаких настроек и выберите в обоих меню перетаскиваем буквы, к которым нужно применить кернинг. Убедитесь, что выбрали буквы и в верхнем, и в нижнем регистре. Для выбора обоих наборов в таблице зажмите Shift. Закончив, нажмите на OK.
Нажмите на пары. В нижней половине окна появится увеличенная версия пар глифов. Можно перетаскивать глиф, приближая или отдаляя его от первого. проделайте это для всех глифов, чтобы они выглядели друг с другом красиво.
Тестирование шрифтов
В FontForge можно тестировать шрифты. Перейдите в File > Print. В этом режиме можно посмотреть, как выглядит ваш шрифт.
В стандартном тексте не показаны все возможные сочетания глифов, но можно добавить и собственный текст. См. документ kern_pairings.txt , в котором содержатся все пары кернинга (я вставил его в показанный выше скриншот).
Проблемы с экспортом шрифта
Перейдите в File > Generate Fonts. На этом этапе FontForge может придержать некоторые символы для проверки. Возможны следующие проблемы:
Нецелочисленные координаты
Отсутствующие точки экстремумов
Самопересечение
Нецелочисленные координаты. Нецелочисленная координата — это одна (или несколько) точек на контуре глифа с числом, имеющим дробный компонент (например, 2.25). Для устранения нецелочисленных координат в глифе выберите проблемный глиф, перейдите в Element > Validation > Find Problems, установите флажок «non-integral coordinates», нажмите OK, и нажимайте Fix, пока не будут исправлены все ошибки. В рукописном шрифте, точность в котором не очень важна, перемещённая в новую координату точка не сильно изменит ситуацию.
Отсутствующие точки в экстремумах. Экстремумы — это самые крайние точки кривой. Когда FF сообщает об «отсутствующих точках в экстремумах», это значит, что контрольные точки кривой выталкивают кривую за край. Вершина кривой должна быть (жёлтой) точкой. Поэкспериментируйте с контрольными точками, чтобы крайняя часть кривой стала жёлтым кругом. Element > Add Extrema поможет решить проблему, но эта функция может искажать глиф или создавать новые проблемы с нецелочисленными координатами. Если эта ошибка появляется в логах, шрифт всё равно можно сгенерировать (что я и сделал), но она может привести к раздражающим мелким искажениям в шрифте. Проблемы с экстремумами могут возникать в немного небрежном рукописном шрифте (особенно если использовала функция Autotrace).
Самопересечение. Это означает, что контур глифа каким-то образом наложился сам на себя. Проверьте все линии, чтобы устранить пересечение.
Выбор типа шрифта
Для моих целей вполне достаточно TTF (true type font). Выбирать что-то типа OTF необязательно, потому что я не планирую хранить много глифов (мне не нужны полужирные или курсивные шрифты, а если они мне понадобятся, то я могу сделать их отдельным шрифтом) и мне не нужны лигатуры. Содержимое шрифта будет использоваться для публикаций в вебе, и TTF превосходно для этого подходит.
Чтобы сгенерировать шрифт из всех глифов в Font View, перейдите в File > Generate Fonts. В показанном ниже раскрывающемся меню, где вы выбирали имя шрифта, выберите выходной шрифт TTF (True Type).
Нажмите на OK. Шрифт будет сохранён в папку проекта. Переместите шрифт туда, где он хранится в вашей системе
