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

Типографика для веб сайта – достаточно важный элемент дизайна, который в рунете выражен как-то не очень сильно. Данный вопрос чаще поднимается на англоязычных зарубежных дизайнерских блогах, у нас внимание ему практически не уделяется. Нет, конечно при создании макета большинство дизайнеров думает о типографике сайта – шрифтах, оформлении, но уж очень  скромно и мало. Потому, наверное, в рунете можно по пальцам посчитать количество проектов с яркой креативной и нестандартной типографикой, больше стандартного унылого “серого” дизайна:( Возможно, именно по этому Дмитрий Наумов решил поделиться интересным гостевым постом о типографике.  Дима по совместительству, кстати, является автором весьма полезного проекта Converlab – “Дизайн. Юзабилити. Конверсия.” Итак, 9 советов по типографике веб сайта:

 

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

 

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

 

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

 

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

 

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

 

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

 

4. Акцент

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

Источник