Как сделать самому шрифт: Как создать собственный шрифт

Содержание

САМАЯ БАЗОВАЯ ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ

07.07.2017

Мне кажется у многих из тех, кто увлечен рисованием буковок и создания леттеринга, в какой-то момент возникает мысль: а не превратить ли всю эту красоту в шрифт? Чтобы можно было не только любоваться на конкретную композицию, но печатать эти прекрасные буковки на настоящей клавиатуре и создавать еще больше красоты… Ну по крайней мере так было у меня 🙂 Когда я осознала, что шрифт можно создать самостоятельно, у меня случился буквально переворот сознания (наверное, это именно то, что в английском называется «aha-moment»).

И я начала пытаться понять, как же это сделать. Информации было мало, а та, что была, была непонятная и сложная. Я заблудилась в этом дремучем лесу терминов и чуть было не забросила затею научиться создавать шрифты. Но каким-то чудом не сдалась, продолжила пытаться и сделала свой первый шрифт Bronks — далекий от идеала, но очень ценный в плане опыта. Про то, как создавался Бронкс я, кстати, уже писала отдельную заметкy.

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

ШРИФТ НАЧИНАЕТСЯ С БРИФА

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

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

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

ОТРИСОВКА ГЛИФОВ — ДЕЛО ДНЯ 🙂

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

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

Коротко могу сказать, что первый шрифт я бы советовала делать простым и лаконичным, иначе, если будете сразу пытаться сделать и начальные, и конечные варианты букв, и кириллицу добавить к латинице, то вы просто не доделаете шрифт (а если доделаете, вряд ли это окупится, тк в шрифтоделании без ошибок не обойтись, умение видеть маленькие помарки и детали, которые влияют на качество шрифта, появляется только с практикой). Поэтому вначале лучше всего обойтись стандартным набором A-Z, a-z, 0-9, основные знаки препинания.

Почему я выделяю для отрисовки шрифта полдня-день? Потому что когда «ловишь волну», то есть нащупываешь некий стиль, атмосферу шрифта, то лучше отрисовать все в один заход, пока рука разработана. Это, наверное, касается больше рукописных шрифтов (другие делать пока не пробовала). Если отложить и попробовать нарисовать оставшуюся часть букв потом, они гарантированно будут отличаться, и уйдет время на то, чтобы снова «настроить руку» и начать попадать в общий стиль.

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

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

ЦИФРОВАЯ ЧАСТЬ ПРОЦЕССА

Когда шрифт нарисован, настает пора его оцифровывать. Моя цепочка обработки выглядит так: сканер — фотошоп — иллюстратор. В сканере выставляю максимальные настройки, в фотошопе делаю выше контраст и чуток чищу контуры, в иллюстраторе делаю трейс, нахожу алфавит (то есть расставляю буковки в последовательности, пробую «собрать» несколько слов, чтобы проверить, как все выглядит) и чищу-чищу-чищу буковки.

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

Чищу буковки в иллюстраторе я несколькими способами: во-первых, волшебным ластиком от Astute Graphics (часть платного плагина, про который я писала тут), к сожалению бесплатной альтернативы хотя бы приближенного качества я не знаю, во-вторых, стандартным иллюстраторским карандашом — выделяю контур и делаю его аккуратнее.

После этого я готовлю шрифт к экспорту — это отдельная большая история, про которую в шрифтовом воркшопе будет, скорее всего, аж несколько видео, — и переношу буковки в Glyphs.

ХОРОШАЯ ШРИФТОВАЯ ПРОГРАММА — ЭТО ВАЖНО

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

Я в свое время выбрала Glyphs потому что хотелось, с одной стороны, сразу привыкать к «правильной» шрифтовой программе (то есть той, которую можно использовать для создания действительно продуманных, сложных, насыщенных элементами шрифтов, а не тыкаться месяц в какой-нибудь бесплатной только чтобы потом выяснить, что там нельзя создавать условные лигатуры), с другой стороны, я не была готова платить в несколько раз дороже за Fontlab. Судя по всему выбор был правильный — знаю людей, которые перешли с Фонтлаба на Глифс и говорят, что у последнего интерфейс понятнее 🙂

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

После экспорта в Глифс я настраиваю много разных штук: буквенные группы, спейсинг (негативное пространство слева и справа от букв, если грубо), кернинг (расстояния между конкретными парами букв), добавляю языковую поддержку, лигатуры (особые варианты буквенных сочетаний), начальные и конечные варианты (с длинными хвостиками-свошами-флоришами и вот этим всем) и альтернативные наборы, если предполагаются. Попутно настраивается код, чтобы у конечного пользователя все работало так, как я задумала, и без проблем. Вот этот этап, который я описала в пару предложений, это на самом деле то, что занимает около 70% времени при создании шрифта 🙂 А коротко описываю я его не потому что жадина, а потому что про один только кернинг можно написать заметку в три раза длиннее этой, и все равно будет мало. В курсе про шрифты буду останавливаться на всех этих моментах очень подробно (вот как раз сейчас пытаюсь нащупать грань между «недостаточно подробно» и «слишком много информации для переваривания»).

