8 простых способов улучшить типографию на вашем сайте

link

Статья от 02.06.09 в категории CSS
Теги: CSS, html, дизайн, типография

Тут собраны 8 простых способов, которые вы можете использовать для улучшения типографии и, следовательно, сделать ваш дизайн удобней для пользователя.Многим дизайнерам кажется, что типография состоит только в выборе шрифта, размера и толщины. Но это далеко не всё. Есть множество деталей, облегчающих чтение, которыми дизайнеры зачастую пренебрегают.

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