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

Шрифты их размеры и цвета на сайте

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

Давайте рассмотрим основные правила.

1. Выбор шрифта

Правильный выбор шрифта во многом определяет концепцию сайта и влияет на общее восприятие. Можно разделить на две основные группы: шрифты с засечками – Антиква, и без засечек – Гротеск. Для небольших текстов лучше использовать шрифты без засечек. Еще один важный момент: старайтесь использовать шрифты, которые есть по умолчанию в Windows или  Mac Os, так как есть риск некорректного отображения в веб-браузерах.

 

 

1. Чем меньше, тем лучше

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

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

 

1. Правильное выравнивание

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

 

 

1. Макро - и микротипографика в дизайне сайта

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

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

 

1. Читабельность

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

 

1. Правильный подбор цветов

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

 

1. Правило воздуха

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

 

1. Размер имеет значение

Когда речь идет о шрифтах, конечно. Оптимальный размер самого текста обычно 12-16 пикселей. Для заголовков и подзаголовков (Н1, Н2, Н3) обычно несколько масштабнее. Также желательно использовать другое начертание для заголовков и цитат.

• Ширина с блоком текста должна составлять 40-50%;
• Расстояние между абзацами не больше 1,5 величины шрифта;
• Величина шрифта – 12-16 px. Для мелкого текста – не менее 10 px
• Межстрочный интервал – 140-150% величины шрифта
• Разница между яркостью фона и текста – 75-90%

 

1. Чем проще – тем лучше.

Золотое правило на все случаи жизни. Ведь выбор «красивого» шрифта – это еще далеко не все. В сверстанном макете на конечный результат влияют еще и начертание шрифта (жирный, курсив), его размер, расстояние между строками (интерлиньяж), расстояние между буквами (кернинг), композиция, визуальная иерархия. Очень важно использование типографических символов – кавычки «елочки», длинное тире, пробелы.

Как правило, чем проще структура исходного текста – тем проще его верстать.

 

Немного о стилистике сайта

Стиль в веб-дизайне – это определенный набор взаимосвязанных элементов для обеспечения общего гармоничного впечатления.

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

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

Можно выделить основные стилистические направления:

- Классический стиль – симметрия, неброские цвета, выдержанность, лаконичность форм.

- Готический (органический) – использование неправильных органических форм и коллажей.

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

- Газетный стиль – табличная верстка

- Минимализм – легкость и простота в подаче информации, минимум графического оформления

- Мультипликационный – яркие тона, присутствие мультяшных героев

- Футуристический стиль (хай тек) – использование роботов, 3д объекты, фантастика

- Бизнес стиль – наличие белых тонов, четко расположенные блоки с информацией, много фотографий

- Промо-стиль – предоставление (реклама) какого-то продукта.

- Панковский стиль – разнообразие и хаотичность графических элементов.

- Стиль Web 2.0 – отличается простотой, слегка увеличенным шрифтом, объемными эффектами, закругленными краями, несколько колонок и максимально удобную навигацию.

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

И немного о колористике

Что касается колористики, то мы уже заметили, что восприятие стиля тесно связано с цветовым решением. Цвет – это своеобразный «генератор эмоций» посетителей сайта. Колористическое оформление страниц ресурса передает акценты на важной информации, может вызвать волнение или стимулировать к определенным действиям. Это мощный фактор манипуляции эмоциями пользователя.

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