Расстояние между строками называется интерлиньяжем. Красивым французским словом interligne — «написанное между строк«, междустрочие.

По-английски «расстояние между строками» звучит как line spacing (line — линия, строка; space — расстояние, космос :) ) или более древне lead, leading.

Так называемый, подвижный шрифт. Попробуйте прочитать что написано?

Вообще, lead — это свинец. И такое совпадение не случайно. В средневековье… (как щас помню :) ) текст собирался из выпуклых свинцовых литер (от латинского littera — буква), изготовленных, естественно, в зеркальном отражении (рисунок выше). «Собиратель» хоть и вставлял буквы слева направо, но зато верх ногами и снизу вверх (а вам слабо? :) ). Буквы собирались в строки на металлической штуке, называемой наборной версткой (composing stick), затем верстки скреплялись вместе и образовывали прототип страницы — печатную форму (forme), которая в свою очередь прикреплялась к печатной доске (galley) на печатном станке, смазывалась чернилами, и, наконец, все это отпечатывалось на бумаге. Ну, не все… только буквы.

Так вот. Для того, чтобы увеличить интерлиньяж, между строками вставляли шпоны — тонкие пластинки свинца, толщиной в 2 пункта по системе Дидо (в этой системе 1 пункт = 0,376 мм, т.е., получается, шпон был толщиной меньше одного миллиметра).

Однако не думайте, что без шпонов строки прилипали друг к другу. В каждую букву снизу уже было заложено небольшое пространство — верхний заплечник (shoulder, видимо, верхним его назвали, потому что вставляли в перевернутом состоянии…). И размер буквы (или кегль) — да, да, как раз то количество пунктов (pt = points) или пикселей (px = pixels), к которым мы так привыкли в Word’е (например, Times New Roman 14pt) — считался вместе с ним.

То есть размер шрифта (point size) — это не «рост» самой буквы «х» (такой «рост» в типографике называется x-height = икс-высота), а еще и плечо снизу и расстояние сверху.

Выражаясь типографически, интерлиньяж — это вертикальное расстояние между базовыми линиями двух соседних строк. Заметьте, это не пробел между строками, это СУММА высоты строки И следующего внизу пробела. Именно поэтому, когда интерлиньяж измеряют множителем, например, 1,8, это означает, что сам пробел между строками будет 0,8 от высоты шрифта. Если вы поставите интерлиньяж = 0,8, то строки у вас будут заезжать друг на друга, так как высота строки будет меньше, чем высота шрифта. Это же произойдет и в том случае, если вы выставите интерлиньяж = 9 пунктов, при размере шрифта 12.

Итак, теперь о главном. Чтобы изменить расстояние между строками в HTML, вам не нужно забивать шпоны. Вам нужно всего лишь к объекту, в котором вы хотите это расстояние отрегулировать, например, к абзацу текста (тег <p></p>) или к блочному элементу (<div></div>), применить CSS-свойство line-height. Свойство может применяться ко всем тегам HTML.

Значение у line-height можно задавать в процентах, множителем, единицами измерения (пиксели (px), пункты (pt), пайки (pc) и т.д.), а также оно может принимать значение normal и inherit.

При normal расстояние между строками вычисляется браузером автоматически по своим соображениям, при inherit — наследуется значение родительского элемента, т.е. тега, в который данный тег вложен.

Черкнем несколько строк на HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height</title>
<style>
h1 {
ine-height: 70%;
}
p {
line-height: 1;
}
</style>
</head>
<body>
<div>
<h1>Заголовок</h1>
<p>Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать.</p>
</div>
</body>
</html>

Вот так выглядит в браузере расстояние между строками в абзаце со значением 1 (т.е. одинарный интерлиньяж) и 70% у заголовка (заметьте что при расчете в % за 100% берется высота шрифта):

Расстояние между строками (line-height), равное 1

Если мы зададим line-height для тега <div>, окутывающего и заголовок, и абзац, а у них, соответственно, это свойство уберем, то получится:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height</title>
<style>

div {
line-height: 1.5;
}

</style>
</head>
<body>
<div>
<h1>Заголовок</h1>
<p>Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать.</p>
</div>
</body>
</html>

Полуторный интерлиньяж для всего блока div

Если мы поставим line-height = 0.4, получится экспонат отрицательного интерлиньяжа:

Интерлиньяж у div = 0.4

Зачем же вообще с расстоянием между строками что-то делают? Из-за вредности? От нечего делать?

Отнюдь.

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