Как сделать графический шрифт

Создание шрифта с нуля за 24 часа

Графический дизайнер Джеймс Барнард бросил себе вызов — он захотел за 24 часа создать шрифт и отправить его в Google Fonts. Как он это сделал и что узнал в процессе — в нашем переводе статьи Джеймса.

Я большой фанат One Day Builds Адама Сэвиджа. В начале дня у него есть только материалы, а в конце он становится обладателем чего-то, что он хотел. Создание шрифта непростой процесс и я бросил себе вызов: создать с нуля абсолютно новый шрифт и отправить его в Google Fonts за 24 часа.

В старом блокноте у меня были эскизы нескольких букв. Я хотел создать узкий шрифт без засечек, который можно будет использовать на постерах или на других больших изображениях. Во время работы в Men’s Health я использовал шрифты вроде Tungsten или Heron, которые выглядят ужасно в тексте, но отлично смотрятся в заголовках или промоматериалах (которые и были моей основной работой). Это был стиль, который я и хотел создать.

13:00, среда

Я отправился в Adobe Illistrator с двумя-тремя буквами, которые были у меня в эскизах. Я создал сетку из пяти строк — для линии нижних выносных, базовой линии, линии строчных, линии прописных и линии верхних выносных букв. Затем я определил ширину прописных букв и толщину основного штриха.

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

Вот как это выглядит на иллюстрации

Сначала я создал буквы O и B. Я решил, что эти буквы будут иметь не форму овала, а форму скругленного угла. Многие буквы будут выглядеть, как высокий прямоугольник, но O, B и D будут иметь скругленные углы вместо овалов.

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

Мой шрифт был очень простым, но с одним «украшением». Любая апертура, то есть, срез концов полуовала, должна была быть отрезана под углом. Самыми сложными буквами стали G и K.

Затем я приступил к строчным буквам. Это было сложнее, но с установленными правилами работать было проще. Я использовал больше «украшений», особенно в верхних выносных и нижних выносных элементах. Самыми сложными стали буквы f, g, a и e, так как они были абсолютно новыми.

21:00, среда

Я перешёл к другим символам, таким как восклицательный и вопросительный знаки. Я стал работать быстрее и успел создать около 35 знаков.

Утро четверга

Утром я довольно быстро закончил цифры от 0 до 9 и начал создавать файл с шрифтом. Это было совершенно новым опытом. Мой знакомый каллиграф Иэн Барнард посоветовал для этого программу Glyphs. Я скачал программу, посмотрел несколько обучающих видео и понял, что неверно создал файл в Illustrator. Поэтому мне пришлось вставлять каждый символ вручную и подгонять его под правила программы.

10:00, четверг

Я начал заниматься интервалами и кернингом. Это было ужасно долго. Прежде чем заняться этим, нужно освоить множество сочетаний клавиш в программе. И перед кернингом вам нужно сделать интервал как можно ближе к тому, что вы хотите видеть в итоге. Для этого нужно измерить ширину отверстия в букве О и разделить ее на три. Такой интервал стоит поместить слева и справа от буквы.

11:00, четверг

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

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

Затем я конвертировал текст в прописные буквы и сделал то же самое для них.

12:59, четверг

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

Название шрифта? Odibee Sans (произносится как oh-dee-bee), то есть, One Day Build — ODB.

Создание шрифта: заключение

Я отправил Odibee Sans в Google в мае 2017, и он все ещё находится в очереди на добавление. Команда предложила мне пока уделить время дизайну шрифта, хотя они признали, что это противоречит духу проекта.

На создание шрифта ушел ещё один день. Я добавил все нужные знаки, а также внёс изменения примерно в 30 символов.

Источник

10 инструментов для работы со шрифтами и версткой

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

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

Шрифты

Google Fonts

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

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

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

Fontstorage

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

Во-первых, на сайте широкий выбор кириллических начертаний — сейчас доступны492 шрифта на русском языке. Во-вторых, во вкладке Font Playground вы можете сверстать часть текста, настроить цвета, фон и проверить, как будет выглядеть ваш текст на сайте. В-третьих, у сервиса есть плагин для браузеров Chrome, Firefox, Яндекс.Браузер и Opera. С его помощью вы можете определить шрифт и кегль гарнитуры на сайте, не открывая код.

Free Faces

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

Верстка и сетка самого сайта оставляют приятное впечатление.

Wordmark.it

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

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

Typeface

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

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

Fontbase

Инструмент, аналогичный Typeface, только для Windows, macOS и Linux. Позволяет систематизировать шрифты по папкам, проектам, начертаниям.

Есть интеграция с Google Fonts и Typekit, возможность подбирать шрифтовые пары и разрабатывать айдентику для компаний, интернет-изданий и наружной рекламы. Для комфортной работы вы можете настроить цветовую гамму и фон в приложении. Лицензионная версия стоит3 доллара в месяц, или29 долларов в год.

Fontbase помогает быстро и эффективно управлять шрифтами.

Верстка

Типограф

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

Типографская раскладка Ильи Бирмана

Незаменимый инструмент дизайнера для быстрого набора или вставки правильного тире, математического символа, ударения или глифа. Его разработал Илья Бирман, арт-директор бюро Артема Горбунова.

