Pull to refresh

Контрасты в веб-типографике

Web design *Typography *
Translation
Original author: Nick La
Наткнувшись на предложенную общественности статью (оригинальное название «Typographic Contrast and Flow»), не мог не перевести, т. к. во-первых, она написана простым и понятным языком, а во-вторых, изобилует множеством примеров и иллюстраций.

Итак, как вы наверное знаете, большинство пользователей интернета не читают строчку за строчкой, а «сканируют» текст, перемещаясь от одной точки к другой. По этой причине, дизайнеры создают типографические контрасты, чтобы подчеркнуть определенный текст. Контраст важен по тому, что не всё содержание страницы имеет одинаковое значение, одно более важно, чем другое. Создавая контрасты вы можете направить внимание читателя на важные сообщения и в тоже время повысить привлекательность внешнего вида страницы. Вот семь основных методов как добиться типографического контраста.

1. Размер


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

С другой стороны вы можете уменьшить значимость за счет использования меньшего размера шрифта.


2. Шрифт


Контраста можно добиться за счет комбинирования различных шрифтов. Однако необходимо использовать «веб-безопасные» шрифты двух основных типов: serif и sans-serif.

Как правило, для создания контраста между заголовком и текстовым блоком можно использовать шрифт с засечками (serif) для заголовка и без засечек (sans-serif) для остального текста.


3. Цвет


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

Вы можете воспользоваться блёклыми цветами для указания чего-то запрещенного или невозможного.

Иногда вам не надо делать что-то большим для привлечения внимания, вы можете создать выделение путем использования яркого цвета.

Вы также можете использовать цвет для различия отдельных слов внутри текста.

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


4. Регистр


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

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


5. Стиль


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

Взамен вы можете применить курсив (italic).


6. Начертание


Подчеркнуть значимость определенного текста можно, выделив его полужирным (bold) шрифтом.

Другая распространенная ошибка состоит в том, что люди имеют тенденцию выделять полужирным шрифтом целые строчки в тексте. От этого теряется важность или контрастность фрагмента.


7. Пространство


Пустое пространство играет важную роль в формирование вашего дизайна. Его хорошее использование расскажет читателю где начало, где пауза, где конец и что делать дальше.

Существует различные пути создания пространства:
  • Разбиение на блоки — создание отступов между блочными элементами с помощью padding или margin.
  • Разбиение на параграфы — создание промежутков между <р> элементами.
  • Межбуквенные интервалы (letter-spacing).
  • Межстрочные интервалы (line-height).
  • Использование абзацев для работы с цитатами и списками.

Заключение


Давайте соединим все эти методы вместе на практике.
Tags: типографикавебдизайншрифт
Hubs: Web design Typography
Total votes 65: ↑63 and ↓2 +61
Comments 44
Comments Comments 44

Popular right now