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

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

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

Иконки, отображаемые через @font-face, подходили под любые разрешения экрана и настраивались всеми способами, которые мы ожидали от текста. Конечно, доставка иконок в шрифте было хаком, но это также было полезно, универсально, и даже немного весело.

Но теперь нам необходимо остановиться. Пора отправить иконочные шрифты на Небеса Хаков, где они смогут порезвиться с основанной на таблицах версткой, “пуленепробиваемыми закруглёнными углами” и Scalable Inman Flash Replacement.

Экранные читалки читают эту дрянь

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

Они ночной кошмар, если ты дислексик

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

Они конфликтуют с Emoji

Большую часть времени мы полагаемся на автоматизированные системы, чтобы выбрать, какому юникод символу какой значек будет присвоен. Но в юникоде также живут Emoji. Если вы не будете осторожны, они могут перекрываться, хотя и иногда весёлыми способами. Мой любимый пример - баг “четыре звезды и лошадь”.

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

Они часто ломаются

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

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

Хуже того, многие пользователи так никогда и не увидят эти шрифты. Opera Mini, с сотнями миллионов пользователей по всему миру, которая конкурирует с iOS Safari в глобальной статистике, вовсе не поддерживает @font-face.

Они никогда не выглядят правильно

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

Ситуация с многоцветными иконками ещё хуже. Техника наложения нескольких компонентов звучит интересно, но на практике выглядит, словно цвета смещены при печати.

Вы, вероятно, делаете это неправильно

“Но автор,” – я уже слышу от вас – “вы совершенно проигнорировали пуленепробиваемые иконочные шрифты от Filament Group`s, поддерживающие резервные варианты для отображения иконок”.

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

Но вы, вероятно, не будете это делать.

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

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

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

Там всё лучше

SVG прекрасно подходит для иконок! Это формат векторных изображений с дополнительной возможностью поддержки CSS, JavaScript, многократного использования, доступности и многого другого. Он был создан для подобных вещей.

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

“SVG не могут быть объединены в спрайты”

Очень даже могут. Более того, существуют специальные инструменты, такие как svg-sprite или IcoMoon, которые могут автоматизировать этот процесс.

“SVG файлы много весят”

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

Изредка я слышу, что разрыв всё равно становится большим, если подключены сотни иконок. Напрашивается вопрос: Зачем вы внедряете сотни иконок на каждой странице?

“Разметка иконок требует много кода“

Давайте сравним:

<!-- Typical @font-face icon: -->
<span class="icon icon-search" aria-hidden="true"></span>
 
<!-- Typical SVG icon: -->
<svg class="icon">
  <use xlink:href="path/to/icons.svg#search"/>
</svg>

Разметка SVG иконки немногим сложнее, однако взамен это понятнее и семантически правильнее, в отличии от какого-то пустого элемента с параметром aria-hidden.

“Браузерная поддержка SVG хуже, чем у шрифтов”

На момент написания статьи, поддержка SVG в мире превышает 96%... На 4% выше, чем аналогичная статистика распространения @font-face. К тому же, SVG более доступен и прямолинеен при ошибках.

“В фреймворке, который мы выбрали, уже используется иконочный шрифт”

А если фреймворк спрыгнет с крыши, вы тоже следом?

Не будьте “табличным парнем”

Я был в школе, когда веб-стандарты только получали распространение. В то время, когда большинство моих преподавателей ратовали за семантическую вёрстку, один из них не отказывался от табличной верстки. “Табличный парень” утверждал, что ни один инструмент не сравнится с версткой макетов с использованием <table>, что таблицы по своей сути лучше всего подходят для основанных на сетке дизайнов. Он хвастался, как он может легко и просто достичь “Святого Грааля” с использованием его любимых таблиц. В качестве одного из аргументов в свою пользу он приводил разнообразие кроссбраузерных несоответствий, что является проблемой и современного CSS.

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

Если вы не хотите перестать использовать иконочные шрифты ради людей с читалками экрана, людей с дислексией, людей с отсутствием поддержки @font-face в браузере, людей, у которых по какой-то причине не загрузился один из иконочных шрифтов, или дизайнеров, которые просто хотят видеть иконки на экране…

Тогда сделайте это для себя. Не будьте табличным парнем.

Оригинал статьи в блоге автора: http://blog.cloudfour.com/seriously-dont-use-icon-...