Шрифты. Классификация шрифтов (Основные характеристики шрифтов)
Любой шрифт представляет собой полный набор символов, которые имеют единое стилистическое решение. Устоявшаяся классификация, в которой объединены различные типы шрифтов, позволяет пользователям быстрее и легче разобраться в их многообразии.
История шрифтов берет начало с древних веков, когда люди впервые начали использовать символы для передачи своих мыслей. С тех пор появлялись тысячи начертаний, и сегодня мы имеем возможность использовать шедевры типографического искусства, которые формировались и оттачивались годами.
Сегодня шрифты активно используются в книгопечатании, web-пространстве, полиграфии, наружной рекламе, одежде т.д. Трудно найти сферу деятельности, в которой бы современный человек не сталкивался с обработкой текстовой информации.
Шрифты играют большую роль в оформлении сайтов, ведь с его помощью обеспечивается комфортное чтение текстов, выделяются важные элементы, иногда формируется художественная концепция страницы. Поэтому каждый человек, который имеет отношение к web-разработке, должен уметь эффективно использовать различные типы шрифтов.
Примеры объединения шрифтов
Для примера рассмотрим страницы нескольких сайтов, где грамотно подобраны шрифты.
Заголовки:
Sentinel (serif slab)
Параграфы:
Gotham Narrow (sans-serif)
На этих примерах мы можем наблюдать, что заголовки и подзаголовки имеют шрифт с прямоугольными засечками. Он выступает в качестве контраста к основному тексту сайта и является простым и легко читаемым шрифтом. Этот дизайн имеет единообразность. От него можно добиться многого, лишь изменив цвет и его стиль.
Заголовки и параграфы:
Freight Text Pro (serif)
Остальное:
Freight Sans Pro (san-serif)
На этом примере мы можем наблюдать, как используют только один шрифт для заголовков и параграфов. Это выглядит довольно здорово, потому как заголовки имеют более жирный и крупный вид.
Так же здесь мы можем наблюдать и один шрифт без засечек, который автор использует на кнопках сайта и информации о сообщениях.
Заголовки:
PMN Caecilia (slab serif).
Параграфы:
Gill Sans (sans-serif)
Дизайнеры этого сайта создали очень утонченный и красивый дизайн своего веб-ресурса. Здесь отсутствуют какие-либо раздражители и жирные шрифты. Они остановили свой выбор на тонком шрифте для заголовков и простом шрифте для текста тела сайта.
Присутствующие на этом ресурсе оба семейства шрифтов имеют отличное сочетание, что позволяет посетителю с легкостью читать весь текст.
Заголовки и параграфы:
Skolar (serif)
Дизайнеры этого сайта используют только один шрифт с засечками. Но, несмотря на такое неординарное решение специалистов, заголовки и параграфы между собой имеют видимую разницу. Все это благодаря тому, что здесь используются специфические стили, цвета и размеры шрифта.
12 лет работаем с лидерами рынков и молодыми амбициозными компаниями
— Реализуем любой сервис с нетипичным функционалом;
— Переезды на Битрикс, интеграции со всем на свете;
— Налаженная система менеджмента: четкое соблюдение дедлайнов и ТЗ
ТОП 50
по России
Второй распространенный вид классификации — по роли шрифта.
По этому критерию выделяют текстовые (или наборные), акцидентные (заголовочные, выделительные) и декоративные шрифты.
Текстовые шрифты предназначаются для набора сплошного текста (больших блоков), следовательно их самой важной характеристикой является удобочитаемость. При этом требуется не только обеспечивать легкость прочтения каждой отдельной буквы, но и легкость восприятия слов и фраз.
Акцидентные шрифты проектируются в расчете на использование крупных кеглей. Их второе название «заголовочные» дает отчетливо понять область применения таких шрифтов. Разборчивость в данном случае уходит на второй план (но остается важной), а на первый выходит привлечение внимания. При этом шрифт не должен быть слишком «агрессивным», чтобы полностью не отвлечь внимание от основного текста.
Роль декоративных шрифтов отчасти похожа на роль заголовочных — они должны привлечь внимание. Но если заголовочные привлекают внимание с целью дальнейшего прочтения текста, то декоративные шрифты должны отвлечь все внимание на себя. Это как театр одного актера.
Обязательно «попробуйте на вкус» каждый из видов шрифтов: почувствуйте их настроение, их выразительность и настрой, а также их сочетания друг с другом.
Как подобрать шрифты на сайт
- Стилистика сайта и основы гарнитуры. Чтобы правильно выбрать шрифт, нужно понять настроение сайта или рекламного материала. Гарнитуры могут быть серьезными, игривыми, элегантными и т.д. Важно соотносить начертания букв с основной идеей проекта. Например, материал о медицинских исследованиях нежелательно публиковать, используя рукописный шрифт, а оригинальный баннер потеряет свою эксклюзивность, если дизайнер выберет официальное написание букв. Но в первую очередь все зависит от идеи.
- Аудитория и контекст. Дизайнер создает продукт для аудитории, поэтому должен учитывать ее потребности и вкусы. Шрифт на небольших визитках должен быстро и легко читаться, а не заставлять угадывать фамилию специалиста или название бренда.
- Функциональность. Восприятие букв, символов для печатных изданий и страниц сайтов, которые будут просматриваться через экраны гаджетов, различается. Аналогично с заголовками и основным текстом. Для заголовков больше подходят декоративные гарнитуры, а для крупных блоков текста — нейтральные шрифты.
Профессия «Графический дизайнер с нуля до PRO»
Освойте востребованные инструменты и навыки для решения дизайн-задач за 18 месяцев
Используйте эти безопасные веб-шрифты CSS и HTML для своих проектов 2020 года
Выбор шрифтов может показаться привередливым, но для маркетологов это немаловажная деталь. Выбор репрезентативного стиля текста гарантирует, что ваше сообщение четко передано, представляет бренд и в конечном итоге повлияет на кампанию.
Таким образом, важно знать, как ваши шрифты отображаются в разных браузерах и на разных устройствах. Прежде чем опубликовать свой веб-сайт, обязательно проверьте свой стек шрифтов в различных браузерах, чтобы убедиться в совместимости, и при необходимости обязательно используйте резервные шрифты.
Моноширинные шрифты
Также помимо растровых шрифтов, компьютеры породили моноширинные шрифты.
Обычно в шрифтах: разные символы имеют разную ширину. А в таких шрифтах все знаки, а точнее площади, которые занимают знаки, одинаковые по ширине.
Моноширинные шрифты, в первую очередь, используются в текстовых интерфейсах типа, Norton Commander, FAR и так далее. Такие моноширинные шрифты до сих пор используются в Linux в приложении Midnight Commander.
Шрифты для сайта — что может быть не так?
Какой-то шрифт может быть доступен не для всех. А это означает, что могут проблемы. Вы довольны тем, что выбрали красивые шрифты для сайта, а посетитель веб-страницы видит вместо них безобразную писанину.
Такого не случится, если реализовать резервный вариант.
Насколько важно применение безопасных веб-шрифтов?
У каждого устройства есть собственный набор предустановленных шрифтов. Какой именно, зависит от операционной системы. Беда в том, что между ними есть небольшие различия.
А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.
Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите , — один из стандартных вариантов. Например, Times New Roman .
Поэтому как на вашем экране текст может выглядеть просто ужасно.
А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows , Mac , Google , а также Unix и Linux .
С помощью этой подборки дизайнеры, а также владельцы сайтов могут указать, какой именно шрифт следует применить в качестве резервного . Таким образом, появляется возможность контроля над тем, как будет выглядеть страница на разных устройствах.
В качестве запасного варианта разработчик подбирает шрифт, очень похожий на оригинальный, и именно он будет продемонстрирован пользователю.
Взглянем на подборку, в которой собраны стандартные шрифты HTML .
Бонус: немного о цифрах
Вы уже думали все? Но нет, еще немного ценного материала.
В типографике используются арабские и римские цифры. Если в наборе гарнитуры есть капитель, лучше римские цифры набирать ей.
Арабские цифры бывают двух видов: маюскульные и минускульные.
Маюскульные цифры все одного роста c прописными и моноширинные, поэтому их удобно использовать вне текста, в таблицах.
Минускульные чуть выше строчных букв с верхними и нижними выносными элементами, при этом кернинг отрегулирован пропорционально (каждая цифра занимает столько места, сколько ей необходимо). Используйте минускульные цифры , если нужно вставить их в текст. Они же отлично смотрятся в увеличенном кегле.
На этом пока все.
На самом деле, пользователи не увидят особой разницы в том, какой шрифт вы использовали, с засечками или без, учитывали ли контрастность, им без разницы воспользовались ли вы Arial или Open Sans, выровняли ли шрифты по baseline вручную или воспользовались автоматическим выравниванием. Но есть то, что будет незаметно для них самих влиять на их восприятие,— удобочитаемость, простота считывания, эмоциональный опыт. Хороший визуальный дизайн — это сила, многократно усиливающая хороший UX.
Вникайте в детали, вчитывайтесь в длинные тексты, разбирайтесь и растите. В общем, делайте дизайн качественно — и коллективный дизайнерский разум скажет вам спасибо. Молодцы, что дочитали. Всем добра!
Любите то, чем занимаетесь, и занимайтесь тем, что любите.
Ваша Alexandra Kulikovskaya
