Метрики текста для сайта
Важно не только каким шрифтом набрать текст на странице. Не менее, а порой даже и более, важными вопросами являются:
Кегль основного текста и кегль в заголовках
Ширина строки
Межстрочный интервал
Выключка
Все это также влияет на оптическую читабельность страницы, а значит, правильный выбор этих параметров повысит вероятность того, что пользователь прочтет написанное на вашей странице и останется довольным.
Кегль
Размер шрифта по-умолчанию практически во всех современных браузерах — 16 px. Обратите
внимание именно px, а не pt! Вообще, когда собираетесь создавать дизайн сайта, лучше сразу настройте графический редактор так, чтобы у вас все измерялось только в px, даже текст.
Эти стандартные 16px выбраны не случайно. Они лучше всего соответствуют удобочитаемости и не стоит пренебрегать этим. 16px лучше всего сразу принять за 100% и дальше размеры всех текстовых элементов задавать не абсолютно, а относительно, т.е, если нам нужно сделать кегль какого-то элемента в 20px, то мы укажем его размер
в 125%. Тем самым создавая пропорциональность всей страницы, т.е. если пользователь сайта увеличит размер шрифта в настройках браузера, то пересчитается вся страница.
Настройка параметров шрифта в Google Chrome и в Mozilla Firefox.
Соотношение между px и pt
Как известно, px (пиксель) — это относительная единица измерения. Размер пикселя зависит от экрана устройства. Так чему же равен размер пикселя? Это регулируется разрешением (resolution), которое измеряется, как известно из предыдущих семестров в dpi (dots per inch), т.е. точках (пикселях!) на дюйм.
Также, уверен, вам известно, что для печати, изображение должно быть не менее 300 dpi, а для экрана достаточно и 72 dpi. Какое разрешение использует браузер? Это зависит от операционной системы. К примеру, Windows использует разрешение в 96 dpi.
Мы можем посчитать соотношение между пунктом (pt) и пикселем (px) по такой формуле. В одном дюйме 96 пикселей и 72 пункта, поскольку пункт — это и есть 1/72 дюйма. Таким образом, получается, что 1pt = 1,333 px.
Выбор гарнитуры (шрифта) для сайта Урок 3 Веб-типографика 
Юзабилити и эргономика веб-страниц
Ну ладно, это знать дизайнеру, конечно |
странице в 13px. Сегодня, как можно заметить, |
же полезно, но не критично, поскольку это, |
это — уже 16px и более. Таким образом, мак- |
по-большей части, проблема верстальщика. |
симальное соотношение размера основного |
Поэтому разберемся с соотношением размера |
текста и текста в заголовке составляло 29 / 13 |
основного текста и размера текста заголовков. |
≈ 2,2. Если спроецировать это на нынешние |
Известный журнал http://smashingmaga |
реалии, то мы получим примерно 35px. Это |
zine.com провел довольно серьезное исследо- |
— справедливо. |
вание этого вопроса. Хоть оно и датировано |
С другой стороны, заголовки бывают раз- |
2009 годом, определенные выводы все же ак- |
ными. Мы знаем 6 уровней заголовков. Думаю, |
туальны и по сей день. |
что справедливой будет следующая законо- |
Итак, в этом исследовании был поставлен |
мерность: |
вопрос: Какой средний размер шрифта для |
|
заголовка страницы? (What is the average Font |
|
Size For Headlines?). Для ответа на этот вопрос |
|
было проведено изучение 50 наиболее попу- |
|
лярных сайтов. Конечно же, американских, но |
|
это сути не меняет. Результаты представлены |
|
на диаграмме. |
|
Не надо иметь глубоких познаний в ан- |
|
глийском языке, чтобы увидеть, что наиболее |
|
популярными являются размеры от 20 до 29 |
|
px. Придется это скорректировать. В послед- |
|
ние несколько лет проявились тенденции к |
|
общему увеличению размеров текста на стра- |
|
ницах. В этом же исследовании указано, что |
|
наиболее часто встречается размер текста на |
|
Выбор гарнитуры (шрифта) для сайта Урок 3 Веб-типографика 
Юзабилити и эргономика веб-страниц
body { font-size: 16px; } h2 { font-size: 220%; } h3 { font-size: 180%; } h4 { font-size: 140%; } h5 { font-size: 120%; } h6 { font-size: 110%; }
Куда делся h1? Заголовок первого уровня, как правило, это особая сущность. Это — название всего сайта. Частенько он либо выступает в виде логотипа, т.е. просто изображения, либо, будучи, текстовым, все равно выбивается из общей схемы, имея собственный шрифт и собственный кегль. Т.е. в качестве заголовка страницы работают элементы от h2 и ниже.
Ширина строки
Обратимся все к тому же исследованию от http://smashingmagazine.com. Здесь исследуется вопрос: Каково количество символов в строке? (How many characters per line?). Снова график.
Получаем значение в районе 82 — 84 символа. При кегле в 16px мы получаем примерно 500px. Эти значения стоит принять как оптимальные для определения ширины колонки
при проектировании какого-то текстового ресурса, т.е. где нужно много читать.
Кстати сразу же стоит подумать и об обратном факторе, т.е. минимальной ширине колонки. Вряд ли удобно читать слишком узкие колонки, где буквально по одному слову на строке. В книге The Elements of Typographic Style, Роберт Брингаст большое внимание уделяет значению в 45 и 75 символов. Вот эти 45 символов и есть нижним пределом.
Межстрочный интервал
Межстрочный интервал определяется значением свойства line-height — высота строки, которое равно кеглю плюс межстрочный ин-
Выбор гарнитуры (шрифта) для сайта Урок 3 Веб-типографика 
Юзабилити и эргономика веб-страниц
тервал. Его можно задавать в любых единицах измерения, но удобнее всего в относительных единицах, т.е. em. В этом случае, высота строки будет рассчитываться от кегля.
Все тот http://smashingmagazine.com снова может предоставить нам данные. На вопрос: Какова оптимальная высота строки основного текста? (Optimal Line Height For Body Copy?) получены следующие ответы:
выключкой. Самый распространенный вариант — это left. Каждая строка начинается слева, но длины строк разные, и справа образуется рваный эффект.
Возможно, вам нравится выравнивание текста по ширине (justify), но тут есть проблема. Она заключается в интервалах между символами. В печати используется перенос (hyphenation), если слова не влезают на одну строку. Это приводит к тому, что в строке
Отношение высоты строки к кеглю ≈ 1,5 появляется больше компонентов (слова и ча-
Отношение высоты строки к её длине, т.е. сти слов), что в свою очередь оптимизирует
колонке получено около 27
Наиболее ценным является первое соотношение. Поэтому очень правильным будет задать line-height как 1,5em для всей страницы сразу, а потом варьировать локально при необходимости. Заметьте, что в печатном тексте, высота строки часто несколько меньше, чем в электронном тексте.
Выключка
У нас есть свойство CSS text-align, которое может принимать следующие значения: left, right, center, justify. Это и есть управление
насыщенность строки словами и уменьшает межбуквенный интервал. В браузере такой роскоши, как автоматический перенос слова, нет. Да, можно, в принципе, и в ручную расставить переносы с помощью псевдосимвола , но представьте себе объем работы в этом случае и вообще, возможно ли это для онлайновых изданий, которые обновляют новости в реальном времени?!
Таким образом, если в печати желательно иметь колонку с аккуратными краями, то для веба предпочтительным является использование левого выравнивания.
Выбор гарнитуры (шрифта) для сайта Урок 3 Веб-типографика 
Юзабилити и эргономика веб-страниц
Цвет текста
Вроде бы цвет на сайте мы обсудили в прошлый раз, но тут речь пойдет немного о другом. Напомню, что цветовая схема сайта призвана создавать определенный эмоциональный фон. Цвет текста нас интересует прежде всего в прикладном плане. Он должен обеспечивать достаточный контраст при чтении.
Лучший контраст — это, несомненно, белый и черный, но, если нужно все таки чтото пооригинальнее, то можно использовать и другие сочетания. Для экранного текста слишком сильный контраст (черный и белый) не всегда лучшее решение, потому что текст начинает мерцать. Попробуйте #333 на #fff.
Простой способ проверить достаточность контраста в макете — это убрать насыщенность вплоть до градаций серого. Если и в таком виде текст будет читабелен при масштабе в натуральную величину, то, скорее всего, и с цветом будет все нормально.
Избегайте таких сочетаний:
светло серый текст на легком сером фоне или белом фоне
серый текст на желтом фоне
желтый текст на красном фоне
зеленый текст на красном фоне и тому подобное…
Есть онлайн инструмент, который определяет контрастность цветовой схемы для текста.
Выбор гарнитуры (шрифта) для сайта Урок 3 Веб-типографика 
Юзабилити и эргономика веб-страниц