Иконочный шрифт: Что это и зачем нужно?

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

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

Что такое иконочный шрифт

Начну из далека. Вспомним не далекое прошлое. Сейчас дисплеи высокого разрешения на планшетах мы воспринимаем как должное, но еще недавно это было скорее исключение чем правило. Первым планшетом в дисплеем Retina стал iPad 3. В чем же заключалась принципиальная разница в планшетом предыдущего поколения — только в разрешении экрана. Было разрешение дисплея 1024х768, стало 2048х1536. А на практике мы с вами увидели в 2-ва раза более четкую картинку.

Сейчас этим уже никого не удивишь, и дисплеи высокого разрешения стали стандартом, получили широкое распространение в смартфонах, планшетах и ноутбуках. Улучшение качества картинки в 2-ва раза не прошло не заметно для приложений и веб-ресурсов. Такой качественный скачок требовал от интерфейсов большей детализации, т.е. стандартного разрешения картинок уже стало не достаточно для красивого отображения на Retina дисплеях. Разработчики приложений (а они первые почувствовали последствия) были вынуждены в срочном порядке перерисовывать интерфейсы в более высоком разрешении. Но если зачастую обслуживанием приложений продающихся в App Store занимается непосредственно команда разработчиков которая располагает и знаниями и ресурсами что бы что то корректировать, то с сайтами дело обстояло гораздо хуже. Сайты дизайн которых использует png и jpg картинки так же стали “плохо выглядеть” в глазах пользователей Retina дисплеев, но никто не торопился что то менять.

Конечно на тот момент, а тем более сейчас многие сайты были выполненные инструментами CSS которые позволяют минимизировать количество графики в сайте, но вот иконки и пиктограммы ранее всегда вставлялись на сайт в виде картинок. Такие иконки на дисплеях высокого разрешения отображаются размыто. Более того, при изменении масштаба отображения страницы качество таких png/jpg иконок обязательно падает, а при использовании адаптивного дизайна растровые иконки вносят ряд существенных ограничений. Я уже не говорю о том что растровые картинки замедляют загрузку страницы сайта.

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

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

Такой иконочный шрифт в не зависимости от разрешения дисплея и размера не потеряет качество и не станет размытым. А это открывает широкие возможности для использования таких иконочных шрифтов в сайтах. Даже если кто-то из производителей смартфонов решит в будущем еще сильнее увеличить разрешение, вам уже не надо будет перерисовывать иконки, вносить изменения на сайте. Все шрифтовые иконки всегда будут прекрасны! =)

Для тех кому лень читать

Преимущества использования иконочного шрифта на сайте:

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

Тут я позволю себе немного поворчать на лень и раздолбайство отечественных разработчиков =). Из любопытства просмотрела портфолио с десяток Московских студий оказывающих услуги по разработке сайтов. Сразу уточню, что смотрела работы только за конец 2014 и 2015 год. На мой взгляд это уже тот период когда не использование возможностей иконочных шрифтов — это уже криминал. Так что из 10 студий иконочные шрифты использовали только 6. Но более всего меня поразили 4-ри студии. Сразу мне вспомнилась басня Крылова “Мартышка и очки” =). Они использовали иконочный шрифт, но предварительно загоняли его в Photoshop, растрировали, а потом уже картинкой png вставляли на сайт.

“Порадовали” и амбиции этих студий, которые предлагали заказать у них простенький сайт визитку от 70 000 руб.

Проблемы с использованием иконочного шрифта

Но конечно в любой бочке меда есть своя ложка дегтя… Есть и с иконочными шрифтами проблемы. Как вы знаете все браузеры чуть по-разному отображают сайты, а браузеры используемые на мобильных платформах более всех грешат не постоянством. В зависимости от браузера и устройства иногда иконочный шрифт не подгружается.Случается это не так часто, но я бы слукавила, если бы не указала на это. Кроме того, если вы используете иконочный шрифт на своем локальном компьютере, заранее его установив, вам всегда нужно помнить что любой документ (например Word, Excel, PowerPoint и т.д.) оформленный с использованием таких иконок не будет корректно отображаться на другом компьютере если предварительно не установить нужный шрифтовой набор иконок. Кроме выше перечисленного добавлю что на иконочные шрифты распространяются все реже проблемы свойственные обычным шрифтам. Иконочный шрифт может быть только монохромным, т.е. иконки всегда будут только одноцветные.

Проблемы с использованием иконочного шрифта:

• шрифтовые иконки могут иногда не подгружаться в браузерах;
• при использовании шрифтовых иконок на локальном компьютере вам всегда нужно помнить что любой документ (например Word, Excel, PowerPoint и т.д.) оформленный с использованием таких иконок не будет корректно отображаться на другом компьютере если предварительно не установить нужный шрифтовой набор иконок;
• шрифтовые иконки могут быть только монохромными.

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

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