Веб-дизайн
4 марта 2021
1467

10 основных правил типографики в веб-дизайне

Путешествие по красивой типографике в веб-дизайне
Содержание:

Что такое типографика

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

Плохая типографика может испортить впечатление пользователя о сайте, а с ростом популярности CSS и HTML она стала еще более важной. Как правильно отметил директор дизайнерского агентства Information Architects Оливер Райхенштайн:

Веб-дизайн на 95% состоит из типографики

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

В этой статье мы разберем типовые правила типографики в веб-дизайне, которые важны не только с точки зрения привлекательного визуала текста, но и влияния на юзабилити сайта (UX-дизайн). Мы можем заверить вас, что каждый совет для вас будет очень полезным.

Правила в типографике

Эффективное использование пустого пространства

Пробел не обязательно должен быть пространством между элементами страницы, например картинками и текстом. Это может быть пространство между буквами, предложениями или абзацами.

Если на сайте правильно управлять пустыми пространствами, это повысит удобство чтения контента и упростит навигацию. Еще один важный момент — оставить межстрочный интервал, облегчающий чтение содержимого.

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

Расстояние между абзацами в статье на портале tut.byРасстояние между абзацами в статье на портале tut.by

Обратите внимание, что статья, которую вы сейчас читаете — приятна глазу, так как текст не выглядит скомканным полотном, а разбит на блоки по 3-4 строчки, что позволяет его легко воспринимать и читать.

Освойте UX/UI веб-дизайн и зарабатывайте удаленно

Использование правильного типа шрифта

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

Читаемый шрифт — это высокий шрифт с широкими глифами без стилей. Это не значит, что шрифты с засечками нельзя использовать. Они также могут хорошо работать, если размер шрифта больше 12.

Для 12 и ниже используйте шрифты по типу Sans serif.

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

Рекомендуем эти 10 веб-шрифтов для сайта:

  • Gotham Pro;
  • Visuelt Pro;
  • TT Norms Pro;
  • Eastman;
  • RF Tone;
  • Value Sans Pro;
  • Gordita;
  • Mabry;
  • Averta;
  • Mont.
Топ 10 шрифтов для веб-разработкиТоп 10 шрифтов для веб-разработки

Ограниченное количество шрифтов

Рекомендуется не использовать слишком много шрифтов. Вы можете использовать 2 разных типа, но не выходите за рамки трёх, потому что это очень отвлекает.

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

Пример сочетания шрифтов из одного семейства RobotoПример сочетания шрифтов из одного семейства Roboto

Создание иерархии

Чтобы привлечь внимание читателя, дизайнер должен разделить текстовый контент по степени важности:

  • сильно важно;
  • менее важно;
  • не важно.

Сделать это можно, увеличив размер шрифта и добавив его жирности, а также соблюдать семантичность заголовоков h1-h6.

Это создаст иерархию. Чем крупнее шрифт, тем большее значение текст имеет.

Пример иерархии заголовков на сайте H1-h3Пример иерархии заголовков на сайте H1-h3

Чтобы понять иерархию, посмотрите примеры информационных порталов (meduza.io, forbes.ru, rbc.ru), в которых заголовки написаны гораздо более крупным шрифтом по сравнению с остальным контентом.

Использование правильного цветового контраста

Выбор цвета шрифта влияет на читаемость текста.

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

Дизайнер выбирает цвет шрифта, учитывая цветовую схему. Мы подобрали для вас 25 примеров контрастности цветов текста:

Контрастные цвета для типографикиКонтрастные цвета для типографики

Не используйте центрирование текста

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

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

  • чередование слошком длинных и слишком коротких строк;
  • строки одинаковой длины;
  • любые очевидные формы, которые приобретает текст, при центровке.

Умеренно используйте центрированный текст, и у вас получится приятный дизайн.

Пример неудачного центрирования текстаПример неудачного центрирования текста

Не делайте шрифт слишком маленьким

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

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

Длина строки текста

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

А длинные строки мешают внимательно фокусироваться на тексте.

Поэтому важно придерживаться золотой середины и рекомендуется использовать 60 знаков (символов, букв) в одной строке на компьютерной версии сайта и 30-40 знаков для мобильного устройства.

Оптимальная длина строкиОптимальная длина строки

Не используйте CAPSLOCK

Текст, который пишется большими заглавными буквами, считается«кричащим» и замедляет чтение текста. CAPSLOCK применим:

  • в аббревиатурах;
  • в логотипах;
  • иногда в заголовках.
Освойте UX/UI веб-дизайн и зарабатывайте удаленно

Определение правильных точек фокусировки

Каждый дизайнер знает, что читатели обычно просматривают контент в интернете по паттернам «Z» и «F», поэтому структура страниц делается по левому краю слева-направо, соблюдая правила модульных сеток.

Как работают паттерны «Z» и «F» на сайте FacebookКак работают паттерны «Z» и «F» на сайте Facebook

Заключение

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

Резюмирая все вышесказанное можно определить 3 основные критерия успешной типографики на сайте. Она должна быть:

  • простой;
  • понятной;
  • разборчивой.

Не старайтесь переборщить с творчеством, верстая текст, а подумайте над тем, легко ли будет людям читать то, что вы сделали.

