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

Программы для создания и редактирования шрифтов

Fontlab


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

Сайт:

The Font Creator

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

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

Скачать:

FONTOGRAPHER

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

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

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

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

Сайт:

TypeTool

TypeTool  — это базовый редактор шрифтов для Windows и Mac OS. Он в основном предназначен для студентов, хобби-типографов и творческих профессионалов, которым иногда нужно создавать или настраивать шрифты. Он поддерживает максимум 55535 глифов, поэтому вы можете создать шрифт любого размера. Как и Fontographer, он имеет урезанную функциональность, но с более совершенным профессиональным пользовательским интерфейсом Fontlab Studio.

Сайт:

BitFonter

BitFonter — профессиональный редактор растровых шрифтов для Windows и Mac OS. Он позволяет создавать и изменять растровые шрифты и преобразовывать их в форматы растровых шрифтов, а также применять специальные эффекты к наброскам шрифтов.

Сайт:

Scannahand

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

Сайт:

Glyphs

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

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

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

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

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


Сайт:

FontStruct

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

font-style

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

Синтаксисfont-style: normal | italic | obliqueАргументыnormal Обычное начертание текста.italic Курсивное начертание.oblique Наклонный шрифт. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.

ПримерP { font-style: italic; /* Курсивное начертание */ }

Читаемость

Если вам нужен «самый читаемый шрифт», то его нет.

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

Но есть какие-то общие законы.

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

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

Я расскажу сначала об антиквах, у которых есть отчётливый исторический флёр. А потом — о гротесках, довольно современных шрифтах.

Векторный или растровый шрифт?

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

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

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

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

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

Но появляются разные бонусы:

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

1. Как нарисовать букву А

Шаг 1

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

Я начала с создания эскиза каждой буквы, пытаясь сделать каждую из них уникальной, но в то же время сохранить общий стиль. Я буду использовать этот эскиз как основу для набросков, которые мы будем создавать в Adobe Illustrator.

Имейте в виду, что Fontself Maker работает с Adobe Illustrator CC 2015.3 и новее, но чтобы использовать цветные шрифты, вам понадобится версия CC 2018, поэтому не забудьте обновить ПО, если ещё не сделали этого! 

Шаг 2

Начните с создания Нового документа нужного размера в Цветовом режиме RGB. Если вы выбрали другой Цветовой режим, все цвета будут переведены в  RGB, даже если определилось в CMYK или если документ в модели цветоделения CMYK.  Вы можете узнать больше о модели цветоделения в Fontself на их справочной странице.  

Давайте начнём с буквы А. Возьмите Инструмент «Многоугольник» (вы можете найти его в том же выпадающем меню, где и Инструмент «Прямоугольник» (М)) и кликните в любом месте Монтажной области. Установите количество Сторон на 3 и создайте треугольник. 

Удалите цвет Заливки и установите цвет Обводки на тёмно-фиолетовый на панели Цветов. Теперь на панели Обводки (Окно > Обводка) установите Толщину 2.5 и Углы на Скруглённые

Теперь можем удалить нижнюю часть фигуры, которая нам не нужна. Возьмите Инструмент «Прямое выделение» (А) и нажмите на нижний край треугольника. Нажмите клавишу Delete (или Backspace, если у вас Mac), чтобы удалить его.

Шаг 3

Выделите фигуру при помощи Инструмента «Выделение» (V) и нажмите Enter, чтобы открыть окно Перемещения. Установите значение Горизонтали на 25 пикселей и Вертикали – на 0 пикселей, затем нажмите «Копировать» для создания копии фигуры и сдвиньте её вправо.  

Шаг 4

Выделив обе фигуры, возьмите Инструмент «Создание фигур» (Shift-M) и, удерживая Alt, кликните на правой части, чтобы её удалить. 

Шаг 5

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

Сгруппируйте (Control-G) созданные элементы пера и дважды кликните на Инструменте «Зеркальное отражение» (О). Выберите Вертикальную ось и нажмите «Копировать» для отражения фигуры на противоположной стороне. 

