9 советов по типографике сайта

Типографика для веб сайта — достаточно важный элемент дизайна, который в рунете выражен как-то не очень сильно. Данный вопрос чаще поднимается на англоязычных зарубежных дизайнерских блогах, у нас внимание ему практически не уделяется. Нет, конечно при создании макета большинство дизайнеров думает о шрифтах, оформлении, но уж очень скромно и мало. Потому, наверное, в рунете можно по пальцам посчитать количество проектов с яркой креативной и нестандартной типографикой, больше стандартного унылого «серого» дизайна:(

Возможно, именно по этому Дмитрий Наумов решил поделиться интересным гостевым постом по теме.  Дима по совместительству, кстати, является автором весьма полезного проекта Converlab — «Дизайн. Юзабилити. Конверсия.» Итак, перейдем непосредственно к советам, они будут отличным дополнением статьи о трендах типографики сайтов.

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

От выбора шрифта зависит очень много. Дизайн шрифта определяет настроение, передает «характер», да и вообще оказывает сильное влияние на восприятие. Выбирайте тот шрифт, который соответствует стилю и концепции вашего сайта. Например, для «традиционного» дизайна пойдет традиционный шрифт с засечками, вроде Times Roman, для «современного» дизайна может подойти шрифт без засечек — Arial или Helvetica;

2. Размер шрифта

Особо важен размер шрифта основной части текста. Заголовок/подзаголовки могут быть гротескно большим и неуклюжим, но основной текст должен быть комфортным, что возможно только при оптимальный размерах. Обычно это 12-16 px;

Советуем также почитать:

• 10 лучших Google шрифтов для заголовков — бесплатные и самые популярные решения;
• CSS стили заголовков сайта — примеры оформления через CSS код.

3. Набор стилей

Шрифт не должен быть однообразен, серую массу читать не приятно. Разработайте систему стилей для заголовков и подзаголовков (H1, H2, H3 и т.д.), цитат, основного текста и тому подобное. Используйте для этого различные размеры шрифта, варианты его начертания, возможно для контраста в этих целях используйте еще один шрифт (специально для заголовков или цитат);

4. Акцент

Важные места по тексту обязательно нужно выделять — жирным или курсивом. Главное в этом не переусердствовать. Акцент он на то и акцент потом что должен использоваться дозировано;

5. Ширина столбца

В традиционной типографике большое внимание уделяется ширине колонки, по этой причине текст разбивают на колонки в газетах и журналах. Если строка слишком длинная, читать ее не удобно. Потому что приходится слишком далеко переводить взгляд от конца одной строки до начала следующей. Короткая строка тоже не хорошо. Оптимальная длина строки лежит в диапазоне 70-140 знаков;

6. Интерлиньяж (Leading)

Интерлиньяж (Leading) — расстояние между строками. Если оно маленькое, это отрицательно сказывается на читабельности. Слишком большой Leading тоже ничего хорошего не сулит. В общих случаях, вам скорее всего подойдет интерлиньяж на 2-4 пункта больше чем размер шрифта;

7. Общая структура страницы

В идеале должна на странице должна использоваться единая сетка. Таким образом можно добиться гармоничного вида всего сайта в целом. Старайтесь использовать общие правила и стили (которые вы придумали) на всем сайте;

8. Цвет и контраст

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

9. Белое пространство

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

——

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