В этом видео мы научимся устанавливать высоту строки, расстояние между буквами и словами, а также разберем нюансы их использования. Поехали. Высота строки устанавливается свойством line height двумя типами значений: единицами измерения длины или множителем. В чем же разница? Возьмем CSS-код, у тега body мы устанавливаем размер шрифта 20 пикселей, а также возьмем три класса, у каждого из которых высота строки установлена в множитель 1,5; 1,5em и 30px. Имеем такую верстку: три div, в каждом из которых по параграфу, и у каждого div один из вышеописанных классов. Имеем такой результат: у первого параграфа высота строки множителем 20 * 1,5 = 30, потому что у тега body размер шрифта 20px. У следующего: 1,5em * 20 — также 30px. Ну и у третьего параграфа 30px = 30px. Разницы, как вы видите, никакой. Ну что если мы захотим изменить размер шрифта конкретно у параграфов? Возьмем тот же самый CSS, ту же самую верстку, но для параграфов установим размер шрифта в 30px. Получим результат, отличный от предыдущего. Почему так? Давайте разберемся. У первого параграфа, как мы видим, высота строки больше, чем у остальных. Потому что множитель взял размер шрифта параграфа, а не тега body. Это очень важный нюанс. В итоге мы получаем высоту строки 45px. У второго параграфа, естественно, 20px от body * 1,5 = 30. Ну и у третьего параграфа, как это не удивительно, 30px так и осталось. В этом вся разница. Я вам советую использовать всегда проценты, в отличие от или px, так как они более настраиваемые. Перейдем к следующему свойству, которое устанавливает расстояние между буквами, это свойство letter-spacing. Устанавливать значение можно в любой единице измерения длины, кроме процентов. Имеем такой CSS-код: три параграфа, три класса. У первого letter-spacing — normal, это значение по умолчанию. У второго letter-spacing — −2,5px. А у третьего letter-spacing — 1em. Следует заметить, что отрицательные значения также можно устанавливать. В результате имеем вот такую вот верстку. letter-spacing normal у первого параграфа ничего не поменял. У второго letter-spacing — −2,5px, что как бы склеило буквы друг к другу. И letter-spacing 1em, наоборот, растянуло расстояние между буквами, и мы получаем вот такой результат. Аналогичным свойству letter-spacing является свойство word-spacing, которое устанавливает расстояние между словами. Также можете использовать значение в любой единице измерения длины, кроме процентов. Берем так же первый параграф и устанавливаем word-spacing normal, что является значением по умолчанию. Второму параграфу word-spacing — −10px, здесь, кстати, также можно использовать отрицательные значения единиц измерения длины. И у третьего параграфа устанавливаем word-spacing в 1em. И получаем следующий результат. Первый параграф — normal. Второй параграф — −10px, что как бы склеило слова, а не буквы, как было с прошлым свойством. И третий параграф имеет word-spacing 1em, что раздвинуло слова по отношению друг к другу. Подводя итог. В прошлом видео мы научились устанавливать размер шрифта. В этом — управлять высотой строки и расстояние между буквами и словами. И это все, что хотелось бы рассказать об управлении размерами в контексте шрифтов. В следующем видео мы разберемся, как управлять начертанием и плотностью шрифтов.
