Очень много было написано о дизайне шрифтов, особенно об истории их создания. Мы читали о множестве техник создания шрифтов. Но откуда, собственно, нужно начинать? Если вы – дизайнер или иллюстратор, и эта дисциплина вам в новинку, то с чего же вам начинать?
Мы нашли полезную информацию, которую собрали с множества источников, и решили собрать все воедино.
1. Начните с брифа
Создание шрифта – это долгая и кропотливая работа, поэтому очень важно иметь четкое понимание того, каким должен быть этот шрифт.
Разработка брифа безусловно потребует исследований и раздумий. Как будет использоваться ваш шрифт: он понадобится для специфического проекта или для личного пользования? Есть ли проблема, которую ваш шрифт решил бы? Впишется ли ваш шрифт в массив похожих дизайнов? Что делает его уникальным?
Вариантов много. Шрифты могут быть созданы, к примеру, специально для академических текстов или для плакатов. Только когда вы будете знать, как ваш шрифт может быть использован, тогда вы будете готовы начинать дизайн.
2. Фундаментальный выбор
Существует некоторое количество решений, о которых нужно помнить. Будет ли это рубленный шрифт или с засечками? Будет ли он основываться на рукописном тексте или будет более геометричным? Будет ли шрифт создан для текста и подходить для длинных документов? Или может он будет отображать текст в креативном стиле и будет лучше смотреться в крупном размере?
Подсказка: Предполагается, что дизайн рубленного шрифта дается начинающим сложнее, так как возможности таких шрифтов более специфичны.
3. Подводные камни на ранних этапах
Есть несколько подводных камней:
- Вы можете решить начинать с компьютеризации рукописного шрифта, что может быть полезным практическим упражнением. Но из-за того, что почерк очень индивидуален, ваш шрифт может не иметь большого успеха из-за своей специфичности.
- Не стоит брать за основу существующие шрифты. Переделав немного уже знакомый всем шрифт, вы не создадите шрифт получше и не разовьете свои навыки.
4. Используйте свои руки
Существует много материалов на тему того, как рисовать шрифты с помощью компьютерных программ, но мы настойчиво рекомендуем вам сначала нарисовать его от руки. Попытки сделать это на компьютере существенно усложнят вашу работу.
Попробуйте создать красивые формы первых нескольких букв на бумаге, а уже потом начинайте компьютерную работу. Следующие буквы потом могут быть сконструированы на основе существующих форм, в соответствии с ключевыми особенностями.
Подсказка: Вручную обычно получается нарисовать более гладкие и точные кривые. Чтобы было удобнее, не бойтесь поворачивать лист бумаги так, как вам нужно.
5. С каких символов начать
Создание сначала определенных символов может помочь вам задать стиль своего шрифта. Ну а потом эти символы будут использоваться как направляющие. Обычно “контрольные символы”, как их называют, в латинице – это n и o, а заглавные – H и O. Зачастую используется слово adhension, которое поможет протестировать базовые пропорции шрифта (но, некоторые пишут это слово как adhencion, потому что буква s может быть очень коварной).
6. Переносим шрифт на компьютер
Существует множество способов перенести рисунок на компьютер. Некоторые рекомендуют трассировочные программы, но многие предпочитают совершать эту работу вручную, чтобы иметь полный контроль над точками и формами.
Многие программы нуждаются в четком и ярком рисунке, поэтому как только вам понравился ваш шрифт, обведите его тонкой ручкой и заполните формы маркером.
Подсказка: Если вы обработали нарисованный шрифт так, как было описано выше, то вы можете просто сделать фото рисунка и работать с ним.
7. Выбор программы
Многим дизайнерам нравится использовать Adobe Illustrator. Для рисования отдельных форм и экспериментирования он отлично подходит. Но в последствии становится очевидным, что для создания шрифтов он не подходит. Вам захочется работать с программой, которая позволит работать с межбуквенным интервалом и созданием слов.
Отличная программа – FontLab Studio, но новый софт, такой как Glyphs и Robofont набирают все большую популярность. Эти программы недешевые, но у Glyghs есть “мини” версия в Mac App Store с некоторыми отсутствующими функциями, что не очень хорошо, потому что эти функции важны новичкам.
8. Использование программ
Не забывайте расположить крайние точки буквенных форм (верхняя, нижняя, правая, левая), чтобы лучше контролировать процесс.
9. Слова
Когда вы закончили все работы по приглаживанию форм, посмотрите, как он смотрится в полноценном тексте. Возьмите себе за цель проанализировать то, как шрифт смотрится в строке, абзаце и так далее. И не стоит ждать, пока вы сделаете весь алфавит.
Одна из самых популярных программ для дизайна шрифтов. Доступна на Windows и Мас.
Программа доступна на Windows, имеет интуитивный интерфейс и отлично подходит новичкам.
Еще один мощный редактор шрифта от FontLab, позволяющий создавать новые шрифты или изменять существующие. Доступен на Windows и Мас.
Эта программа работает на Windows, Mac, Unix/Linux и переведена на множество языков. Также позволяет создавать новые шрифты и редактировать имеющиеся.
OpenType редактор шрифтов, доступен на Windows и Mac OS X. Довольно простой и содержит достаточное количество функций.
Еще один бесплатный инструмент, с помощью которого вы сможете создавать точечные шрифты.
Условно бесплатный (9 долларов за скачивание шрифта) онлайн-инструмент, который позволяет создавать шрифты на основе рукописного текста.
Еще один онлайн-инструмент (также почти 10 долларов за скачивание), который позволяет создавать шрифт из текста, написанного от руки.
Бесплатный и довольно сильный редактор шрифтов. Отлично подходит начинающим и тем, кто не хочет тратить деньги на покупку программ.
Это приложение доступно на iPad и Windows 8. Позволяет создавать шрифт из наброска и редактировать существующие шрифты.
Бесплатный ограниченное количество времени инструмент. С его помощью вы можете создавать шрифты и скачивать их.
Бесплатный онлайн-инструмент, позволяющий создавать TTF и OTF шрифты на основе рукописного текста.
Есть бесплатная и премиум-версия. Программа работает на Windows, Linux, Mac OS X и BSD.
В этой статье-уроке я расскажу вам как создать свой собственный шрифт для веб-сайта, используя собственноручно созданные иконки. Все, что нам для этого понадобится - программа для создания векторной графики(Adobe Illustrator или Inkspcape) и доступ в интернет!Итак, приступим! Все использованные изображения, иконки и css шрифт этого вы сможете скачать в конце статьи.
Для этого урока мы сделаем что-то простое. Для первой иконки мы нарисуем обычную звездочку. Для второй иконки - орла с буквой W внутри. Нарисовать это достаточно легко и вы можете создать любые формы и комбинации. Я использовал иллюстратор для этих целей.
После того, как вы закончили творческую часть - ваше творение необходимо сохранить в SVG формате. Жмем “Сохранить Как” и выбираем тип файла как SVG. Теперь можно переходить непосредственно к созданию шрифта.
Для этих целей мы используем популярный и бесплатный сервис IcoMoon.
Первое, что нужно сделать - создать новый проект, поэтому кликаем на меню в левом верхнем углу и нажимаем “New Project”. Далее подгружаем наши готовые svg файлы после нажатия на кнопку “Import Icons”. Проделав эти шаги вы должны видеть у себя на мониторе изображение такого рода:
Теперь у нас есть возможность изменения кода для каждой иконки (в нашем случаем это будет e600 и e601), названия нашего шрифта, префикса для CSS и так далее. Все это осуществляется в “Preferences”. Также, мы можем посмотреть шрифт в действии, нажам на ссылку “Enable Quick Usage” - что позволит получить временную ссылку на наш шрифт, а также опцию просмотра кода в CodePen.
После того, как вы все настроили - нажимаем кнопку “Download” внизу страницы и скачиваем архив. В этом архивы вы найдете ваш шрифт в форматах ttf, eot, svg и woff + демо-страничку со шрифтом.
Использование иконок на сайте
Теперь, все что нам нужно - это подключить шрифт CSS при помощи @font-face, и указать другие параметры (они все прописаны в css-файле в архиве, который вы скачали.
@font-face { font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , { font-family: "wdm-eagle"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wdm-star:before { content: "\e600"; } .wdm-eagle:before { content: "\e601"; }
Теперь мы можем использовать наш шрифт в HTML коде следующим образом:
Указав название класса для тэга мы получаем нашу иконку.
.Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом Google Fonts и числовая шкала плотности шрифтов, ресурсы для поиска бесплатных шрифтов, тонкости работы с генератором FontSquirrel, ресурсы по шрифтовым иконкам. Для меня информация оказалась чрезвычайно полезной и интересной.
Ниже привожу краткий конспект всех вопросов, показавшихся мне интересными и новыми в моей практике, пересказанный своими собственными словами. Надеюсь, данный материал окажется полезным не только для меня одного.
Подключение веб-шрифтов с помощью @font-face:
- подключение нестандартного шрифта с помощью директивы
Директива
указывает браузеру применить шрифт с указанным именем выбранным элементам страницы.Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,
Формат EOT , который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.
Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически - это облегченная версия формата TTF или OTF.
Форматы OTF (Open Type Font) и TTF (True Type Font) - это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.
Формат SVG - это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть - математических формул.
Благодаря этому изображения в таком формате масштабируются без потери качества - при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт - это фактически картинка в масштабируемом формате SVG.
Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов - “не умеешь кушать обычную пищу, так кушай хотя бы это!”.
Правовой вопрос использования шрифтов
Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные .
Платные шрифты делятся на те, которые:
- можно использовать в Веб
- нельзя использовать в Веб
Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit , на которых собраны все шрифты, которые можно использовать в Веб . Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).
Краткий список источников бесплатных шрифтов , которые можно использовать в Веб:
- https://www.theleagueofmoveabletype.com/)
- FontSquirrel (http://www.fontsquirrel.com/)
- Google Fonts (https://www.google.com/fonts)
- The Open Font Library (http://openfontlibrary.org/ru)
- Fontex.org (http://fontex.org/)
- Exljbris Font Foundry (http://www.exljbris.com/)
Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator , находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).
Единственное ограничение этого сервиса - он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.
Генератор
важен и должен быть следующим: @font-face { font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : format ("embedded-opentype" ), url("PTSansRegular.woff") format ("woff" ), url("PTSansRegular.ttf") format ("truetype" ), url("PTSansRegular.svg") format ("svg" ); }- EOT - формат только для Internet Explorer 8 и ниже
- WOFF - самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
- TTF - сравнительно большой по размеру шрифт и достаточно устаревший
- SVG - самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone )
Браузер читает тело директивы
является неслучайной и эмпирически выверенной на основе опыта предыдущих веб-разработчиков. h1 { font-family : "League Gothic" , Arial , sans-serif ; font-weight : normal ; }Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем - резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).
Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так. Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.
Помимо букв, шрифты могут состоять из иконок или изображений. Ресурсы, посвященные теме шрифтовых иконок и значков:
Виды шрифтов
При подключении шрифтов, установленных на компьютере, обычно не возникает вопросов и мы не задумываемся о том, как так получается, что при указании браузеру отрисовать текст полужирным с помощью тега
текст действительно делается курсивным; а при полужирном курсиве через теги| 1 | strong em |
На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).
Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь - попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название
значительно осложняется и может быть выполнено двумя способами: простым , который IE8 не понимает (но понимают все остальные браузеры) и сложным , который будет доступен и IE8 также.Простой способ подключения веб-шрифта
Простой способ заключает в добавлении к директиве
и эти правила выполняют другую роль, они заставляют браузер загрузить веб-шрифт с указанным стилем и жирностью. Чтобы быть более понятным, приведем сразу пример подключения веб-шрифта PTSans с четырьмя вариантами его отображения: @font-face { font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype" ), url("PTSansRegular.woff") format ("woff" ), url("PTSansRegular.ttf") format ("truetype" ), url("PTSansRegular.svg") format ("svg" ); font-weight : normal ; font-style : normal ; } @font-face { font-family : "PTSans" ; src : url("PTSansItalic.eot") ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic.woff") format ("woff" ), url("PTSansItalic.ttf") format ("truetype" ), url("PTSansItalic.svg") format ("svg" ); font-weight : normal ; font-style : italic ; } @font-face { font-family : "PTSans" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype" ), url("PTSansBold.woff") format ("woff" ), url("PTSansBold.ttf") format ("truetype" ), url("PTSansBold.svg") format ("svg" ); font-weight : bold ; font-style : normal ; } @font-face { font-family : "PTSans" ; src : url("PTSansBoldItalic.eot") ; src : format ("embedded-opentype" ), url("PTSansBoldItalic.woof") format ("woff" ), url("PTSansBoldItalic.ttf") format ("truetype" ), url("PTSansBoldItalic.svg") format ("svg" ); font-weight : bold ; font-style : italic ; }Расскажу, как я понимаю данные CSS-правила. Директива
. Эта переменная является массивом, который заполняется значениями с помощью последующих правил:- - загрузить шрифт указанной жирности;
- производилось каждый раз отдельным вызовом функции к выбранным элементам страницы:
p
{
font-family
:
PTSans
;
}
И затем HTML-тегами
указать, какое начертание шрифта применить к указанным элементам: dolor ets < strong > lorem ipsum dolor ets lorem ipsum ipsum dolor ets lorem ipsum < em > dolor ets lorem ipsum dolor ets lorem ipsum dolor etsБраузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.
Преимуществом данного способа подключения веб-шрифта является его универсальность. Достаточно один раз объявить шрифт с помощью директивы
и .В тех местах, где применены теги
, браузер IE8 будет сам делать из шрифта PTSans начертания . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже: @font-face { font-family : "PTSansRegular" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype" ), url("PTSansRegular.woff") format ("woff" ), url("PTSansRegular.ttf") format ("truetype" ), url("PTSansRegular.svg") format ("svg" ); } @font-face { font-family : "PTSansItalic" ; src : url("PTSansItalic.eot") ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic.woff") format ("woff" ), url("PTSansItalic.ttf") format ("truetype" ), url("PTSansItalic.svg") format ("svg" ); } @font-face { font-family : "PTSansBold" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype" ), url("PTSansBold.woff") format ("woff" ), url("PTSansBold.ttf") format ("truetype" ), url("PTSansBold.svg") format ("svg" ); } @font-face { font-family : "PTSansBoldItalic" ; src : url("PTSansBoldItalic.eot") ; src : url("PTSansBoldItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansBoldItalic.woof") format ("woff" ), url("PTSansBoldItalic.ttf") format ("truetype" ), url("PTSansBoldItalic.svg") format ("svg" ); }Обратите внимание на отсутствие правил
и , ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код? p { font-family : PTSansRegular ; font-weight : normal ; font-italic : normal ; font-size : 36px ; } p strong { font-family : PTSansBold ; font-weight : bold ; font-italic : normal ; } p em { font-family : PTSansItalic ; font-weight : normal ; font-italic : italic ; } p strong em { font-family : PTSansBoldItalic ; font-weight : bold ; font-italic : italic ; }Применять или не применять второй способ подключения веб-шрифтов - это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.
Шрифты Google Fonts
Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив
, второй в помощью директивы более лаконичный - достаточно подключить ее в начало таблиц стилей, чтобы выбранные шрифты применялись ко всем HTML-страницам.Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.
В Google плотность шрифта обозначается не с помощью ключевых слов
, а в числовой шкале - 100 до 900. Значение 400 соответствует шрифт Gentium Book Basic нормальной плотности курсивного начертания: em { font-family : "Gentium Book Basic" , serif ; font-weight : 400 ; font-style : italic ; }На этом выжимка по веб-шрифтам заканчивается.
Вы устали от ежедневного монотонного использования обычных шрифтов? А может у вас есть какие-либо творческие идеи относительно собственного шрифта и его стиля? Если да, то хотим вам сказать, что раз вы уверены в себе и достаточно креативны - пора начать посещать бесплатные сайты, где вы сможете воплотить в жизнь все идеи, связанные со шрифтами. Да, именно так, ведь в Интернете есть множество ресурсов для графических дизайнеров, где вы можете придумывать и разрабатывать свои шрифты. В дальнейшем можно их использовать в собственных проектах или делиться с другими. Стоит отметить, что сейчас существует огромный спрос на новые и захватывающие виды шрифтов. Поверьте, графический мир просто нуждается в талантливых разработчиках именно шрифтов и если у вас это хорошо получается, то на этом можно еще и подзаработать.
Мы предлагаем вам список из 10 бесплатных ресурсов с инструментами, где вы сможете творить и создавать новые креативные шрифты.
Bird Font – это онлайн-инструмент для создания и редактирования векторной графики. Сервис предлагает настройки импорта и экспорта для True Type Font (TTF), Embedded OpenType Font (СРВ) и Scalable Vector Graphics (SVG). На сайте можно изучить множество возможностей и инструментов для создания различных векторных изображений. Наиболее популярные среди них ориентирование кривых, контекстуальная связывающая подмена, кернинг, вращение объекта, изменение фона и многое другое.
Сайт предназначен именно для создания шрифтов и предлагает эффективную платформу для их дизайна. Ресурс станет полезным для энтузиастов, любящих экспериментировать со шрифтами и создавать новые типы. На FontStruct, можно создавать шрифты, используя различные геометрические фигуры, например, как плитка или кирпичная сетка. Кроме того тут вы можете найти уже готовые новые типы шрифтов. Шрифты, созданные на FontStruct, называются FontStructions и могут быть установлены или загружены в True Type Font (.ttp) файл. Так же они могут быть использованы в приложениях Photoshop, Mac / Windows или на веб-сайтах и в блогах. Это сайт, на который действительно стоит обратить внимание.
Glyphr Studio – это программа для дизайна и редактирования шрифтов, а так же инструмент, предлагающий множество интересных особенностей. На Glyphr Studio вы можете создавать собственные лигатуры символов и глифы, используя различные инструменты редактирования векторов, такие как ручка и пойнтер. Одно из его характерных преимуществ сервиса - импорт SVG кода из Inkscape и Illustrator.Инструмент предлагает двойной режим экрана для удобного проектирования и редактирования. Помимо всего прочего, Glyphr Studio поддерживает такие файлы шрифтов, как True Type Font (TTF), Embedded OpenType Font (СРВ) и Scalable Vector Graphics (SVG) файлы шрифтов.
Сайт является инструментом на основе браузера для проектирования и редактирования растровых шрифтов. Сервис позволяет скачать или загрузить шрифты в их галерею в файле True Type Font.
MyScriptFont - большой онлайн-инструмент для создания векторных шрифтов на основе собственного почерка. Все, что вам нужно сделать, это скачать шаблон в формате PDF или PNG, а затем распечатать его. Далее написать в нем текст от руки, отсканировать и загрузить на сайт (программа поддерживает форматы JPG, PNG, PDF и другие). Вы также можете использовать Paint для написания текста. В отличие от других аналогичных инструментов, MyScriptFont позволяет просмотреть и бесплатно скачать ваш рукописный шрифт в форматах Open Type и True Type. Рукописные шрифты могут быть использованы в графических программах, поздравительных открытках, логотипах, личных письмах и многом другом.
FontForge - онлайн-платформа для создания бесплатных шрифтов. Она имеет простой в использовании пользовательский интерфейс и встроенную программу для сравнения различных шрифтов. С FontForge, можно создавать и редактировать шрифты в различных форматах, включая PostScript, SVG, True Type, Open Type и другие. Так же, к вашим услугам полный текст учебника, помогающего в профессиональной подготовке по созданию шрифтов.
FontArk - это то, что ищет каждый дизайнер шрифтов. Доступ к сервису является бесплатным лишь в течение ограниченного, но он на самом деле стоит того, чтобы им воспользоваться. FontArk - это браузерная программа и поколение шрифтовых инструментов с встроенной системой жидкости сетки. Дизайн и редактирование инструментов FontArk являются тем, что отличает сайт от своих современников. К услугам пользователей в режиме реального времени, несколько глифов, инструменты для редактирования символов и проектирования шрифтов, а так же логотипов. Кроме того, он предлагает множество других функций и поддерживает несколько языков.
PaintFont.com еще один отличный инструмент для преобразования рукописного текста в векторные шрифты. Сайт имеет обширный набор готовых символов, классифицированных по категориям, таким как лигатуры, математика и знаков препинания. Инструмент предлагает глифы и символы из различных языков: японский, немецкий, турецкий, иврит, испанский и другие.
Вы можете создавать шрифты или загружать и модифицировать свои собственные, используя пользовательские инструменты на Fontastic. Сервис предлагает несколько функций, таких как добавление или изменение цвета, добавление теней, изменение масштаба и синхронизация между несколькими устройствами. Так же на сайте собрана огромная коллекция векторных иконок, которые можно использовать для внедрения в любые ваши дизайнерские проекты. Они рассортированы в несколько категорий для полного удобства.
Этот сервис можно назвать идеальным местом для профессиональных дизайнеров шрифтов и просто любителей. Сервис имеет более 20-ти параметров, позволяющих экспериментировать со встроенными глифами. Так же тут вы найдете несколько функций редактирования и проектирования, которые в будущем расширятся.
Еще несколько ресурсов, которые могут вам пригодиться:
FontPunk.com – бесплатный онлайн-инструмент для добавления стилей и визуальных эффектов, чтобы создать визуально привлекательный шрифт для рекламы, листовок или веб-сайта.
FontConverter.org – бесплатный онлайн конвертер шрифтовых файлов.
Font Squirrel – бесплатный онлайн ресурс с коллекцией веб-шрифтов, которые лицензированы для коммерческого использования.
Заключение
Теперь вы знаете, что разработка собственных шрифтов это очень легко, если у вас есть правильные ресурсы. Для самоучек и любителей, эти ресурсы полезны для получения практических навыков, таких как кернинг, настройка кривых, изучения структурных вариаций и комплектации глифов.
Оформление – это безбрежный океан, растущий с каждым днем. Новые типы шрифтов ежедневно создаются каждый день или путем внесения пользовательских изменений в уже существующие шрифты. Благодаря шрифтам усиливается визуальная привлекательность текстового контента и именно поэтому, дизайнеры постоянно ищут новые стили шрифтов, чтобы сделать свои работы максимально свежими и новаторскими.
Существует огромное количество способов для того, чтобы найти подходящий шрифт для вашего сайта. Например, можно воспользоваться сервисами с огромными библиотеками шрифтов, которые предполагают платную подписку.
Если же ваш бюджет ограничен или вы экспериментируете с небольшим проектом, вы можете воспользоваться бесплатными веб-шрифтами, находящимися в свободном доступе. Поиск подходящего веб-шрифта для сайта может занимать огромное количество времени, поэтому мы предлагаем вам подборку лучших среди них.
1. Montserrat
По мере своего развития, типографика уходит от старинных урбанистических постеров и знаков. Создатель этого шрифта попыталась сохранить красотку типографики городских постеров, увиденных ею на улицах в Буэнос-Айресе.
2. Abril Fatface
Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans.
3. Playfair Display
Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo.
4. GT Walsheim
Используемый сегодня во многих блогах, GT Walsheim является представителем геометрических гротесков и входит в семейство Grilli Type. За полный набор шрифтов нужно платить, но Grilli Type предлагает бесплатную пробную версию GT Walsheim.
5. Merriweather
Если читабельность на экране является приоритетом вашего проекта, воспользуйтесь Merriweather, который был создан для этой цели. К тому же, этот шрифт постоянно дорабатывается.
6. Josefin Sans
Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой.
7. Gravitas One
Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок.
8. Jura
Литеры этого шрифта повторяют формы письма Кая-ли. В нем также содержатся глифы кириллицы и греческого алфавита. Он доступен в светлом, нормальном, среднем и полужирном начертаниях.
9. League Gothic
Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов.
10. Fjord
Fjord – это шрифт с засечками, изначально созданный для печатных книг и особенно подходящий для размещения длинных текстов в небольшом печатном формате. Его можно применять для создания большого объема текстового контента на сайте, так как шрифт отличается четкой структурой, заметными засечками и длинными элегантными верхними и нижними выносными элементами.
11. Amaranth
Семейство шрифтов Amaranth отличается ненаклонным курсивным дизайном с небольшим контрастом и заметными изгибами. Все три стиля Amaranth хорошо сочетаются с практически любым другим шрифтом. С этим шрифтом можно поиграть – экспериментируйте и выбирайте лучшее.
12. Poly
Этот среднеконтрастный шрифт был изначально создан для туземного языка Wayuunaiki, для которого необходимы широкие глифы. Он отличается маленькими выносными элементами и большой x-высотой, что делает его особенно полезным в небольших размерах.
13. Gentium Basic
Этот шрифт создавался как мульти-лингвистический, включающий в себя латинские и греческие литеры, а также кириллицу и продвинутую поддержку в версии Gentium Plus. Gentium Basic и Gentium Book Basic доступны в бесплатной веб-версии, но ограничены только латинским алфавитом.
14. Open Sans
Open Sans является представителем гуманистических гротесков. Этот шрифт отличается высокой степенью разборчивости и адаптирован как для веб-, так и для мобильных интерфейсов. Это ненаклонный шрифт с простым начертанием литер, для которого характерен нейтральный, но достаточно приятный вид, что позволяет использовать его в разных целях.
15. Ledger Regular
Это мультифункциональный шрифт с большой x-высотой, сильным цветовым контрастом, четко очерченными засечками, что вносит свой вклад в читабельность текста. Этот шрифт хорошо выглядит как в печатном виде, так и на экране с низким разрешением.
16. Signika
Этот бесплатный веб-шрифт является представителем гротесков. Низкая контрастность и большая x-высота позволяют Signika хорошо отображаться на экране. Широкий выбор значков включает в себя символы, пиктограммы и стрелочки.
17. Josefin Slab
Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы.
18. Forum
Как и предполагает название, это шрифт Roman, который хорош для заголовков в caps lock, но также подходит и для отображения текстов. Элегантные пропорции этого шрифта напоминают классическую архитектуру с ее полукруглыми арками, горизонтальными карнизами и вертикальными колоннами.
Названный в честь одного из самых известных городов Майя, Tikal Sans обладает чертами глифов, которые использовались в письме южноамериканской цивилизации. Его создатель выбрал большую x-высоту, что придало шрифту современный вид и оказало благотворное влияние на его разборчивость, а большой выбор видов начертаний позволяет применять его для различных целей.
20. Arvo
Подходящий в равной степени как для печатной, так и для веб-версии, этот геометрический брусковый шрифт доступен в Roman, Italic, Roman Bold и Bold Italic. Небольшая контрастность Arvo повышает его читабельность на экране.
21. Bevan
Bevan был создан на основе традиционного брускового шрифта 30-х. Буквы были отцифрованы, им придали новую форму и оптимизировали для веб-версии. Это один из немногих сверхжирных шрифтов, которые подходят для сайтов.
22. Old Standard TT
Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице.
23. Kreon
Идеально подходящий для новостных веб-сайтов и блогов, этот шрифт с засечками обладает также чертами брускового шрифта, но его сбалансированность и низкоконтрастность делают Kreon значительно более персонализированным.
24. Droid Sans
Droid Sans был оптимизирован для максимальной читабельности даже в небольших интерфейсах – например, меню на экранах мобильных телефонов. Это нейтральный ненаклонный шрифт с простыми открытыми очертаниями литер.
25. Italiana
Создатель этого шрифта вдохновился классической итальянской каллиграфией, поэтому шрифт будет очень полезен для проектов, где необходимо добавить элегантности. Italiana также подходит для написания новостных заголовков как в печатном, так и электронном виде.
26. Vollkorn
Этот детально разработанный, многофункциональный шрифт с засечками очень популярен. Его четкость и основательность выражают уверенность и энергию, что делает шрифт одинаково эффективным как в больших размерах для заголовков и названий, так и для значительных объемов текста в более мелком формате.
27. Actor
Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9.
Уходящий корнями в 16 век, гуманистический шрифт Garamond стал настоящей иконой типографики, неоднократно послужившей основой для создания современных шрифтов, включая шрифт EB Garamond.
31. Ubuntu
Гротеск Ubuntu был создан для того, чтобы персонализировать веб-текст как на десктопах, так и мобильных устройствах. Пользователям предлагается экспериментировать с этим шрифтом, модифицировать и улучшать его по своему усмотрению.
32. Rosario
Rosario является классическим гуманистическим гротеском, который прекрасно подойдет для стилизации абзацев текста.
33. Roboto Slab
Roboto Slab является одним из шрифтов семейства Roboto. Брусковая версия особенно привлекает взгляд своими геометрическими формами и открытыми изгибами. Он одинаково хорошо подходит для экранов гаджетов и печатных версий текстов.
34. Oswald
Шрифт является переработанной версией классического гротеска Alternate Gothic. Oswald был недавно обновлен, теперь он представлен в различных начертаниях, содержит расширенный набор символов и отличается более удобным кернингом.
35. Stalemate
Stalemate – это изящный рукописный шрифт с некоторым винтажным оттенком. Он подходит для создания акцентов и персонализации вашего сайта.
36. Crimson Text
Этот тщательно разработанный классический пропорциональный шрифт может использоваться как для отображения больших объемов текста, так и написания заголовков.
