Большинство веб-сайтов нашпиговано мелким текстом, читать который — сплошное мучение. Для чего? Нет никаких причин для того, чтобы ужимать так много информации на один экран. Это — просто дурацкое коллективное заблуждение, восходящее к временам, когда экраны были очень, очень маленькими. Поэтому…
Мы не хотим постоянно менять настройки размера шрифта в браузере при посещении каждого нового сайта.
Сайты со страницами, под завязку набитыми информацией, не привлекательны визуально — они ужасны. Заполнение страниц всякой всячиной никогда не влияло на юзабилити положительно. Это просто лень-матушка заставляет вас вываливать на наши головы всю эту информацию. Мы хотим, чтобы вы подумали и заранее решили, что именно является наиболее важным. Мы не хотим делать вашу работу за вас.
Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.
95 % того, что обычно называют веб-дизайном, — это типографика.
Лучше вместо этого перестаньте тереться носом об экран, откиньтесь в кресле назад (!) и продолжайте чтение этой статьи в расслабленной позе.
Размер шрифта текста, который вы сейчас читаете [имеется в виду, в оригинале — прим. Heath], — не большой. Это размер, который браузеры выставляют по умолчанию. При создании браузера предполагалось, что он будет показывать текст именно этого кегля.
У нас нет никакого желания нажимать на кнопки увеличения или уменьшения шрифта, мы не хотим менять наши установки и изменять своим предпочтениям [в оригинале использовано слово «preferences» — прим. Heath]. Мы просто хотим читать. Мы хотим, чтобы именно вы подстраивались под наши предпочтения, а не наоборот.
Изначально гораздо сложнее сделать хороший макет сайта с большим кеглем шрифта. Но эта сложность поможет вам сделать более простой, более доступный и более понятный сайт. Нафаршировать сайт информацией несложно, а вот сделать его простым и лёгким в использовании — сложно. Поначалу вы будете просто в шоке, насколько большой в браузерах предустановленный размер шрифта. Но через какое-то время вы просто не захотите читать текст меньше 100 % или 1 em. Поначалу он кажется большим, но как только вы привыкнете к нему, вы поймёте, почему браузеры используют именно такой кегль по умолчанию.
Пусть ваш текст дышит. Использование свободного пространства — не идиотская причуда дизайнеров. Это и не вопрос вкуса.
Основное правило — 10—15 слов на строку [в русском наборе эти цифры могут немного отличаться; считается, что полоса текста должна иметь ширину в пределах 45—75 знаков, считая пробелы — прим. Heath]. При резиновой вёрстке с размером шрифта 100 % стандартная рекомендация для большинства разрешений экрана — колонка шириной 50 % от ширины окна браузера.
Вот что говорят специалисты по чтению.
Об этом и упоминать-то не стоило бы. Но если вы до сих пор уверены, что следующие цветовые комбинации подходят для веб-страниц:
Учтите, что для чтения с экрана слишком высокий контраст тоже нехорош (#000 на фоне #fff, например), потому что текст начинает «моргать». #333 на фоне #fff будет в самый раз.
Мы хотим иметь возможность искать в тексте, копировать текст и сохранять его, выделять текст курсором мышки при чтении. Текст в виде картинки может выглядеть красиво, но визуальная красота в Сети — не главное. Главное — это взаимодействие и информация, а информация должна быть лёгкой для чтения, использования, масштабирования, цитирования и пересылки.
Если вам не удаётся сделать дизайн сайта приличным без текста в картинках, я боюсь, вам придётся начать с чистого листа.
Не заставляйте нас изменять размер шрифта
Мы не хотим постоянно менять настройки размера шрифта в браузере при посещении каждого нового сайта.
Не доказывайте нам, что переполненные страницы лучше выглядят
Сайты со страницами, под завязку набитыми информацией, не привлекательны визуально — они ужасны. Заполнение страниц всякой всячиной никогда не влияло на юзабилити положительно. Это просто лень-матушка заставляет вас вываливать на наши головы всю эту информацию. Мы хотим, чтобы вы подумали и заранее решили, что именно является наиболее важным. Мы не хотим делать вашу работу за вас.
Не втирайте нам, что прокрутка страниц — это плохо
Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.
Не говорите нам, что текст не важен
95 % того, что обычно называют веб-дизайном, — это типографика.
Не требуйте, чтобы мы начали носить очки
Лучше вместо этого перестаньте тереться носом об экран, откиньтесь в кресле назад (!) и продолжайте чтение этой статьи в расслабленной позе.
Пять простых правил
1. Предустановленный браузером размер шрифта для длинных текстов
Размер шрифта текста, который вы сейчас читаете [имеется в виду, в оригинале — прим. Heath], — не большой. Это размер, который браузеры выставляют по умолчанию. При создании браузера предполагалось, что он будет показывать текст именно этого кегля.
У нас нет никакого желания нажимать на кнопки увеличения или уменьшения шрифта, мы не хотим менять наши установки и изменять своим предпочтениям [в оригинале использовано слово «preferences» — прим. Heath]. Мы просто хотим читать. Мы хотим, чтобы именно вы подстраивались под наши предпочтения, а не наоборот.
Изначально гораздо сложнее сделать хороший макет сайта с большим кеглем шрифта. Но эта сложность поможет вам сделать более простой, более доступный и более понятный сайт. Нафаршировать сайт информацией несложно, а вот сделать его простым и лёгким в использовании — сложно. Поначалу вы будете просто в шоке, насколько большой в браузерах предустановленный размер шрифта. Но через какое-то время вы просто не захотите читать текст меньше 100 % или 1 em. Поначалу он кажется большим, но как только вы привыкнете к нему, вы поймёте, почему браузеры используют именно такой кегль по умолчанию.
2. Побольше свободного пространства
Пусть ваш текст дышит. Использование свободного пространства — не идиотская причуда дизайнеров. Это и не вопрос вкуса.
Ширина полосы набора должна быть пропорциональна кеглю шрифта. Слишком широкие строки утомительны для глаз и вызывают неблагоприятный психологический эффект. Слишком узкая колонка также раздражает, потому что нарушает непрерывность чтения. Излишне частое движение глаз для смены строки отталкивает читателя от чтения.Наличие воздуха вокруг текста снижает напряжение, благодаря чему становится гораздо легче сконцентрироваться на сути текста. Не нужно пытаться заполнить окно браузера целиком. То, что пустое пространство выглядит лучше, — не побочный эффект, а логическое следствие функционального дизайна. Кто сказал, что веб-страницы должны быть забиты всяким барахлом?
Йозеф Мюллер-Брокманн, «Модульные системы»
Вопрос ширины колонки — это вопрос не только дизайна или выбора формата; вопрос удобочитаемости имеет не меньшее значение.Пожалуйста, убедитесь, что ширина строки не слишком большая, а также что вы оставили достаточно пустого места слева и справа от колонки текста. Это поможет глазам легче перепрыгивать конца одной строки к началу другой. Мы не хотим настраивать ни кегль шрифта, ни размер окна браузера. Когда мы открываем веб-страницу, мы хотим просто начать читать. Полоса текста с масштабируемой шириной — это прекрасно; бесконечные строки текста от левого края экрана до правого — не очень.
Йозеф Мюллер-Брокманн, «Модульные системы»
Основное правило — 10—15 слов на строку [в русском наборе эти цифры могут немного отличаться; считается, что полоса текста должна иметь ширину в пределах 45—75 знаков, считая пробелы — прим. Heath]. При резиновой вёрстке с размером шрифта 100 % стандартная рекомендация для большинства разрешений экрана — колонка шириной 50 % от ширины окна браузера.
3. Приятное глазу межстрочное расстояние
Вот что говорят специалисты по чтению.
Плотно стиснутые по вертикали строки уменьшают скорость чтения, поскольку верхняя и нижняя строка схватываются глазом одновременно. Глазу не удаётся сфокусироваться на отдельной строке, читатель тратит энергию там, где этого делать не должен, вследствие чего быстрее устаёт. Это же относится и к случаям, когда интерлиньяж слишком велик.Стандартный интерлиньяж слишком мал. Если вы увеличите межстрочное расстояние, текст будет читаться гораздо легче. Обычная рекомендация — интерлиньяж в 140 % от стандартного.
4. Ясный цветовой контраст
Об этом и упоминать-то не стоило бы. Но если вы до сих пор уверены, что следующие цветовые комбинации подходят для веб-страниц:
- серый текст на светло-сером фоне,
- текст цвета «Silver» на белом фоне,
- серый текст на жёлтом фоне,
- жёлтый текст на красном фоне,
- зелёный текст на красном фоне, и так далее…
Учтите, что для чтения с экрана слишком высокий контраст тоже нехорош (#000 на фоне #fff, например), потому что текст начинает «моргать». #333 на фоне #fff будет в самый раз.
5. Никакого текста картинками
Мы хотим иметь возможность искать в тексте, копировать текст и сохранять его, выделять текст курсором мышки при чтении. Текст в виде картинки может выглядеть красиво, но визуальная красота в Сети — не главное. Главное — это взаимодействие и информация, а информация должна быть лёгкой для чтения, использования, масштабирования, цитирования и пересылки.
Если вам не удаётся сделать дизайн сайта приличным без текста в картинках, я боюсь, вам придётся начать с чистого листа.