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

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

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

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

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

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

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

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

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

Станьте веб-дизайнером с полного нуля и зарабатывайте удаленно

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

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

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

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

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

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

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

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

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

Читаемый шрифт — это высокий шрифт с широкими глифами без стилей. Это не значит, что шрифты с засечками нельзя использовать. Они также могут хорошо работать, если размер шрифта больше 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 применим:

  • в аббревиатурах;
  • в логотипах;
  • иногда в заголовках.

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

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

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

Заключение

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

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

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

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

Как стать веб-дизайнером с нуля и работать удаленно на фрилансе
Регистрируйтесь на бесплатный 3-дневный онлайн-интенсив
Рекомендуемые статьи:
Веб-дизайн
20.02.2021
UX-дизайн — что это такое и почему так важен для пользователя
UX-дизайн (от англ. user experience — «опыт пользователя») — это изучение потребностей и задач пользователей, когда мы говорим про их опыт взаимодействия с сайтом или приложением. UX это про то, когда вы пользуетесь сайтом и чувствуете, что все находится в нужном месте, вы не тратите много времени на поиск интересующей вас информации, и все ясно […]
361
Читать статью
Веб-дизайн
14.03.2021
Figma — что это за программа и как она работает
Что такое Figma и для чего используется? Figma — это инструмент веб-дизайна, способный создавать: макеты; прототипы; интерактивную анимацию. Веб-разработчики используют Figma в качестве библиотеки компонентов системы дизайна. Figma контролирует актуальность рабочих версий макета, поддерживает функцию совместной работы, режим демонстрации и генерации кода. Figma — это редактор векторной графики для совместного проектирования интерфейсов, используемых в веб-разработке […]
59
Читать статью
Веб-дизайн
25.02.2021
Что такое модульная сетка в дизайне и зачем она нужна
Секрет успеха в любом виде дизайна зависит от того, как расположены все элементы друго относительно друга. В этом и есть смысл создания дизайн-макета сайта или приложения. Важной составляющей дизайна являются сетки. Они — основа всех макетов, инфографики и презентаций. Дизайн макета предполагает использование одной сетки или группы сеток, в зависимости от того, какая у вас […]
131
Читать статью
Веб-дизайн
15.02.2021
Краткое руководство, как стать веб-дизайнером с нуля
Часто ли вы задумываетесь о том, что могли бы улучшить дизайн посещаемых вами сайтов? Или, возможно, у вас уже есть личный блог, который вы активно ведете и заметили, что процесс проектирования и создания сайта вам очень импонирует. Если это так, и вы хорошо разбираетесь в деталях, обладаете талантом к креативу и творчеству, не боитесь технических […]
339
Читать статью
Веб-дизайн
19.02.2021
Что такое мудборд в дизайне на конкретных примерах и как его создать
У вас было такое, что вы придумываете какую-то идею, представляете, как это будет выглядеть в действительности, но как только начинаете делиться идеей со знакомыми, каждый раз слышите: «О чем ты, черт возьми, говоришь?». Не волнуйтесь, есть один инструмент, который поможет решить эту проблему, и этот инструмент — мудборд (доска настроения). Что такое мудборд Мудборд — […]
286
Читать статью
Веб-дизайн
22.02.2021
Новые тренды веб-дизайна и вдохновение на 2021 год
Тренды веб-дизайна приходят и уходят. Пользователи посещают множество сайтов каждый день, и компаниям приходится проявлять больше творчества, чтобы привлечь их внимание. Предприниматели сосредотачиваются на визуальной привлекательности и удобстве использования своих сайтов, чтобы пользователи оставались там. Давайте теперь подробно рассмотрим ведущие тенденции дизайна UI / UX на 2021 год и посмотрим, как популярные бренды успешно их […]
91
Читать статью
Веб-дизайн
9.04.2021
Что такое референсы и для чего они нужны
Что такое референсы Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер, чтобы начать и настроиться на нужный лад. Для чего нужны референсы Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. […]
27
Читать статью
Веб-дизайн
19.03.2021
Zero Block на Tilda — что это и как работает
Можно ли создать собственный дизайн на Tilda? Сервис Tilda многими воспринимается только в качестве обычного конструктора сайтов, на котором по-быстрому можно сложить сайт-визитку или незамысловатый лендинг. Что касается дизайнеров, то Tilda многие просто не воспринимают всерьез. Дизайн? Да, ну! О чем вы говорите? Какой может быть дизайн на конструкторе сайтов? Там стандартные, уже придуманные кем-то […]
61
Читать статью
Веб-дизайн
5.04.2021
Мокап – что это и зачем нужен в дизайне
Что такое мокап Мокап – это макет, с помощью которого заказчик может увидеть свой продукт в трехмерном изображении, то есть визуально представить и понять, как будет выглядеть готовый продукт в реальности. Обычно это файл в формате PSD, который заказчик может открыть у себя на компьютере либо телефоне и посмотреть, как будет выглядеть: логотип; дизайн фирменного […]
87
Читать статью
Веб-дизайн
6.03.2021
Что такое брендбук и как он может помочь бизнесу?
Задумывались ли вы о том, хороша ли визуальная идентичность вашего бренда в интернете? Суть брендинга в его уникальности, что делает узнаваемым продукт среди конкурентов, но владельцы малого и среднего бизнеса в потоке рутинных дел забывают про внешний вид своей компании, откладывая создание брендбука на потом. Наличие брендбука позволит вам: сэкономить деньги; повысить вовлеченность; привлечь больше […]
69
Читать статью
Веб-дизайн
1.03.2021
Сколько зарабатывает веб-дизайнер в штате и на фрилансе
Профессия веб-дизайнера будет востребована до тех пор, пока людям будут нужны сайты. Основными этапами процесса создания любого сайта являются: веб-дизайн; вёрстка страниц; программирование; наполнение контентом; тестирование. Веб-дизайнер приступает к работе практически первым, сразу после определения концепции и структуры сайта сайта. Что делает веб-дизайнер Веб-дизайнер отвечает за внешний вид сайта. Он заботится о том, чтобы сайт […]
95
Читать статью
Веб-дизайн
18.02.2021
Что такое веб-дизайн и чем занимается веб-дизайнер?
Определение веб-дизайна Веб-дизайн — это один из этапов разработки сайта. Сайты создаются для e-commerce (интернет-магазины), для услуг или для информационных блогов, но все, что связано с внешним видом и визуальной составляющей сайта, подпадает под понятие «веб-дизайн». Чтобы создать полноценно работающий сайт, вам необходимо знать языки программирования: Язык гипертекстовой разметки, состоящий из HTML-тегов для создания структуры […]
160
Читать статью
Оставьте ваш комментарий