Перекричать Impact
Часть 2. Мракобесие и джаз.
В прошлой серии мы детально изучили нашего противника, узнали историю появления и восхождения Импакта на трон мемов, выявили слабые и сильные стороны шрифта, отметили важные характеристики и особенности. Закончили мы на том, что поставили задачу невозможного проекта революции. Обязательно прочитайте первую часть, если пропустили:
[## Перекричать Impact
Часть 1. Дерзкий проект
Настало время решать поставленную задачу и создать шрифт для мемов.
План победы
Не желая победить, не победишь. Но одного желания мало, нужны стратегия и тактика. В голове должно быть хотя бы примерное видение конечного результата.
По нашему замыслу, чтобы победить Импакт, нужно усилить его сильные стороны и избавиться от слабых. Обозначенные минусы незначительны и некритичны, они могут исчезнуть сами собой, а плюсы мы будем усиливать.
План простой: доводим все до предела. И шагнем за горизонт.
Ультра-широкие вертикальные штрихи. Сделаем штрихи ультра-ультра-широкими.
Узкие полуапроши и малые внутрибуквенные просветы. Уменьшим количество воздуха вокруг и внутри букв до минимума.
Высота строчных. В Импакте высота строчных примерно равна 3/4 от высоты прописных. Мы пойдем дальше и сделаем высоту строчных равной высоте прописных — сделаем юникейс (unicase font).
Короткие выносные элементы. Укоротим выносные элементы в ноль.
Формы букв, стремящиеся к прямоугольнику. Сделаем все буквы почти прямоугольными. Максимизируем количество чернил на единицу площади.
Ровный горизонтальный ритм. Сделаем ритм вертикальных штрихов еще точнее.
В итоге мы попробуем создать шрифт, в котором ни из-под базовой линии, ни линии капса, ничего не торчит. Допустимая высота строки при наборе станет меньше, а прямоугольный, кирпичный, контур слов поможет превращению текста в объект, контрастирующий с любым неоднородным фоном.
Кто-то скажет, что это безумие. Возможно. Но, только безумие и отвага способны победить гений Импакта.
Гордо поднимем над головой знамя с бессмертной фразой Ромы Воронежского:
«Любая идея, не доведенная до абсурда, считается потерянной»
и откроем Глифс!
Пропорции
Чтобы с чего-то начать, определим пропорции будущего шрифта: ширину и высоту букв. Строчные по высоте будут равны прописным, поэтому пропорции мы определяем сразу для всего алфавита.
Разные буквы будут иметь разную ширину. Например Ж будет явно шире К, но все они должны стремится к некоторому эталонному значению, а большая часть букв и цифр будут ему точно соответствовать. Поэтому за эталон определим латинскую букву H, которая своей формой отлично походит на прямоугольник. А по прямоугольнику легко определить эталонные пропорции.
Для зауженного заголовочного гротеска высота буквы должна быть значительно больше ширины. Кегельная площадка литер должна представлять из себя вертикально вытянутый прямоугольник.
Из классических пропорций на ум сразу приходит золотое сечение. Это отношение меньшей стороны к большей как 5 к 8, или через коэффициент 1.63.
Пятисекундный тест показывает, что и в Импакте реализовано именно такое соотношение сторон буквы H.
Золотое сечение в латинской H в шрифте «Импакт»: 5 по ширине и 8 по высоте.
Хорошая попытка, Импакт! Но мы тоже будем использовать золотое сечение в своем проекте. Оно еще никогда и никого не подводило.
В Глифсе проще начать с латиницы. А потом на ее основе сделать кириллицу плюс другие знаки. В латинице мы сначала сделаем прописные, а потом — строчные.
Латиница
Начнем с глифа латинской H. Построим эту букву, учитывая выбранные пропорции.
Высоте прописных в Глифсе по умолчанию 700 у.е. Не будем спорить, в мире условных единиц это не принципиально. Имея пропорцию, легко вычислить, что при такой высоте ширина должна быть равна ~ 430 у.е (700 делим на 1.63).
Зададим вертикальный штрих шириной 200 у.е. Второй вертикальный штрих сделаем такой же. На просвет между вертикальными штрихами остается 30 у.е.
Будем считать, что воздух справа и слева от буквы должен быть примерно равен воздуху внутри буквы. Поэтому ставим левый и правый полуапроши в значение 15 у.е., поделив 30 у.е. пополам. Вплоть до этапа кернинга для простоты будем выставлять всем глифам такие же значения.
Строим латинскую H.
Горизонтальный штрих построим на глаз, периодически зажимая клавишу «Пробел» и смотря, какой высоты перекладинка подходит для такой ширины вертикальных штрихов. Хочется контраста между горизонтальным и вертикальным штрихом. Большого, но не очень. Опытным путем подбираем ширину горизонтального штриха в 125 у.е.
Поднимаем перекладинку чуть выше геометрического центра для оптической компенсации. Выстраиваем по ней направляющие, которые потом помогут нам построить среднюю линию в других буквах.
Совет. Направляющие через контекстное меню можно превратить в глобальные (будут отображаться для всех глифов) или копировать из одного глифа в другой.
Поскольку шрифт предназначается для мемов, в использовании с обводкой, а по сути в условиях обратки, то полезно смотреть буквы не только черным по белому, но и наоборот — белым по черному. Во втором случае векторные контуры кажутся еще более массивными.
Очень плотные пропорции.
Отлично. Переходим к округлым буквам.
Самая округлая из всех округлых это латинская буква О. Для ее построения у нас уже есть вертикальный и горизонтальный штрихи. Осталось определиться с радиусом закругления.
Тут стоит вспомнить, что все буквы должны заполнять прямоугольник по максимуму. То есть, как предлагал сам Джеффри Ли, заливать бумагу чернилами по полной программе. Поэтому радиус сделаем побольше.
Подбираем и запоминаем на будущее размеры квадрата скругления кривых в овалах.
Непонятное объяснение факта. В общем случае векторизация кривых происходит внутри прямоугольника, на диагонали которого находятся крайние точки сегмента кривой. В нашем случае прямоугольник вырождается до квадрата.
Будем использовать размеры, которые больше ширины горизонтального штриха (125 у.е.), но меньше вертикального (200 у.е.). Отдавая предпочтения круглым цифрам и опираясь на собственное плохое чувство вкуса, выбираем 150 у.е.
Радиус скругления при этом указываем 60% (или 90 у.е.). Радиус скругления мы будем определять как длину усиков кривых Безье по отношению к стороне квадрата скругления. Большой радиус — усики длиннее, малый — короче.
Латинская O. Почти прямоугольник.
В Глифсе для автоматизации рутинного задания радиусов скругления кривых есть специальный инструмент:
8 кнопочек и все дают разные результаты.
Восемь кнопочек между двумя крайними значениями шкалы процентов делят заданный диапазон на равные промежутки. Каждая кнопка вытягивает усики кривых на соответствующее количество процентов.
Для справки. У этого инструмента есть еще расширенный режим, позволяющий задавать разные длины для горизонтальных и вертикальных усиков, но в нашем случае это не понадобиться. У нас скругления идут внутри квадрата и симметричны.
Выбрав все точки глифа (Ctrl+A), нажмем третью справа кнопку инструмента (60%) и Глифс автоматически установит длину усиков в 90 у.е. для всех выбранных сегментов.
Внутренний просвета овала у O оставляем без скругления. В большинстве случаев при таком узком просвете мелкие детали контура будут теряться, а сам просвет деградировать до простого прямоугольника. Так зачем излишне мудрствовать? К тому же это придает шрифту определенный характер: круглый снаружи, острый внутри!
Поскольку эта буква получается по сути не округлая, а прямоугольная, то не компенсируем высоту О выносами вверх и вниз. Контур проходит точно по базовой линии и линии высоты прописных.
Для удобства дальнейшей работы полученные метрики (жаль, что не все) в Глифсе можно записать в специальный интерфейс. Чтобы не забыть, например.
Теперь разберемся с наклонными штрихами. Для этого построим латинскую A. Сделаем ее максимально прямоугольной, но сохраним ощутимый наклон.
Ширину наклонного штриха для оптической компенсации задаем 210 у.е.
Ножки буквы раздвигаем так, чтобы в самом низу расстояние между ними стало равно 60 у.е., выше средней линии — 30 у.е., а в самом верху только 10 у.е. Таким образом мы как бы сохраняем площадь внутрибуквенного просвета как у H: если где-то мы его расширяем, то в другом месте делаем меньше.
Смотрим, что получилось, и подгоняем A до приемлемого вида:
Вот таким образом мы определили основные метрики, с помощью которых строим остальные прописные латиницы:
Рассмотрим некоторые интересные моменты в конструкции этих глифов.
У B, E, F, R, K и G средняя перекладинка на том же уровне, что и у H. А в глифе B нижний полуовал больше верхнего.
В глифе G узкий просвет позволил выступить горизонтальному штриху в середине буквы только на 15 у.е. Что не хорошо, но терпимо.
Обратите внимание на место соединения овала с вертикальным штрихом справа снизу. Для увеличения засечки ширина контура после скругления уменьшена ровно вдвое, до 100 у.е. Этот прием создания более крутого входа овала в вертикальный штрих возьмем на вооружение и будем использовать в строчных буквах.
Просветы между косыми (и прямыми) штрихами в буквах M, N, V, W, X по аналогии с A в широкой своей части стремятся 60 у.е. Только у буквы K сверху 50 у.е., а снизу — 60. У глифа Y сверху чуть шире — 70 у.е.
Нам нужно было максимально сжать эти буквы по ширине, не дать им расправить крылья. Постоянно держим в голове цель: набор должен быть плотным, буквы должны стремиться к форме прямоугольника, а внутрибуквенный и межбуквенный просветы должны стремиться к значению 30 у.е. по ширине.
Горизонтальные выносы у J и L делаем максимально короткими, также приближая эти буквы к прямоугольнику.
Из Q вместо хвостика строим горизонтальный вынос как у отраженной J, а саму Q сокращаем по высоте и поднимаем на базовую линию:
Просвет для C делаем равным по высоте перекладинке у H.
Бесплатный совет. Сохраняйте преемственность отдельных элементов и модульность значений. Копируйте блоки из одного глифа в другой или делайте на их основе компоненты, вынося контуры в отдельные, неэкспортируемые глифы. При появлении новой метрики, попробуйте сначала одно из уже имеющихся значений, и если ничего не подходит, только тогда выбирайте новое.
Важно также определиться с базовым модулем, умножение на который будет давать все другие метрики. В нашем случае это 15 у.е., уже известная нам половина от базового внутрибуквенного просвета H. Соответственно для самых различных расстояний и отступов мы будем использовать значения в 30, 60, 90, 150 у.е. и т.д. Это удобно для быстрых расчетов и придает определенную математическую чистоту и гармонию.
В букве S находим симметрию и форму плавного изгиба:
Закончив прописные, переходим к строчным.
Мысль по ходу дела. В юникейс-шрифте строчные по высоте равны прописным и в каком-то смысле их можно воспринимать как альтернативные начертания для прописных.
Строим буквы, используя метрики прописных. Не забываем убрать все выносные элементы и добавить побольше округлых форм, чтобы строчные по стилю немного отличались от прописных. Это поможет нам в будущем.
Рассмотрим состав строчных глифов поближе.
a, b, d, g, h, m, n, p, q и u строим с более крутым входом овалов в вертикальные штрихи.
Верхние выносные штрихи укорачиваем до верхушек букв, а укороченные овалы выравниваем под общую высоту.
Строчная с — это закрытая форма прописной C.
Нижние выносные элементы у g, j, p, q и y подтягиваем вверх до базовой линии.
У k верхний наклонный штрих делаем с закруглением, а нижнюю ножку чуть оттопыриваем для оптической компенсации.
Избавляемся от острых углов в буквах v, w, x, y и z, имитируя курсив и делая отсылку к историческим корням строчных знаков. Добавляем для z перекладинку. Минимум воздуха, помните?
Используем компонентный подход. d — это отраженная b, q — это отраженная p.
Строчную s делаем более сжатой по вертикали, чем S, выдавливая из нее воздух и сопли.
Обрезаем каплю у r так же, как это сделано в Импакте. Что мы дураки что ли, не использовать хорошие практики?!
В итоге получаем что-то такое.
Латиница
Панграмма из прописных и строчных
Разобравшись с латиницей, можно сделать расширенную латиницу, добавив буквы с диакритикой.
Расширенная латиница и диакритические знаки
- Строим диакритические знаки.
- Размечаем латиницу и знаки специальными якорями.
- Автоматически генерируем расширенную латиницу.
- …
- PROFIT!!!
В Глифсе все комбинаторные глифы (глифы диакритических знаков) содержат в названии слово «comb». В каждой из языковых групп сначала строим глифы с этим суффиксом, потом размечаем всё якорями, и только в конце генерируем все остальные отсутствующие глифы группы.
Составные глифы расширенной латиницы получаются в результате компоновки буквы латиницы с диакритическим знаком или с другой буквой:
Избыточный совет. Компоненты в Глифсе — это глифы, которые можно импортировать в другие глифы для построения составных глифов. Это похоже на кирпичики, из которых можно создавать новые комбинации и экономить время. Еще раз рекомендую изучить и применять компонентый подход.
Звучит может быть сложно, но на практике все намного проще. Главное всё делать в правильном порядке.
Итак, строим диакритические знаки: круги, тильды, умляуты, бреве и прочие.
Ширину штриха выбираем поменьше: не 200 у.е., а только 150 у.е. Это нужно, чтобы эти знаки визуально не спорили с буквами, а дополняли их.
Другой вопрос — на каком расстоянии от буквы ставить диакритику. Выбираем стандартные для нас 30 у.е.
Когда все знаки готовы, пройдемся по каждому и нажмем комбинацию Cmd+U для расстановки якорей. Это такие оранжевые ромбики.
Якоря помогают совмещать компоненты в сложносоставных глифах и использовать автоматическое взаимное выравнивание. Где-то это центральные точки, где-то угловые. Некоторые лежат на базовой линии, некоторые находятся за высотой прописных. Все зависит от конкретного глифа.
В общем случае править ничего не надо, Глифс сам знает, где должны стоять якоря.Но если хочется, то можно и подвигать.Главное, чтобы вы понимали, что вы делаете.
После этого проходимся комбинаций клавиш Cmd+U по всем глифам уже построенной латиницы и тоже расставляем якоря.
Теперь буквы латиницы и знаки диакритики готовы к совмещению. Выбираем в каждой из языковых групп отсутствующие глифы и жмем кнопку «Генерировать». Глифс, используя координаты одноименных якорей как точки совмещения букв и диакритических знаков, сам построит составные глифы.
Сюрприз-сюрприз! Не все символы расширенной латиницы получаются автоматически. По некоторым надо пройтись и подправить их вручную. А некоторые — построить с нуля.
Вот что мы увидим сразу после автогенерации глифов:
Душевные метания. В ходе разработки может появиться идея сделать тотальный юникейс, при котором даже диакритические знаки находятся между линией капса и базовой линией.
Для тестирования такого варианта создадим копию латинской A, меньше оригинальной на сумму высоты диакритического знака и отступа от него. Совместим карлика с загогулинами и оценим результат:
Очевидно, что от этой идеи придется отказаться, ибо это совсем уже край и ничего святого. Но игриво. Но в наборе такие буквы слишком выделяются и первоначальная задумка сделать монолитный брусок слова в итоге не находит своего воплощения.
Разработка расширенной латиницы — это монотонная и медитативная работа. Здесь важно не потерять фокус на желаемом результате и не допустить ошибку. Упорство и труд — все перетрут!
Когда латиница дорисована, мы можем переходить к кириллице.
Кириллица
По озвученному выше алгоритму для кириллицы сначала строим бреве для буквы Й. А потом генерируем часть кириллических символов, идентичных латинице.
Глифс автоматически импортирует латинские буквы в виде компонентов в соответствующие кириллические глифы.
Достроим оставшиеся буквы, от прописных к строчным.
У Б немного (кратно 15 у.е.) укоротим носик для оптической компенсации.
У букв Д, Ц и Щ делаем короткие ноги и хвосты.
По общей стратегии мы должны были или подтянуть хвосты с ногами над базовой линией, или совсем их отрезать. Но в данном случае и то и другое решение нам не подходят.
Если поднять ноги и хвосты, то такой небольшой зазор между нижним горизонтальной штрихом и базовой линией очень режет глаз. Если проводить ампутацию, то при таком коротком выступе справа буква Щ будет считываться как Ш, что недопустимо.
Поэтому максимально укорачиваем нижние выносные элементы у этих букв и делаем вид, что все нормально.
Ж собираем из двух К. Так лучше не делать, но иногда можно.
И у нас не просто отраженная N. Опускаем визуальный центр соединительного штриха ниже базовой талии. Этим мы подчеркнем каллиграфическую логику построения этой буквы.
Рисуя букву У, учитываем, что в месте соединения наклонных штрихов не должно получиться темное пятно.
Вы только посмотрите, какая страшная в этом месте У в Импакте! Это просто кошмар. Как минимум в этой букве победа одержана.
Сверху — Импакт. Снизу — наш ответ-привет Джеффри Ли.
Высоту овала у Ь, Ъ, Ы выравниваем по латинской h.
Строя Э, следим за длиной язычка. Она должна быть длинней, чем у З.
В кириллице 25 строчных букв из 33 по конструкции повторяют прописные. В латинице всего 6.
Обязательно посетите источник изображения: http://www.paratype.ru/e-zine/issue02/knowhow.htm
Здесь наше решение скруглять углы в строчных начинает играть нам на руку не только в случае с латиницей, но и избавляет от однообразности форм в кириллице:
Даже в букве к найдем местечко округлым формам.
В строчной м, в результате попытки совместить угол наклона и скругление, зазор между штрихами получается только 45 у.е. Не идеально, но достаточно.
Как и в строчных латиницы, в большинстве строчных кириллицы тоже делаем острый вход овалов в вертикальные штрихи.
Ремарочка. Поскольку у нас юникейс-шрифт, нам важно, чтобы строчные символы отличались от прописных. Кроме скругления острых углов именно такой острый вход позволяет сделать это различие существенным.
Сравните, например, эти пары прописных и строчных:
Таким образом число букв, одинаковых по форме в рамках кириллицы у нас сводится к минимуму.
Переходим к расширенной кириллице.
Расширенная кириллица
Расширенную кириллицу собираем как и расширенную латиницу: действуя чисто интуитивно, генерируем часть знаков автоматически, а оставшиеся знаки дорабатываем вручную.
Делаем наборы Adobe Extended и просто Extended.
Здесь мы опять вынуждены отойти от концепции единой высоты всех глифов в пользу различимости и читаемости. Верхние и нижние выносные элементы не загоняем под линию капса и выше базовой, но при этом делаем максимально короткими.
И помним, что у строчных вариантов букв есть скругления:
В итоге получаем следующий набор:
Adobe Extended
и
Extended
При построении знаков расширенной кириллицы максимально используем компонентный подход и логику отступов, выступов и расстояний, полученную и отработанную на предыдущих этапах.
Стараемся изо всех сил! Однако, некоторые буквы заставляют подумать и поломать голову над конструкцией своей формы:
Через тернии к звездам, в результате получаем итоговую кассу кириллицы:
Отлично. Можно заняться цифрами.
Цифры
Исходя из постановки задачи мы не будем рисовать ни старостильные, ни табличные, ни другие комплекты цифр. Остановимся на обычных 10 арабских цифрах.
Ноль получаем из латинской O, добавляя в контур внутреннего просвета скругление.
Да, ранее мы договорились этого не делать. Но этот уговор был для букв, а не для цифр. К тому же в нашем случае это не минус, а плюс. И вот почему.
В любом шрифте важна четкая различимость похожих друг на друга по форме букв и символов. Особенно в навигационных шрифтах.
В хорошем шрифте человек не должен ошибаться, читая З как Э или как цифру 3. Аналогичная история с буквами I, l и цифрой 1. Желательно не допускать путаницы и в буквах O, o и цифре 0.
Если мы допускаем, что у нас строчная o эквивалентна прописной O, то хотя бы ноль у нас должен отличаться от них хоть чем-нибудь. И внутреннее скругление как стилистический прием может нам помочь в этом.
Можно, конечно, было сделать ноль с косой чертой или точкой в серединке. Но при наших узких просветах этот вариант не ок.
O, o и ноль.
Ну, а раз ноль у нас со скруглением, то этот прием надо распространить и на остальные цифры.
Горизонтальная черта у 4 срифмована с окончанием овала у 3 и 5.
Вход овала у 6 и 5 такие же как в элементах строчных букв, острый.
Построив цифры, проверим проблемные комбинации знаков и убедимся, что они обладают хотя бы минимальной различимостью.
У тройки язычок короче, чем у З.
Тут совсем все хорошо.
Идем дальше. Осталось добить знаки препинания, математические знаки, скобочки и прочую мелочь.
Пробел
Ширина пробела штука хитрая и зависит от характера и пропорций шрифта. Универсальной формулы ее определения нет, но есть ориентиры, от которых можно начинать плясать.
Напримеро, Ян Чихольд в книге «Образцы шрифтов» рекомендует делать «измеримое расстояние между словами… примерно вдвое шире трети от высоты буквы n».
В нашем случае это 700 у.е., поделенных на 3 и умноженных на 2, т.е. ~ 470 у.е. Даже с учетом полуапрошей соседствующих с пробелом букв это очень много. Очевидно, что такая дырища между словами нам не подходит. И все потому что высота строчных у нас умышленно завышена, а внутрибуквенный просвет умышленно уменьшен. Эта формула подходит к более стандартным по пропорциям шрифтам.
Есть и другие предложения. Например, отталкиваться от ширины строчной i. В нашем случае это 230 у.е. с учетом полуапрошей. Это уже больше похоже на правду для зауженного гротеска.
В конечном итоге задача в определении ширины пробела заключается в подборе достаточного значения, при котором отдельные слова считывались бы как отдельные элементы, но при этом не теряли связи между собой в общей строке.
Пробуем писать слова, тестируем разные варианты и опытным путем соглашаемся с шириной пробела в 200 у.е.
Знаки препинания и другие символы
Строим пунктуацию.
Точку делаем размерами 150 на 150 у.е.
На основе точки строим двоеточие, точку с запятой, восклицательный и вопросительный знаки, многоточие и другие символы.
Длинное и короткое тире, а также дефис выравниваем по средней линии латинской H.
Длинное тире по ширине делаем равным латинской M, короткое — латинской N, а дефис — 300 у.е (на глаз и ровное круглое число).
По этой же средней линии выставляем кавычки-ёлочки.
Двоеточие и точку с запятой ровняем, например, по овалу мягкого знака. Это общая отметка для элементов правой части многих строчных знаков.
В слэше сохраняем угол наклона из латинской A. Обратный слэш строим как отраженный компонент слэша.
В Импакте вопросительный знак очень характерный и какой-то странный. Благодаря почти ровному левому краю он плотно прилипает к концу строки, но по форме больше похож на обрюзгшую P. Дичь какая-то. Мы пойдем более очевидным путем.
Слева — Импакт, справа — наш вопросительный знак.
Далее строим математические символы,
стрелочки,
амперсанд и другие знаки.
Завершаем построение знаками валют. Знак рубля добавляем через меню «Glyph / Добавить глифы…»
Отрисовываем основные знаки валют.
По завершению мы получаем кассу из ~580 глифов. На самом деле, не так и уж много для шрифта.
Теперь все это добро надо откернить и отхинтовать.
Кернинг
Задача кернинга как процесса — подобрать оптимальные межбуквенные расстояния за счет расстановки уникальных полуапрошей и создания таблицы сдвигов этих полуапрошей в между определенными парами букв.
Кернить будем в несколько этапов.
Сначала зададим полуапроши. Зашитые в файл шрифта кернинговые таблицы значений игнорируются в некоторых программах и не включаются по умолчанию в вебе.
Совет. Чтобы включить кернинг и другие опентайп-возможности шрифта на веб-странице, используйте специальные CSS-правила.
Поэтому для начала важно правильно расставить полуапроши для тех случаев, когда кернинг попросту не поддерживается.
В новой вкладке Глифса пишем текст типа «HHHAHHH», ставим курсор перед латинской A и выставляем для нее полуапроши таким образом, чтобы межбуквенное расстояние во всем ряду было максимально однообразным по площади светлого. Обойдемся минимумом и установим полуапроши и слева и справа в ноль.
Отрицательные значения полуапрошей не запрещены, но лучше не надо.
Далее, нажав сочетание клавиш Fn+Влево, на месте A мы увидим следующую букву из общей кассы знаков. Выставляем полуапроши для этой буквы и повторяем процедуру для всех букв.
Если буква создана с применением компонентов и наследует значение полуапрошей, то пропускаем ее.
На заметку любителям вариаций.
Другой вариант создать оптимальное пространство между буквами без применения кернинга — это использование лигатур.В Глифсе создавать их очень просто. Например, вы хотите сделать лигатуру ff. Создайте глиф с именем «f_f» и дважды добавьте в него компонент буквы f. Настройте нужное расстояние между объединенными буквами, укажите полуапроши и класс кернинга (если нужно).
Далее идете в окно настроек шрифта, во вкладку «ОТ-фича».
На самой нижней панели окна сначала жмёте кнопку «Обновить», а потом «Компилировать».
Глифс сам создаст за вас необходимые записи опентайп-фич и включит их в файл при генерации готового шрифта.
Опентайп-фичи — это вагон и маленькая тележка специй для вашего шрифтового бульона! По-быстрому разобраться с синтаксисом и возможностями поможет поверенная книга.
Следующих шаг — кернинг с применением классов.
Подгонка букв друг к другу — работа однообразная. Многие буквы имеют слева или справа похожий контур и с одними и теми же соседями ведут себя похожим образом. Например, скорее всего латинскую A надо будет ставить на одинаковое расстояние и от V, и от W, не так ли?
Для таких случаев были изобретены кернинговые классы. Логика следующая: распределяем буквы по классам, значения кернинга задаем между классами, а все буквы, входящие в эти классы, будут автоматически наследовать эти значения. При этом для каждой буквы в классе можно сделать исключение при назначении дистанции до отдельной буквы или другого класса.
Все буквы по форме занимаемой площади можно условно поделить на округлые (О, D, S), треугольные (A, V, T) и прямоугольные (H, E, N). Используя такое представление о форме буквы, принято создавать соответствующие классы и кернить их между собой.
Поскольку в нашем шрифте даже округлые буквы стремятся к форме прямоугольника, то мы будем считать их тоже прямоугольными. Это упрощает нам задачу и классов получится меньше.
Для определения классов в шрифте надо смотрим на всю палитру глифов с высоты птичьего полета и выявляем те символы, которые по контуру выбиваются из общего набора. Именно они создают избыточные пустоты и неприятные нахлёсты, с которыми борется кернинг.
Определим следующие классы:
— «А» для букв типа A и производных от нее с диакритикой;
— «V» для букв типа V, W, T и производных от них с диакритикой;
— «b» для букв типа b, у которых справа чуть больше белого;
— «d» для букв типа d, у которых слева чуть больше белого.
Используя уже известное нам сочетание клавиш Fn+Влево (или Вправо), пробежимся по всем символам шрифта и расставим для них кернинговые классы. Класс задается на серой информационной плашке в самом низу, слева и справа. Слева — это класс для левой стороны буквы, справа — для правой.
Проставив классы, набираем соответствующие буквосочетания и керним классы между собой. Выбираем значения, кратные 15 у.е.: 30, 45, 60 у.е.
Если кликнуть на иконку замочка, и после этого ввести новое значения, то можно создать исключение для данной пары классов/глифов.
Третий этап — кернинг им. Джованни Лемонада. Извлекаем из закладок браузера ссылку http://lemonad.livejournal.com/74426.html и выполняем описанные в посте инструкции—копируем со страницы приведенные сочетания букв и знаков во вкладку глифса и выставляем кернинг для всех приведенных пар.
По окончанию кернинга пар, назначаем соответствующим глифам еще три класса: «quotedbl» (под кавычки и им подобные глифы), «period» (под точку и её подобные) и «hyphen» (под дефис и ему подобные).
Другими словами, откернив знак точки, назначаем ей класс «period». Этим мы закрепляем за этим классом значение. Потом назначаем символам, похожим на точку этот же класс «period». Это будут символы запятой и многоточия. Добавленные в класс символы начинают принимать значение кернинга класса.
Пар три, а класс — один!
Математические знаки и служебные символы в рамках нашей задачи можно не кернить, достаточно задать им одинаковые полуапроши в 15 у.е.
Полученную таблицу кернинга пар можно посмотреть в специальном окошке.
Рекомендую пробежаться по ней взглядом, чтобы удалить нулевые смещения, закрыть открытые классы, да и просто убедиться, что все хорошо.
В результате при наборе мы должны наблюдать ровный и четкий горизонтальный ритм.
Теперь можно переходить к хинтовке.
Хинтовка
Хинтовка требует понимания, зачем вы вообще ее делаете. Мы же хотим сделать отображение знаков более четким в мелких кеглях.
В настройках шрифта (Cmd+I) указываем ширину вертикальных и горизонтальных стемов (штрихов). Автоматически генерируем зоны выравнивания и удаляем все, кроме тех, что относятся к базовой линии и линии высоты прописных и строчных. Эти параметры нужны для работы алгоритма автоматической хинтовки Глифса.
Полностью полагаться на автомат смысла нет, поэтому для всех глифов выполняем следующую процедуру.
Открываем глиф, жмем правую кнопку и в контекстном меню выбираем «Автохинтовка». Глифс автоматически прохинтует эту букву.
Если полученный результат для этого глифа нас устраивает, идем дальше. В противном случае расставляем хинтовку самостоятельно, удаляя и добавляя горизонтальные и вертикальные хинты.
Чтобы добавить хинт, надо выделить соответствующие точки (или точку) контура и использовать пункты из контекстного меню «Добавить… хинт».
Чтобы удалить хинт, надо кликнуть на метку с метриками хинта, тем самым выбрав его, и нажать клавишу «Delete» на клавиатуре.
Повторяем процедуру для всех глифов.
Исключение делаем для глифов, которые полностью собраны из компонентов других глифов.
Главное не заморачиваться на деталях и хинтовать только основные штрихи, не трогая мелкие детали и выступы. В нашем случае хинтовка различных мелких деталей в виду их небольших размеров относительно всей буквы просто не даст результата.
Результат хинтовки проверяем в продуктах Эдоби. Например, в Фотошопе или Индизайне, экспортируя шрифт в специальную папку (Cmd+E).
Графический редактор перезапускать не надо, шрифты автоматически подцепятся из этой папки и обновятся после экспорта. Чтобы увидеть изменения, достаточно перевести текстовый слой в режим редактирования.
При помощи функции экспорта можно сгенерировать шрифт в OTF, TTF и различные веб-форматы.
Когда все готово, остается только тестировать.
Тестирование
Тестировать шрифт лучше с самых первых этапов разработки. Стоит периодически экспортировать файл и проверять, как он ведет себя в реальных условиях. Набирать панграммы, слова, тексты, заголовки.
В этом есть какая-то визуальная магия, когда ты видишь, как набор векторных контуров постепенно превращается в игру белого и черного, средство выражения смысла, эмоции, характера. Когда из ничего вдруг возникает продукт многоразового употребления и полезный инструмент.
Тестировать лучше на тех примерах, которые отражают суть шрифта, его задачу и предназначение. Если вы делаете шрифт для печати, то важно смотреть, как он ведет себя на бумаге.
В нашем случае это мемы.
Перед релизом бывает полезно отложить шрифт на недельку, месяц или полгода в темный ящик. Пусть полежит, побродит, поквасится, настоится.
В ходе разработки глаз замыливается и нужно время, пока мозг подзабудет эту работу, чтобы взглянуть на нее свежим взглядом и увидеть то, что раньше скрывалось из вида. Где-то контур не тот, где-то закралась ошибка, а где-то захочется увидеть совсем другой пластический ход.
Но будьте осторожны! Как и ремонт жилья, закончить шрифт не возможно, его можно только зарелизить. Всегда будет желание добавить поддержку еще одного языка или новые опентайп-фичи.
Но мир не будет ждать вечно. Каждому событию своё время. Поэтому умейте остановиться, когда шрифт уже решает поставленную задачу. Помните, зачем все это делается.
Самый сложный этап
Самое сложно и приятное в разработке шрифта — это дать ему имя. Это почти как ребенка назвать. Или лодку. Или тауэр.
Не торопитесь с названием. Дайте имени самому найти вас.
Присматривайте несколько вариантов, и помните, что правильное слово может осенить вас совершенно неожиданно. Кого-то озарение посещает во время утреннего кофе, к кому-то муза приходит только ночью, а кто-то видит ответы во сне.
Задавайте себе вопросы.
Как может называться шрифт, который создан чтобы победить Импакт?
Как назвать будущего героя всех мемов?
Кто осмелился бросить вызов бессмертному интернет-богу?
Конечно… «Мемасик»! THE MEMESIQUE FONT
Открываем настройки шрифта и победоносно финишируем, занося имя гарнитуры в соответствующее поле.
В следующей части…
состоится презентация шрифта «Мемасик» и вместо нас будут говорить стволы!
[## Перекричать Impact
Часть 3. Скачать шрифт «Мемасик» бесплатно, без СМС и регистрации
Ребята-котята!
- Если остались вопросы, напишите их в виде реплики к тексту или пришлите на почту egor.stremousov@gmail.com.
- Если вас заинтересовала тема создания шрифтов, то рекомендую вам присмотреться к курсу «Свой шрифт». Смельчаки могут не ждать занятий в онлайне, а купить их в записи, там тоже все просто и понятно. Мопед не мой, реклама чисто от души. Больше шрифтов Родине!
- Каждое ваше сердечко и репост в социальные сети говорят о вас как об эрудированном и развивающемся человеке.
- Другие шрифты и проекты: Egor Stremousov