2.1.1 Определить пробел в соответствии с размерами шрифта

Если текст выровнен по правому краю, то пробелы (расстояния между словами) могут быть фиксированными и неизменными.

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

В CSS установлено собственное расстояние между словами, значение которого по умолчанию является нормальным. Пробел по умолчанию эквивалентен приблизительно 0,25 ем, хотя точное значение будет зависеть от информации, закодированной в цифровой файл шрифта. Для того чтобы изменить пробел , Вы должны специфицировать длину ems. Эта длина суммируется с уже существующей длинной пробела; то есть пробел не устанавливает фактическое расстояние между словами, он прибавляется к уже существующему пробелу. Например:

p {
  word-spacing:0.25em
  }
h1 { 
  word-spacing:-0.125em
  }

В предшествующем примере пробел увеличивается на 0,25 ем (по сути дублируется), а пробел в топ-уровне заголовков снизился на 0,125 еm (фактически наполовину меньше). Тогда как теоретически Вы можете специфицировать пробел в пикселях или какой-либо другой мере измерения длины, важно специфицировать пробелы именно в ems потому, как это единственный возможный вариант, который гарантирует, что пробел между словами будет меняться пропорционально размеру текста (когда читатель меняет размер текста по умолчанию, например).

Толкование ems

Ems имеет такое название поскольку оно предполагает приблизительный размер прописной буквы ‘m’ (соответственно и произношение ‘emm’), однако 1 em на самом деле существенно больше. Брингхурст описывает em таким образом:

Em – это скользящая мера. 1 em это расстояние эквивалентное размеру шрифта. В 6 кеглях em имеет значение в 6 пикселей, в 12 кеглях — em = 12 пикселей, в 60 — em = 60 пикселям. Таким образом один em пробел будет пропорционален в любом размере.

Чтобы проиллюстрировать эти принципы в рамках CSS , рассмотрим эти стили:

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

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

эти стили будут показаны как:

M

M

Обратите внимание на то, что оба бокса имеют одинаковую высоту и ширину — 1 em, но из-за того, что у них разный размер шрифта, один бокс больше другого. Размер шрифта первого бокса — 12 пикселей, соответственно высота и ширина тоже равна 12 пикселям; по такому же принципу установленный размер шрифта второго бокса — 60 пикселей, соответственно высота и ширина его равна 60 пикселям.