Шаг 6

Возьмите Инструмент «Эллипс» (L) и, удерживая Shift, создайте круг 10 х 10 пикселей с тёмно-синей обводкой и бирюзовым цветом Заливки

Совет: используйте Инструмент «Пипетка» (I) для выбора цвета заливки или обводки, либо других визуальных настроек и применяйте эти цвета к другим объектам. Вы можете перейти к настройкам Инструмента «Пипетка (I), дважды кликнув на панели Инструментов и затем выбрав параметры, которые вы хотите применить. 

Шаг 7

Скопируйте обводку, выделив её и перетащив на сторону, удерживая Alt. Используйте Инструмент «Перо» (P) для добавления опорной точки в середине линии. Затем примените Инструмент «Удалить опорную точку» (-), чтобы удалить верхнюю точку обводки. 

Шаг 8

Возьмите Инструмент «Перо» (P) или «Отрезок линии» (\) и, удерживая Shift, создайте горизонтальную линию поперёк буквы. Это будет перекладина буквы А. 

Скопируйте (Control-C > Control-F) обводку и перетащите её вниз. Сделайте её короче, сдвинув точки Инструментом «Прямое выделение» (А). 

Шаг 9

Теперь Инструментом «Перо» (Р) создайте зигзагообразную линию в верхней части буквы, как показано на картинке ниже. 

Добавьте ещё несколько штрихов на обеих сторонах буквы, сделав её более детальной. 

Шаг 10

Теперь, когда контуры буквы А готовы, давайте добавим цвет! Мы можем скопировать (Control-C > Control-B) букву и Спрятать копию на панели Слоёв, кликнув на маленькой иконке с глазом, на случай, если нам понадобятся эти контуры позже. 

Выделите видимую копию и перейдите в Объект > Быстрая заливка > Создать. 

Шаг 11

Теперь возьмите Инструмент «Быстрая заливка» (К) и проведите им по той области, которую хотите покрыть цветом. Как увидите красный контур, кликните на области, чтобы заполнить её. 

Продолжайте применять Инструмент «Быстрая заливка» (К) и выбирать новые цвета на панели Цветов для заполнения треугольников в верхней части буквы. 

Шаг 13

Используйте Инструмент «Прямое выделение» (А), чтобы вытащить пару элементов, сделав композицию более динамичной. 

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

Конверторы шрифтов

CrossFont 3.7

Разработчик: Acute Systems

Сайт программы: http://www.asy.com/

Размер дистрибутива: 676 Кбайт

