2.1.1 Устанавливайте межсловные пробелы в соответсвии с кеглем и естесвенным ритмом шрифтовых апрошей

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

В css это свойство задается через свойство word-spacing со значением normal. Пробел по-умолчанию равен 0,25 em, хотя более точно значение зависит от информации закодированной в файле шрифта.

Чтобы изменить расстояние между словами соответственно необходимо изменять значение в em. Эта длинна будет добавлена к существующему расстоянию или отрезана – значение установленное по умолчанию не обнуляется.

P { word-spacing:0.25em } H1 { word-spacing:-0.125em }

В примере мы удваиваем этот параметр для абзацев и урезаем в два раза для заголовков первого уровня.

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

В чем соль em?
Em так называют потомучто это является приблизительным размером заглавной буквы «М» и произносится как emm.

Хотя em значительно больше этой буквы.

Роберт Брингхерст описывает ее следующим образом:
«Em относительная величина. Один em равен размеру шрифта. Для 6-ти пунктового шрифта – это 6, для 12-ти пунктового шрифта – это 12. Таким образом em пропорциональная другим размерам»

Пример:

#box1 {
font-size:12px;
width:1em;
height:1em;
border:1px solid black }
#box2 {
font-size:60px;
width:1em;
height:1em;
border:1px solid black }

Обратите внимание, что обе коробки имеют ширину и высоту 1em. Первая вставка имеет размер 12 пунктов и размер коробки 12 пикселей во второй вставке размер 60 и соответственно размер коробки 60 пикселей.

              html/css, типографика