В этом видео мы научимся устанавливать высоту строки,
расстояние между буквами и словами, а также разберем нюансы их использования.
Поехали.
Высота строки устанавливается свойством 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,
что раздвинуло слова по отношению друг к другу.
Подводя итог.
В прошлом видео мы научились устанавливать размер шрифта.
В этом — управлять высотой строки и расстояние между буквами и словами.
И это все, что хотелось бы рассказать об управлении размерами в контексте шрифтов.
В следующем видео мы разберемся,
как управлять начертанием и плотностью шрифтов.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