Как стать веб-дизайнером с нуля и работать удаленно на фрилансе
Регистрируйтесь на бесплатный онлайн-курс
Рекомендуемые статьи:
Веб-дизайн
7.06.2021
Адаптивный веб-дизайн сайта: что это и зачем нужен
В этой статье мы собираемся разобрать, что такое адаптивность сайта и ее важность в веб-дизайне и интернет-маркетинге. С ростом популярности Интернета многие компании начинают заявлять о своем онлайн-присутствии с помощью сайта или блога. Ежедневно запускается около тысячи интернет-ресурсов. И если раньше пользователи, чтобы заходить на сайты, использовали только настольные компьютеры со стандартным размером экрана, а […]
271
Читать статью
Веб-дизайн
26.05.2021
Лучшие бесплатные и платные фотостоки (фотобанки)
Идеи для контента или готовые изображения и видео легко найти на фотостоках, а уникальные фото и видео с высоким качеством — в фотобанках. Среди сайтов нет четкого разделения, что такое фотобанк, а что такое фотосток. В этой статье примем их за синонимы. В фотобанке можно найти бесплатное изображение, в фотостоке — платное и наоборот. Одни […]
603
Читать статью
Веб-дизайн
19.07.2021
Пагинация страниц сайта — что это и как ее сделать
Когда мы читаем книгу, информация в ней подается постранично. Прочитывая одну страницу, всегда можно перевернуть, чтобы перейти к следующей, поставить закладку на самом важном или интересном месте, открыть сразу на трехсотой или четыреста двадцать шестой. Это принцип не только «бумажных» книг — электронные работают аналогично, потому что подобный формат привычен и удобен всем людям. Что […]
1123
Читать статью
Веб-дизайн
14.07.2021
Прототип сайта — что это и зачем нужен
Каждый сайт должен продавать. Даже если речь идет о некоммерческом проекте, где нет прямого предложения «купи что-то», все равно посетитель «расплачивается» своим вниманием и временем, а приобретает необходимую информацию, развлечение, общение. Поэтому дизайн ресурса должен быть не просто «красивым» или «гармоничным», а еще и продающим. Прототип сайта — это «основа», на которой потом будет держаться […]
4304
Читать статью
Веб-дизайн
9.04.2021
Что такое референсы и для чего они нужны
Что такое референсы Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер, чтобы начать и настроиться на нужный лад. Для чего нужны референсы Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. […]
594
Читать статью
Веб-дизайн
11.07.2021
HEX-код что это и как работает для обозначения цветов
Работа с цветом — это основной инструмент графического и веб-дизайнера. Каждое приложение и сайт подразумевает использование собственных оттенков, даже если выбран максимально лаконичный стиль. На этапе создания макетов подсказки по выбору цветовой гаммы есть во многих редакторах, та же компания Adobe предлагает для своих продуктов основные виды гармоний: колесо; комплементарность; контраст; оттеночные «гибриды» и многое […]
3311
Читать статью
Веб-дизайн
5.04.2021
Мокап – что это и зачем нужен в дизайне
Что такое мокап Мокап – это макет, с помощью которого заказчик может увидеть свой продукт в трехмерном изображении, то есть визуально представить и понять, как будет выглядеть готовый продукт в реальности. Обычно это файл в формате PSD, который заказчик может открыть у себя на компьютере либо телефоне и посмотреть, как будет выглядеть: логотип; дизайн фирменного […]
1668
Читать статью
Веб-дизайн
20.02.2021
UX-дизайн — что это такое и почему так важен для пользователя
UX-дизайн (от англ. user experience — «опыт пользователя») — это изучение потребностей и задач пользователей, когда мы говорим про их опыт взаимодействия с сайтом или приложением. UX это про то, когда вы пользуетесь сайтом и чувствуете, что все находится в нужном месте, вы не тратите много времени на поиск интересующей вас информации, и все ясно […]
1156
Читать статью
Веб-дизайн
17.10.2021
Футер сайта — что это и зачем нужен
Сайты строятся по определенной логике и структуре. Это удобно и пользователям, которые привыкают к стандартной «логике» — например, большинство станет искать разделы меню вверху справа или слева, информацию о товарах в корзине на сайте интернет-магазина — справа в углу. Программистам тоже подобная стандартизация облегчает задачу создания сайта, верстки, а поисковые роботы и другие «искусственные интеллекты», […]
488
Читать статью
Веб-дизайн
22.02.2021
Новые тренды веб-дизайна и вдохновение на 2021 год
Тренды веб-дизайна приходят и уходят. Пользователи посещают множество сайтов каждый день, и компаниям приходится проявлять больше творчества, чтобы привлечь их внимание. Предприниматели сосредотачиваются на визуальной привлекательности и удобстве использования своих сайтов, чтобы пользователи оставались там. Давайте теперь подробно рассмотрим ведущие тенденции дизайна UI / UX на 2021 год и посмотрим, как популярные бренды успешно их […]
426
Читать статью
Веб-дизайн
18.02.2021
Что такое веб-дизайн и чем занимается веб-дизайнер?
Определение веб-дизайна Веб-дизайн — это один из этапов разработки сайта. Сайты создаются для e-commerce (интернет-магазины), для услуг или для информационных блогов, но все, что связано с внешним видом и визуальной составляющей сайта, подпадает под понятие «веб-дизайн». Чтобы создать полноценно работающий сайт, вам необходимо знать языки программирования: Язык гипертекстовой разметки, состоящий из HTML-тегов для создания структуры […]
1500
Читать статью
Веб-дизайн
19.02.2021
Что такое мудборд в дизайне на конкретных примерах и как его создать
У вас было такое, что вы придумываете какую-то идею, представляете, как это будет выглядеть в действительности, но как только начинаете делиться идеей со знакомыми, каждый раз слышите: «О чем ты, черт возьми, говоришь?». Не волнуйтесь, есть один инструмент, который поможет решить эту проблему, и этот инструмент — мудборд (доска настроения). Что такое мудборд Мудборд — […]
1864
Читать статью
Оставьте ваш комментарий