типографика

Типографика в веб-дизайне

Типографика в веб-дизайне: что нужно знать

Типографика в веб-дизайне – процесс довольно важный и ответственный. Грамотное оформление текстового контента, который занимает большую часть ресурса, поможет повысить актуальность сайта

Типографика занимает важное место в разработке любого веб-дизайна. Поскольку текстовое наполнение сайта может занимать до 90% его содержимого. И текст в этом случае несет как информационную нагрузку, так и эстетическую. Учитывая это, надо уделять время этой части дизайна, следуя известным правилам и законам.

Шрифт

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

Введение @font-face CSS гораздо облегчило специалистам работу. Однако не все шрифты подойдут для хорошего веб-дизайна. Одни нечитабельны и сложны к восприятию, другие много весят и затормаживают работу сайта. Кроме того, могут быть проблемы с их обработкой при отображении в различных браузерах.

Типографика: макро и микро

Значимой частью типографики являются следующие 2 направления:

  • макроуровень (вся текстовая структура, определение положения контента по отношению к дизайну);
  • микроуровень (мелкие детали: пробелы, отступы, интервалы и прочее).

Задача первого заключается в создании живых, активных, и одновременно гармоничных и цельных текстовых блоков. Задача второго – обеспечение читаемости.

Понимание пространства является ключевым фактором создания целостной композиции. Элементов, не имеющих значения, в этом деле нет: заголовок, регистр, толщина и др.

Указывать шрифты лучше всего в условных единицах «em» либо %, что повышает адаптивность и гибкость наполнения. Использование пикселей «px» целесообразно лишь для неадаптивных элементов.

Как оформить текстовый блок?

Еще одним немаловажным разделом в типографике является набор символов. Сюда относят:

  • пунктуация;
  • применение скобок, тире и дефиса, многоточия;
  • пробелы и прочее.

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

Что касается верстки, то тут надо придерживаться таких правил:

  • Ограниченность текстового блока (40–50% от ширины страницы).
  • Интервал между абзацами – 1,5.
  • Контраст текста с фоном в пределах 75–90%.
  • Удобный для чтения шрифт – 12–16 px, но менее 10 px для самого маленького блока.
  • Идеальный межстрочный интервал – 140–150%.

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

Текстовые блоки

Длинные предложения препятствуют нормальному восприятию информации, поэтому стоит контролировать длину строк. Наиболее приемлемый вариант – от 70 до 30 символов. Ширина строки будет влиять на межстрочный интервал, который не должен превышать пробел в словах.

Засечки: быть или не быть

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

Стоит обратить внимание на рубленый шрифт (Sans Serif). Его применение оправдано в таких случаях:

  • пользователи – дети;
  • имеет место яркая, акцентная цветовая гамма;
  • имеется узкий или очень мелкий текст.
  • Начертание

Еще одной важной деталью работы над типографикой является буквенное начертание. Грамотное его использование позволяет расставлять необходимые акценты. Курсив придает торжественный вид, жирное начертание говорит о важности информации, а свойство «font-variant: small-caps» добавляет некой изысканности.

статьи веб студии yoclick Предыдущая статья

Поделиться:

Популярное в блоге

Все наши статьи Вы сможете посмотреть здесь ...

Основные техники SEO продвижения

10 мая 2017

Основные техники SEO продвижения

Читать далее...
контент для веб-сайта

25 апреля 2017

Правильный контент для веб-сайта

Читать далее...
Top