Типографика — основа для работы веб-дизайнеров, включающая в себя шрифты. Для многих мастеров эта область становится проблемной и «западающей».
Но не пугайтесь, Логомашина поможет заполнить пробелы! В этой статье мы расскажем, что такое типографика и как ее использовать.
Без грамотно продуманного текста сайт не спасает даже яркая картинка. Типографика делает визуализацию ресурса привлекательной и выгодной.
Основы типографического искусства
Типографика относится к сфере графического веб-дизайна, она призвана, чтобы разрешить задачу мастера по вопросу подбора подходящего шрифта для проекта. Это наука, работать с которой приходится по аналогии «чистого листа».
Многие дизайнеры уделяют больше внимания яркой визуализации, выбору видеоматериала, привлекательных для пользователя иллюстраций и картинок и забывают о важности шрифта для верстки, которую закладывают основы типографики.
Давайте, познакомимся с некоторыми ее правилами:
- Не увлекайтесь
Не стоит использовать множество шрифтов в веб-дизайне, даже если они отличаются привлекательностью. Вы сделаете сайт ляпистым и примитивным. - Читабельность
Если стоит выбор между удобством для пользователя и оригинальностью, выбирайте первое. Ведь вы делаете ресурс для людей, которые должны не просто прийти на сайт, но и остаться там. - Выделяйте главное
Грамотное использование типографики сразу акцентирует внимание пользователя на главной цели, основных элементах проекта. Если шрифт вступает с дисгармонию между направлением ресурса — это ошибка, требующая немедленного исправления. - Приоритет отдавайте тексту
Помните, что типографика важнее, чем красочное наполнение. Ресурс — это, прежде всего текст, а не яркие картинки. - Учитывайте соотношение между контентом и рекламными блоками
В идеале делите предварительно страницы ресурса на пропорции: реклама/текст в соотношении 5/3 или 3/2.
Если нужно проверить сайт на читабельность и естественность, дайте его посмотреть стороннему человеку. «Незамыленным» взглядом легко определить, удобен ли ресурс, как воспринимается типографика сайта.
Особенности шрифтов
Говоря простым языком, шрифт для графической типографики — это набор символов, которые подбираются в коллекции согласно единой стилистике:
- по размеру букв
- толщине
- наклону
- промежутку
Как классифицируются шрифты?
Разновидностей шрифтов в типографике много. Они делятся на группы, подгруппы. Выделяют следующие категории:
- San-Serif («Гротеск») простой шрифт без дизайнерских засечек
- Serif fonts («Антиква») шрифт с засечками
- Акцидентные варианты (декоративная группа). Преимуществом становится яркость выделения и привлекательность для веб-дизайна. Но учитывайте, что они сложнее по восприятию и читабельности. Их лучше применять для выделения одного слова (фразы) или использовать в логотипах.
- Handwritting (рукописные). Оригинальные разработки для основы ресурса. Но также не стоит слишком обильно их употреблять, применяя для отдельных выделений или лого.
- Моноширинная группа. Отличием становится одинаковость букв с измерением по горизонтали.
- Символьные. Имеются в разных подгруппах (Icomoon, Stroke, Fontawesome) в виде оригинальных иконок.
Выбор подходящей группы шрифта будет зависеть от особенности ресурса. Учитывается направление сайта, для чего создается контент (реклама, информация, техническое описание и пр.)
Зачем нужна гарнитура?
Группа шрифтов, различающихся по стилистике (габаритам, типу), но обладающих исключительным, единым стилевым решением называется «гарнитурой». Обычно основа гарнитуры состоит из определенного набора знаков.
Не путайте понятие «гарнитура» и «шрифт»:
- гарнитура: объединение нескольких групп шрифта для веб-дизайна
- шрифт: вариант начертания отдельных знаков
Выбираем подходящий размер
Типографика имеет длинную историю и подчиняется собственной моде. Во времена, когда она только формировалась, дизайнеры пользовались необычными по структуре и форме шрифтами. В тот период модным считалась вычурность, которая со временем пришла к гармоничной классике — читабельным с простым по виду шрифтом.
Расскажем о некоторых правилах удобной и современной для пользователя типографике:
- Использовать 2-3 вида шрифта для design
Чрезмерное увлечение ими показывает непрофессионализм дизайнера. Для заполнения сайта используйте шрифты, которые схожи между собой по визуалу и гармонично объединяются. Например, удачным выбором становится варианты Verdana и Georgia с одинаковой шириной символов. А вот Impact и Baskerville — яркий пример неудачного сочетания, эти шрифты не одинаковы по ширине. - Применять стандартные варианты шрифтов для основы ресурса
Пользователям лучше «заходит» привычная классика. Это true-шрифты, куда входят системные варианты Calibri и Arial. Осторожно и внимательно используйте нестандартные рукописные шрифты (например, старославянские и готические). - Делайте буквы читабельными
В типографике есть варианты шрифтов, в которых можно перепутать отдельные буквы. Для пользователя сложным становится слишком маленькие буквенные расстояния. Не используйте шрифты, которые плохо воспринимаются для чтения! - Помните, что пользователь может заходить на сайт с разных устройств
Поэтому применяйте адаптивные варианты для веб-дизайна, которые читаются независимо от размера экрана.
Не применяйте чрезмерно маленьких шрифтов, чтобы пользователю не приходилось изменять их и тратить время на увеличение.
Правила сочетания
Использование только одного шрифта в современном контенте уже не считается трендом. Не забывайте выделять и подчеркивать важные текстовые блоки. Но старайтесь избегать в основе designing таких цветов, как красный и зеленый, помните, что в ЦА могут находиться люди с дальтонизмом.
При разработке визуала контента учитывайте и следующие правила:
- используйте эмодзи и пиктограммы для веб-дизайна, но там, где это уместно для повышения динамики восприятия текста
- форматируйте и разделяйте текст на абзацы для удобства восприятия (идеальным считается абзац из 3-5 предложений)
- используйте выделения (курсив, подчеркивание, жирным, полужирным), эффект перечеркивания работает если фразе нужно придать оттенок иронии
- не используйте капслок, большие буквы воспринимаются пользователями, как повышение голоса, истерия, ругательство
- не делайте предложения слишком длинными, оптимальное для восприятия количество букв (символов) на одну строку 50-60 для текста ПК и 30-40 символов для мобильных устройств
- отслеживайте длину межстрочного интервала в основе (лучше делать увеличенным), придерживайтесь правила, что размер интервала больше на 30% высоты букв
Где брать коллекции шрифтов?
К каждому рабочему проекту для веб-дизайна следует подходить индивидуально. Подбирайте графические шрифты с учетом тематики основы ресурса (женская/мужская/детская аудитория, фэнтезийное искусство, художественная литература, книги и т.п.).
Только после того, как вы сформируете представление по направленности ресурса, можно приступать к выбору типографического шрифта. Ну а дополнять коллекции шрифтов для web можно различными способами, используя как платные, так и бесплатные ресурсы.
Бесплатные коллекции
Платные коллекции
Заключение
Типографика — это важнейшая часть современного текстового оформления сайта. Умея разбираться в этой сфере графического веб-дизайна, грамотно подбирая гарнитуру и отдельные шрифты, вы сможете выгодно и эффективно подать контент, сделав его приятным и полезным для пользователя. А при наличии опыта в typography, вы можете создавать и собственные авторские шрифты в едином стиле, неплохо заработав на таком умении.
Хочешь узнать больше о дизайне?
Чтобы прокачивать знания, навыки, развивать круг профессионального общения, быстро осваивать тренды и лайфхаки в дизайне, приглашаем в Логомашину.
Мы регулярно проводим бесплатные мероприятия, где ты можешь попробовать разные направления в дизайне, сделать первые крутые кейсы и даже найти заказчиков. Тыкай по ссылке, чтобы посмотреть ближайшие интенсивы!