Способ распространения: shareware (ознакомительная версия с ограничением на пакетную обработку http://www.acutesystems.com/cfsetup.exe)

Цена: 45 долл.

Работа под управлением: Windows 95/98/Me/NT/2000/XP/2003 Server

Основное назначение пакета CrossFont конвертирование шрифтов TrueType и PostScript Type 1 между платформами Macintosh и PC. Процесс преобразования не занимает много времени, да и сама программа очень проста в управлении и компактна, достаточно указать исходный и конечный типы файлов, загрузить конвертируемые файлы, определить папку для вывода и запустить процесс конвертирования. Программой поддерживается пакетная обработка файлов, поэтому процесс межплатформенного конвертирования файлов можно выполнять сразу для всей группы шрифтов.

В перечне возможностей программы автоматическое распознавание типа файла шрифта, поиск конвертируемых шрифтов в папках, включая поддиректории, поддержку операции drag-and-drop, сохранение кернинга в процессе конвертирования.

TransType Pro 3.0

Разработчик: FontLab Ltd

Сайт программы: http://www.fontlab.com/

Размер дистрибутива: 4,8 Мбайт

Способ распространения: shareware (ознакомительная версия добавляет водяной знак на конвертируемый символ http://www.pyrus.com/downloads/TR3WinDemo.exe)


Цена: 179 долл.

Работа под управлением: Windows 95/98/Me/NT/2000/XP и Mac OS 9/OS X

TransType Pro профессиональный шрифтовой конвертор, позволяющий конвертировать фактически любой шрифт TrueType и PostScript Type 1 между платформами Macintosh и PC. Программа отображает детальную информацию о каждом выбранном шрифте, включая разработчика шрифта, авторские права и пр. При желании можно включить просмотр текста, отформатированного выбранным шрифтом.

Пакет поддерживает конвертирование между всеми основными шрифтовыми форматами: PostScript, TrueType и OpenType внутри платформ это позволяет преобразовать шрифты в новый универсальный формат OpenType, чтобы сделать их совместимыми с последними версиями пакетов Adobe Creative Suite, Microsoft Office, Apple iWork и др. Кроме того, программа дает возможность конвертировать иногда использующиеся, например программами Adobe Photoshop, Adobe InDesign, Adobe Illustrator и др., шрифты Multiple Master (формат Multiple Master представляет собой PostScript-шрифт, который позволяет динамически изменять такие параметры, как насыщенность, ширина, начертание и оптический размер) в обычные шрифты. Это актуально, так как, несмотря на то что Multiple Master основан на PostScript, могут возникать проблемы при выводе текста на печать, поэтому в ряде случаев имеет смысл перед печатью осуществить конвертирование текста в кривые.

TransType Pro поддерживает пакетную обработку данных, что позволяет преобразовать сотни шрифтов одновременно, даже непосредственно из архивов Stuffit (*.sit).

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

Преимущества и недостатки иконочных шрифтов

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

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

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

Продавать или не продавать?

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

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

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

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

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

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

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

font-weight

Описание Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксисfont-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

Значения Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное, bolder — жирное; lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.

Пример H1 { font-weight: normal; /* Нормальное начертание */ } .select { font-weight: 600; /* Жирное начертание */ }

Возможно, Вам будет полезна эта информация:

Установка шрифтов

1. Способ для современных ОС.

После того как вы скачали Zip архив «fonts.zip» распакуйте его в специально заранее созданную для этого папку.

Обратите свое внимание, что в архиве помимо шрифтов, имеющих расширение «ttf» есть файлы с расширением «png» это картинки на которых показан как выглядит каждый шрифт. Для просмотра просто произведите двойной клик ЛКМ по файлу

Теперь выберем понравившейся шрифт, я рекомендую выбрать все. Зажимаем клавишу Ctrl проставляем галочки ЛКМ на файлах с расширением «ttf».

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

Установка.

Вот и все после перезагрузки компьютера можно приступать к написанию, но сначала рассмотрим алгоритм второго способа, предназначенного специально для «ретроградов», не использующих современные ОС.

2. Способ

• Выделяем шрифты вышеописанным способом, копируем их;

• идем по пути: C:WindowsFonts;

• при помощи горячих Ctrl+V вставляем в папку Fonts.


Не забываем перезагрузить ПК.

Создадим тетрадный лист в клетку

1. Откроем Word, во вкладке Вид выберем ориентацию страницы Разметка страницы.

2. Открываем вкладку Макет, выбираем инструмент Размер.

3. В открывшемся окне выберите пункт Другие размеры бумаги…

4. В меню Параметры бумаги пункт Размер бумаги создадим тетрадный лист с реальными размерами. Размеры тетрадного листа 16,5×20,5 см, но при распечатывании на принтере получается меньше чем нужно во всяком случае у меня так, поэтому немного увеличить до 19,5×22,5см.

5. Пункт Поля поможет выставить параметры полей, где Верхнее и Нижнее должно быть по 0,5 см. Левое 2,5, а Правое 0,8 см. Подтверждаем намеренность своих действий кнопкой ОК.

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

7. В параметрах нужно просто выставить размер клеток, который равняется как известно 0,5см.

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

Смотрите как мне удалось справиться с этой задачей. Вставка – Фигуры – Линии.

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

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

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

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

Кстати эти шрифты будут работать и в других редакторах, например, Paint, Photoshop или другие.

Всем пока до встреч на блоге!

Валерий Семенов, moikomputer.ru

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

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


С этим читают