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

Москва не сразу строилась

Москва не сразу строилась, да и у наших иконок долгая история.

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

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

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

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

Каков процесс

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

• Я рисовал макет
• Начинал тогда еще нарезать иконки или делать спрайты, но все обрывалось почти не начавшись
• Пихал FA для “кроссбраузерности” и скорости

И проект, возможно так бы и остался проектом нарисованным, но недавно мы открыли маркет, и как нельзя кстати FA #5 стал условно бесплатным, что сподвигло нас вывести свой проект в свет.

Как создавались иконки

Как я уже говорил, начиналась история иконок с рисования их для разных проектов. Самым первым, в котором проявление было прям очевидное - редизайн сайта OsbornRus. Тогда точно я нарисовал иконку сравнения товаров - rege-compare. И на данный момент она осталась почти неизменной. Став, в кой-то мере эталоном для остальных.

Сейчас, спустя приличное время, я взялся за эти иконки. Сперва я выложил их в формате ai просто на сайт. А затем началось самое интересное: я начал проект Vivaldo - музыкальный плеер и по совместимости дизайн сайта для исполнителя.

К слову, проект OsbornRus, к сожалению, так и не увидел на данный момент свет. Сайт делался на битрикс, завис, завял и вроде бы умер. Нет, вру, спустя года два он увидел свет.

Вернемся к действительности, в проекте Vivaldo я работал одновременно не над 1-м проектом, а сразу над четырьмя.

Это:

• Сам Vivaldo
• FA-Kit - аналог Bootstrap, но более легковесный
• PH-Kit - в данном проекте используется мало, так как мы отошли от основы, а основа это затравка на WP темы
• Icons Rage - бесплатный набор иконок, герой этой статьи

Итак, о иконках

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

• Стрелки во все четыре стороны
• Шевроны в стороны
• Иконки сравнения для магазина
• Иконка корзинки
• И еще несколько рабочих штук

Иногда они дополнялись, но системы не имели. В крайних случаях спасали иконки с flaticon.

В общем я их рисовал, снова рисовал и перерисовывал.

Волшебная сетка

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

И тут вуаля, я нашел систему.

https://www.youtube.com/watch?time_continue=1&v=m24A8lsQWXQ - вставить фреймом

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

В данном случае я пришел к следущему:

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

К плюсам иконок сетки можно отнести:

• Легкость построения
• Масштабируемость
• Хоть какая-то система

К минусам:

• Сетка не панацея, когда создаешь иконочный шрифт
• Желательно понимать, что ты делаешь

Если вы хотите создать свой иконочный шрифт

То, что мы опишем далее не рекомендуем воспринимать как беспрекословное описание действий, а лишь как наш опыт.

Чтобы корректно отобразить нарисованные иконки вам необходимо придерживаться следующих рекомендаций:

• Вам придется либо подгонять иконки под ширину области, либо подгонять ширину области под иконку
• Для экспорта рисуйте иконки минимум 500 на 500 пикселей
  На экспорте вам придется либо оптимизировать иконку, что может ее исказить
• Если вы рисуете иконки в стиле lineart, то масштабировать под размер не составит труда, почти
  Когда я рисовал иконки под масштаб 600 на 600, то некоторые, у которых внутренняя обводка, я масштабировал до высоты в 500px (в некоторых случаях на всю высоту), а с обводкой стандартной “в середине” на 500px - ширина обводки (в нашем случае - 35px). С полностью наружной обводкой соответственно - 2 ширины обводки т.е. 70px.
• Подгоняйте элементы по логике вещей, например chevron скорее всего должен быть меньше, чем элемент списка, но не обязательно. Позже это можно поправить в стилях.
• Перед экспортом разбирайте обводку и вообще оформление, и собирайте контур в один неразрывный.

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

Так было и у меня, проблемными областями стали dashboard и шевроны со стрелками. Они становились шире, чем все остальным области.

Особенности экспорта

Общие

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

Несомненно путь который выбрал я тяжелее, на том же iconmoon присутствует тонна утилит для настройки каждой иконки индивидуально, а тут, с использованием task runner-ов ты сталкиваешься с тем, что ты должен изначально правильно все рассчитать.

Но оно и к лучшему, как я указывал выше - квесты с расчетом это самое то, что надо.