Когда шрифт первично настроен, я тестирую его в шрифтовом редакторе — сначала на специальных текстах (где собрано максимальное количество «трудных» буквенных сочетаний), потом на рендомных новостях, скопированных из гугла. Когда все настроено, наступает момент счастья 🙂 Когда шрифт готов и им можно напечатать настоящее слово — для меня самый радостный момент, обычно я несколько минут сижу и печатаю всякие глупые фразы :)) После нескольких минут начинаю видеть мелкие помарки и детали, которые хочется доделать, радость проходит, сажусь составлять список / править.

Тестирую новый шрифт, пишу глупые фразы, вот уже увидела, что бы хорошо поправить 🙂

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

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

Если вы хотите узнать про создание шрифта подробнее и сделать свой собственный шрифт под моим руководством, вся эта информация в понятном и доступном виде дается в курсе «Создание рукописного шрифта с нуля».

Меня зовут Ольга, со мной можно на “ты”. Я пришла на стоки с абсолютно нулевыми знаниями в 13м году, всему научилась с нуля и сейчас живу за счет стоков в Европе. Еще я рисую картинки для частных заказчиков и учу других людей зарабатывать творчеством 🙂

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

12 способов кастомизировать шрифт — Дизайн на vc.

3258 просмотров

Кастомизация — инструмент для решения огромного списка задач дизайна и отстройки фирменного стиля бренда.

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

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

Техническая кастомизация

1. Изменение параметров шрифта под референсный шрифт

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

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

Изменение параметров шрифта TT Commons под референсный шрифт Arial

2. Отключение или кастомизация OpenType features

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

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

Отключение или кастомизация OpenType features

3. Изменение спейсинга в шрифте

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

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

Изменение спейсинга в шрифте

4. Сокращение кассового состава гарнитуры

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

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

Сокращение кассового состава гарнитуры

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

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

5. Кастомизация средней линии, межстрочного расстояния

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

Отличным примером может служить абстрактный объект «Кнопка», внутри которого дизайнер интерфейсов помещает текстовую строку. Чтобы она в различных интерфейсах выравнивалась по центру, необходимо индивидуально настроить параметры ascender и descender внутри шрифта.

Кастомизация средней линии

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

Кастомизация межстрочного расстояния

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

Графическая кастомизация

1. Добавление логотипа в шрифт

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

Добавление логотипа в шрифт

Мы также можем скорректировать шрифт, чтобы он лучше сочетался с логотипом. Например, в логотипе у вас точки круглые, а в шрифте — квадратные. Это можно довольно легко исправить.

2. Изменение формы знаков или отдельных элементов

В зависимости от вашей айдентики можно исправить форму одного, нескольких или даже всех знаков шрифта.

Однажды к нам обратилась компания, которая хотела использовать наш шрифт TT Commons в качестве своего корпоративного шрифта. В особенности им понравилось скругление в букве t. И они попросили нас добавить аналогичные скругления в буквы a и d. Мы проанализировали их логотип и фирменный стиль, чтобы предложить органичное решение для остальных букв. В итоге у нас получился кастомизированный TT Commons, который решает задачу клиента.

Изменение формы знаков

3. Индивидуализация визуального образа шрифта путем замены знаков стилистического сета

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

Замена знаков стилистического сета TT Firs Neue

Если вы набираете шрифтом большие массивы текста, возможно, мы хотели бы в основном использовать минускульные цифры вместо маюскульных. В таком случае можно поменять цифры, которые стоят по умолчанию в шрифте на старостильные. Или же, если вы часто верстаете таблицы, по умолчанию можно поставить табулярные цифры и валюты.

4. Создание промежуточного начертания

Изменение толщины штрихов в шрифте — тоже частый запрос дизайнера. Если вы не нашли идеальную для вас толщину в семействе — Regular кажется слишком тонким, а Medium слишком массивным, можно создать промежуточную и точно ее подстроить под задачу.

Создание промежуточного начертания

Для одного нашего клиента мы меняли толщину начертания Medium в шрифте TT Norms. Положение на оси толщины было 500, а клиенту необходимо 475. Кажется, что изменение незначительное, но дизайнер точно знает, как будет выглядеть лучше!

5. Добавление алфавита или языка

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

Добавление алфавита или языка

Кастомизация лицензий

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

1. Для компаний, которые имеют дочерние или аффилированные компании

Мы можем прописывать в лицензию возможность расширения использования права использования шрифта в рамках всего холдинга, а не конкретного юридического лица.

Кастомная лицензия для компаний, которые имеют дочерние или аффилированные компании

2. Для компаний, которые передают работу с дизайном на аутсорс

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

Кастомная лицензия для компаний, которые передают работу с дизайном на аутсорс

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

Но при покупке лицензии чаще всего мы делаем кастомизацию в подарок!

Вместо заключения

Иногда кастомизация может зайти так далеко, что в итоге получается новый шрифт. Но это уже другая история.

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

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

Галерея | FontStruct

17102022 Опубликовано: 17 января 2023 г.
Последнее редактирование: 16 января 2023 г.
Создано: 13 января 2023 г.

Цветная версия зулу. Вы можете использовать вторую версию каждого глифа, чтобы избежать повторения некоторых слов. Эти цвета вдохновлены плакатом 2010 года студии Apeloig.

Это клон zulu eYe/FS