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

Не заставляйте нас изменять размер шрифта

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

Не доказывайте нам, что переполненные страницы лучше выглядят

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

Не втирайте нам, что прокрутка страниц — это плохо

Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.

Не говорите нам, что текст не важен

95 % того, что обычно называют веб-дизайном, — это типографика.

Не требуйте, чтобы мы начали носить очки

Лучше вместо этого перестаньте тереться носом об экран, откиньтесь в кресле назад (!) и продолжайте чтение этой статьи в расслабленной позе.

Пять простых правил

1. Предустановленный браузером размер шрифта для длинных текстов

Размер шрифта текста, который вы сейчас читаете [имеется в виду, в оригинале — прим. Heath], — не большой. Это размер, который браузеры выставляют по умолчанию. При создании браузера предполагалось, что он будет показывать текст именно этого кегля.

У нас нет никакого желания нажимать на кнопки увеличения или уменьшения шрифта, мы не хотим менять наши установки и изменять своим предпочтениям [в оригинале использовано слово «preferences» — прим. Heath]. Мы просто хотим читать. Мы хотим, чтобы именно вы подстраивались под наши предпочтения, а не наоборот.

Изначально гораздо сложнее сделать хороший макет сайта с большим кеглем шрифта. Но эта сложность поможет вам сделать более простой, более доступный и более понятный сайт. Нафаршировать сайт информацией несложно, а вот сделать его простым и лёгким в использовании — сложно. Поначалу вы будете просто в шоке, насколько большой в браузерах предустановленный размер шрифта. Но через какое-то время вы просто не захотите читать текст меньше 100 % или 1 em. Поначалу он кажется большим, но как только вы привыкнете к нему, вы поймёте, почему браузеры используют именно такой кегль по умолчанию.

2. Побольше свободного пространства

Пусть ваш текст дышит. Использование свободного пространства — не идиотская причуда дизайнеров. Это и не вопрос вкуса.

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

Йозеф Мюллер-Брокманн, «Модульные системы»

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

Вопрос ширины колонки — это вопрос не только дизайна или выбора формата; вопрос удобочитаемости имеет не меньшее значение.

Йозеф Мюллер-Брокманн, «Модульные системы»

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

Основное правило — 10—15 слов на строку [в русском наборе эти цифры могут немного отличаться; считается, что полоса текста должна иметь ширину в пределах 45—75 знаков, считая пробелы — прим. Heath]. При резиновой вёрстке с размером шрифта 100 % стандартная рекомендация для большинства разрешений экрана — колонка шириной 50 % от ширины окна браузера.

3. Приятное глазу межстрочное расстояние

Вот что говорят специалисты по чтению.

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

Стандартный интерлиньяж слишком мал. Если вы увеличите межстрочное расстояние, текст будет читаться гораздо легче. Обычная рекомендация — интерлиньяж в 140 % от стандартного.

4. Ясный цветовой контраст

Об этом и упоминать-то не стоило бы. Но если вы до сих пор уверены, что следующие цветовые комбинации подходят для веб-страниц:

1. серый текст на светло-сером фоне,
2. текст цвета «Silver» на белом фоне,
3. серый текст на жёлтом фоне,
4. жёлтый текст на красном фоне,
5. зелёный текст на красном фоне, и так далее…

…то вы не веб-дизайнер, а дизайнер с понтами. Если вы веб-дизайнер, то вам не должно быть всё равно, что никто из вашей страницы ничего не узнает, потому что ничего не сможет прочитать. Хватит этой лабуды — покажите нам, что у вас там на сайте написано.

Учтите, что для чтения с экрана слишком высокий контраст тоже нехорош (#000 на фоне #fff, например), потому что текст начинает «моргать». #333 на фоне #fff будет в самый раз.

5. Никакого текста картинками

Мы хотим иметь возможность искать в тексте, копировать текст и сохранять его, выделять текст курсором мышки при чтении. Текст в виде картинки может выглядеть красиво, но визуальная красота в Сети — не главное. Главное — это взаимодействие и информация, а информация должна быть лёгкой для чтения, использования, масштабирования, цитирования и пересылки.

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