Шаг 1. Размер в пикселях

Как правило размер шрифта в 16px оказывается слишком большим. Установим размер шрифта в основном тексте в 14px, а в боковой панели – 12px.

.content p {
    font-size:14px;
}
.rightbar {
    font-size:12px;
}

Заметим что в IE6 нет никакой возможности увеличить размер шрифта, заданный в пикселях, поэтому зададим его в EM.

Шаг 2. Размер в EM’ах.

ЕM – рекомендованная W3C типографическая единица CSS. Зададим размер шрифта, аналогично тому, который мы задавали в первом шаге.

.content p {
    font-size:0.875em; /* 16x.875=14 */
}
.rightbar {
    font-size:0.75em; /* 16x0.75=12 */
}

Установка базового размера шрифта

Для чего это нужно? IE6 и IE7 при масштабировании страницы слишком сильно увеличивают текст, для исправления этого бага используем font-size: 100% в body:

body {
    font-size:100%;
}
.content p {
    font-size:0.875em; 
}
.rightbar {
    font-size:0.75em; 
}

Теперь всё отлично.

Высота строк текста

Чтобы текст смотрелся ещё лучше установим правильные высоты строк, т.е. межстрочное расстояние. При шрифте размером в 16px, по всем нормам типографики, высота текста должна быть около 18px. В EM это 1.125em (16×1.125=18).

body {
    font-size:100%;
    line-height:1.125em;
}
.content p {
    font-size:0.875em; 
}
.rightbar {
    font-size:0.75em; 
}

Все расчеты можно делать с помощью отличного инструмента.

1. Ширина

Длина строки текста очень важна. Очень утомительно читать слишком длинные, либо слишком короткие строки. В длинных строках трудно найти следующую, а короткие могут быть использованы только для небольших текстов. Оптимальной считается строка в 40-80 символов, включая пробелы. (Для русского языка идеальной считается строка в два алфавита, т.е. около 65 символов.)

Самым простым способом расчета ширины блока текста является метод Роберта Брингурста. <ширина текста> = <размер шрифта> *30. Т.е. если размер шрифта 10px, ширина блока будет 300px.

p {
     font-size: 10px;
     max-width: 300px;
 }

2. Межстрочное пространство

Межстрочное пространство играет большую роль для читабельности текста. Правильное разделение строк позволяет пользователю проще следить за строкой и улучшает внешний вид текста.

На межстрочное пространство влияет множество факторов: гарнитура, полнота, размер шрифта, длина строки, расстояние между словами и др. Чем длиннее строка, тем больше пространство. Чем больше размер шрифта, тем оно меньше. Правило – устанавливать межстрочное пространство на 2-5 пунктов больше, чем размер шрифта, в зависимости от гарнитуры.

Пример кода:

body { 
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 16px;
 }

3. Кавычки

Кавычки должны располагаться на полях текста, иначе они будут сливаться с текстом, тем самым разрывая левое поле и нарушая баланс текста.

Пример CSS:

blockquote { 
 text-indent: -0.8em;
 font-size: 12px;
 }

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм

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

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное пространство было равено размеру сетки базовых линий.

Пример:

body {
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 15px;
 }
p {
 margin-bottom: 15px;
 }

Это позволяет каждому параграфу располагаться на сетке, сохраняя вертикальный ритм текста.

5. Висячие строки

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

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение текста

Важно выделять слова не отвлекая читателя. Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.

Примеры:

span {
 font-style: italic;
 }
  h1 {
 font-weight: bold; 
 }
 h2 {
 text-transform: uppercase;
 }
 b {
 font-variant: small-caps;
 }

Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб

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

Пример типографического масштаба определенного в CSS:

h1 { font-size: 48px; }
h2 { font-size: 36px; }  
h3 { font-size: 24px; }  
h4 { font-size: 21px; }  
h5 { font-size: 18px; }  
h6 { font-size: 16px; }  
p { font-size: 14px; }

8. Рваные края

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

Источник: smashingmagazine.com