Иконные шрифты — веб-дизайн с использованием векторных пиктограмм

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

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

Что такое шрифт иконки?

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

При желании шрифты иконок могут быть разработаны с помощью CSS (каскадных таблиц стилей). Благодаря возможности свободного масштабирования без потери разрешения, векторные иконки можно использовать для HD-дисплеев; хотя, в отличие от графики битовых карт, это возможно только в монохроматическом виде (CCS3 также поддерживает различные цветовые градиенты). Кроме того, всегда требуется добавлять целый шрифт пиктограмм, даже если используется только одна пиктограмма. Некоторые поставщики предлагают бесплатные шрифты пиктограмм, которые можно найти в Интернете, также легко создать наборы шрифтов.

Поставщики шрифтов для иконок

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

  • Font Awesome: одна из крупнейших коллекций функциональных пиктограмм с открытым исходным кодом. Хотя он разработан для Bootstrap, он также совместим со всеми известными фреймворками. Font Awesome предлагает более 600 пиктограмм, которые подходят для рекламы. Все пиктограммы доступны в виде векторной графики, совместимы с программами для чтения с экрана и могут быть масштабированы без ущерба для качества. Этот шрифт иконок подчиняется лицензии открытых шрифтов SIL (SIL OFL) и может быть бесплатно использован в коммерческих целях.
     
  • Entypo: в отличие от Font Awesome, Entypo не предлагает шрифты пиктограмм; вместо этого он сделал набор векторных пиктограмм, доступных в формате SVG. Это обеспечивает основу для отдельных шрифтов, которые можно индивидуально компоновать с помощью генераторов веб-шрифтов. Все пиктограммы Entypo соответствуют лицензии Creative Commons Attribution License (CC BY-SA 4.0), что означает возможность их коммерческого использования без лицензионных отчислений.
     
  • Typicons: typicons — это тип шрифта пиктограмм, состоящий из более чем 300 векторных пиктограмм, удобных для чтения с экрана. Доступные для установки из инструмента управления с открытым исходным кодом (который также может быть установлен в браузеры), эти иконки предлагаются в виде векторных шаблонов и минифицированного CSS. На пиктограммы также распространяется лицензия открытых шрифтов SIL.
     
  • Open Iconic: шрифты иконок от Open Iconic предлагают более 200 пиктограмм в SVG, а также в различных форматах веб-шрифтов и растров. Этот поставщик особенно подчеркивает уменьшенный размер данных своих шрифтов: шрифт Iconic с открытым исходным кодом в формате WOFF (веб-формат открытого шрифта) содержит всего 12,4 КБ и в результате является гораздо меньшим шрифтом, чем Awesome. Все пиктограммы зарегистрированы под лицензией MIT. Шрифты лицензированы по SIL OFL и могут быть использованы в профессиональных проектах без оплаты.  

Создание собственных наборов шрифтов

Большинству веб-разработчиков не нужны все пиктограммы, включенные в тот или иной шрифт. Обычно нормой является сочетание пиктограмм от разных поставщиков; именно в этом случае наборы шрифтов могут оказать большую помощь. Веб-генераторы шрифтов, такие как Fontello, fontastic.me или приложение IcoMoon, позволяют пользователям составлять наборы различных шрифтов из разных источников. Основное преимущество индивидуального набора шрифтов заключается в том, что иконки могут быть добавлены только в виде веб-шрифтов, которые действительно отображаются на сайте. Это уменьшает размер данных и, в свою очередь, время загрузки сайта.

Добавление шрифтов иконок

Шрифты иконок обычно определяются в исходном коде HMTL с помощью классов CSS. Чтобы выполнить этот шаг, соответствующий шрифт иконки необходимо включить в область head HTML-документа. Некоторые поставщики предоставили для этой цели стандартный файл CSS. Bootstrap, CSS-фреймворк, также позволяет интегрировать такие элементы, при условии, что они также поддерживаются нужным шрифтом.

Настройка иконок

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

Оцените статью
cdelat.ru
Добавить комментарий