А теперь об экспорте. В качестве основного инструмента я выбрал gulp с надстройками:

• Gulp icon-font
  Содержит в себе еще пачку задач обрабатывающих svg иконки, можно реализовать все чисто на них, но это не основная наша задача, поэтому может быть в другой раз
• Gulp svg-sprites
  В противоположность шрифту есть svg спрайты, а лучше символы. Их можно призывать волшебным use, который творит магию. И прорисовывается лучше шрифта.

Как мы уже указали, необходимо либо подгонять ширину области, либо выбрать некоторые кратности, под которые надо подгонять иконки, например у вас будет высота 500px, а ширина 500, 450, 175, где под ширину вы будете рисовать разные по ширине объекты. Под самый узкий хорошо подойдет шеврон или стрелка, а под самый широкий - иконка письма.
Опытным путем я выяснил, что идеально - когда у вас иконка занимает всю область. Но тут есть один минус, пользуясь Adobe CC может возникнуть соблазн использовать экспорт объектов:

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

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

Далее о разнице между спрайтами и иконочным шрифтом:

Gulp iconfont

Вот наш конфиг:

Основная часть генерации шрифта находится в первой переменной iconStream:

• fontName - название шрифта, название пойдет в ссылки и название самих шрифтов
• normalize - по умолчанию отключено, но тут я игрался с размерами

prependUnicode - в этой опции внезапно вылезла и проблема, и спасение. Чтобы при изменении иконок (добавлении, удалении) не менялся их unicode необходимо включить эту опцию. Тогда к исходникам будет добавлен в начале название файла юникод. Вот таким образом. Проблема, как оказалось, в том, что так называть файлы противоречит концепции “все и сразу”. Ведь у меня для таких случаев один файл в иллюстраторе и необходимое кол-во монтажных областей. Так можно видеть сразу все. И для экспорта каждую монтажную область необходимо переименовать с учетом их названий в папке ресурсов. Это реальная проблема, потому что генерируя символы (gulp-sprites) названия необходимы без префиксов. Решение вышло костыльное - я создал 2 файла для экспорта, одно с названием монтажных областей с юникодами, другое без.

• startUnicode - у нас стало персональным фетишем, а вообще может реально спасти, когда вы используете 2 и более набора шрифтов в проекте. Просто задайте максимальное значение предыдущего шрифта и тогда этот настроится как бы сверху. На самом деле все равно, шрифты-то разные, но нам в общем не пригодилось. Сделали по-красоте ибо в оригинале стоит другое значение не от нулей.
• fontHeight - спасает, если у вас маленькие иконки и включен normalize: true.
• centerHorizontaly - скорее всего не даст результата
• ascent - из области профессионального построения шрифтов, опуск шрифта, может спасти, когда размеры шрифта разные, вы построили по меткам и надо его подравнять.
• descent - подъем шрифта, тоже может выручить

Далее идет создание css стилей для работы иконок. Мы привязали класс rage к тегу i, дабы разделить иконки шрифта от scg с тем же классом.

Gulp svg-sprites

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

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

• font-size: 1em - для родителя
• height + width: 1em - обязательно необходимо указать размеры, иначе сплющится иконка и ее не будет видно
• fill: currentColor - тогда иконка будет наследовать свойство color.

Конфиг проще, чем для шрифта:

• mode - режим обработки, можно также выбрать и спрайты, но это не наш случай

svgId - %f - в данном случае это название файла. Вот из-за чего нельзя использовать экспортные случаи с юникодом

• preview - создает файл html где перечислены все иконки.

Предитог

Почему svg лучше font

• Прорисовка
• Кастомизация

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

Тем не менее для svg не требует много манипуляций. Его нужно подключить непосредственно встроив в документ в body в самом начале, чтобы отработало наверняка. И далее просто вызывать в конструкции:

<svg class=”rage”><use xlink:href=”#rage-name”/></svg>

Важно помнить:

• Если явно указать fill=”currentColor” в коде символа, то повлиять на него с помощью css будет уже нельзя, только указывая свойство color
• Internet Explorer чистит кеш, а Edge без перезапуска не ест новые стили

Надеемся данная статья вам поможет в свои начинаниях

Оригинал: http://i-am.studio/blog/how-to-create-your-own-icon-font/