Ранее, чтобы поставить символ, нужно было знать наизусть код этого символа. Например, открывающая кавычка на Windows ставилась сочетанием Alt+0171, а закрывающая — Alt+0187. Больше не нужно запоминать коды: символы привязаны к отдельных клавишами и работают в сочетании с Alt или Alt+Shift. Например, чтобы набрать знак градуса °, используйте сочетание Alt+D. Для кавычек второго уровня „“ зажмите Alt+Shift+ Alt+Shift+>. Программа работает на macOS и Windows.

Kern Me

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

Тренажер Ильяхова

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

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

Заключение

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

Источник

Лучшие программы для создания и редактирования шрифтов.

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

10 лучших программ для создания и редактирования шрифтов

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

Microsoft Font Maker

Отличная программа для создания собственных шрифтов на основе рукописного ввода от компании Майкрософт, работающая с сенсорными экранами и стилусами. С помощью приложения путём перьевого ввода можно создать уникальный шрифт, настроить расстояние между символами и прочие параметры, экспортировать в формате TTF и использовать в Windows. Доступна бесплатная загрузка софта из магазина Microsoft Store.

CorelDRAW

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

Font Creator

Популярнейшая в мире программа для Windows и Mac, предлагающая полноценный функционал для создания и редактирования OpenType, TrueType и Web шрифтов, которые могут быть использованы в системе или браузере. Возможности редактора позволяют разрабатывать качественные фонты, изменять внешний вид символов, редактировать расстояние между символами, импортировать отсканированные изображения, просматривать готовые работы перед установкой и многое другое. Программой поддерживается формат масштабируемых цветных шрифтов, при этом созданные цветные глифы могут использоваться как для систем с поддержкой формата, так и тех, где она отсутствует. Доступен пробный 30-дневный период, в течение которого можно бесплатно пользоваться софтом без ограничений.

Glyphr Studio

Полнофункциональная программа для создания и редактирования шрифтов OTF, TTF и SVG, доступная для Windows, MacOS и Linux. Софт предлагает широкий набор инструментов, включая возможности импорта чертежей из Inkscape и Illustrator, SVG файлов и их изменения, позволяет настроить кернинг и лигатуры, осуществлять предварительный просмотр и многое другое. Особенностью софта является поддержка работы в режиме двух экранов, который делит Glyphr Studio между двумя мониторами.

BirdFont

Бесплатная программа с открытым исходным кодом и широким набором инструментов для работы со шрифтами. С её помощью легко создавать уникальные шрифты любой сложности или редактировать уже готовые. Применяя возможности приложения, можно рисовать символы на сетке, глифы поверх импортированных изображений, импортировать чертежи Inkscape и Illustrator и экспортировать проекты в TTF, EOT и SVG. Созданные в программе шрифты выпускаются по лицензии SIL Open Font BirdFont и могут свободно использоваться.

FontForge

Кроссплатформенный бесплатный редактор шрифтов с открытым исходным кодом, поддерживающий русский язык и обладающим большим количеством инструментов и функций. В программе можно рисовать буквы при помощи кривых, менять их форму и положение, импортировать SVG и EPS файлы из Inkscape и Illustrator, экспортировать в любой из множества поддерживаемых форматов (OpenType, TrueType, PostScript, Web Open Font и пр.), проверив перед экспортом на ошибки и несоответствия.

FontLab Studio

Профессиональный софт с широкими возможностями для проектирования гарнитур и изменения готовых шрифтов, доступный для Windows и Mac. Используя программу, можно создавать и редактировать шрифты в различных форматах, импортировать кривые, изменять заголовки, юникод-символы, типы глифов. FontLab Studio содержит большой набор инструментов и эффектов для создания, модификации и обработки шрифтов. Используется ПО дизайнерами, типографами, графическими студиями и прочими компаниями, чьей задачей является работа со шрифтами на профессиональном уровне. Бесплатно предоставляется 30-дневная полнофункциональная версия.

Fontographer

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

FontStruct

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

iFontMaker

Софт позволяет легко и быстро создавать шрифты, готовые к установке на iOS, Mac и ПК для любых приложений, а также веб-сайтов в формате TTF. Программу можно скачать из App Store и Microsoft Store. Версия для iPad была обновлена в 2020 году, в результате чего была добавлена поддержка многозадачности и перетаскивания изображений, элементов векторной графики из File Apps.

Онлайн-сервисы

Для тех, кто не хочет ничего скачивать на устройство, есть альтернативный вариант – использование онлайн-инструментов.

FontArk

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

Calligrapher

Веб-сервис позволяет легко превратить рукописный текст, загруженный в одном из поддерживаемых форматов изображений (PDF, PNG, TIFF, JPG), в векторный шрифт. Можно нарисовать несколько вариантов одного символа, которые будут использоваться в случайном порядке, что сделает шрифт более интересным. После обработки вы получаете готовый файл OTF или TTF. Инструмент позволяет также редактировать фонты, причём необязательно в одной сессии.

Cheap Font Generation

Платная онлайн-программа, позволяющая сделать шрифт из собственного почерка. Созданный набор символов можно использовать в различных программах и системах Windows, Mac или Linux. Загрузка готового файла TTF обойдётся в 4.99$

YourFonts

Ещё один онлайн-генератор, с помощью которого можно оцифровать свой почерк, превратив его в уникальный векторный шрифт (загрузка 9.95$), доступный для использования в приложениях и системах Windows, Mac и Linux.

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

Источник