От автора: вертикальный ритм (Vertical Rhythm) – важная концепция в веб-дизайне. Она способна собрать дизайн воедино и сделать элементы на странице единообразными. Раньше невозможно было менять в CSS Vertical Rhythm на разных размерах экрана, потому что у нас не было подходящих инструментов. Сейчас такая возможность есть, благодаря CSS calc и пользовательским свойствам. Статья объясняет, как это сделать.
Вычисление rhythm-единиц
Rhytm-единица – это базовый множитель, используемый для Vertical Rhythm на сайте. Значение rhytm-единицы должно равняться высоте строки обычного текста. Вот почему.
|
1 2 3 4 5 6 7 8 9 |
/* One rhythm unit would be 20px * 1.4 = 28px */ html { font-size: 20px; line-height: 1.4; } p { margin: 28px; } |
Вычислять rhytm-единицы легче, если использовать относительные единицы (нужно их использовать). Одна rhytm-единица всегда равна корневому размеру шрифта, умноженному на высоту строки основного текста.
|
1 2 3 4 5 6 7 8 |
/* 1 rhythm unit, calculated with rem */ html { line-height: 1.4; } p { margin: 1.4rem; } |
Не стесняйтесь менять количество rhytm-единц при создании пробелов. Можно даже включать нецелочисленные значения.
|
1 2 3 4 5 |
/* 2 rhythm units */ h2 { margin-top: 2.8rem} /* 0.75 rhythm units */ p { margin-top: 1.05rem } |
Зачем менять Vertical Rhythm на разных размерах экрана?
Как правило, большие устройства (десктоп) мы размещаем дальше от себя, а маленькие (смартфоны) – ближе. Чтобы компенсировать ухудшение читаемости из-за увеличенного расстояния, необходимо увеличить размер шрифта. Если пользователю неудобно читать ваш сайт, он уйдет, будет щурить глаза или увеличит размер шрифта браузера (если он достаточно умен).
Еще немного о читаемости.
Читаемость – один из важнейших элементов типографики. На нее влияет 3 фактора – размер шрифта, высота строки (leading) и длина строки (measure). Если меняется что-то одно, остальные тоже необходимо менять для сохранения читаемости.
При изменении размера окна браузера с мобильного вида на десктоп, изменятся measure и размер шрифта. Как результат, leading тоже должен измениться. Эта концепция так важна, что Ешь Brown придумал подход Molten leading. Один из примеров использования метода – запись высоты строки основного текста в вьюпорт единицах.
|
1 2 3 4 5 |
/* This is a simple example. See the complete example in the link above */ body { font-size: calc(1em + 1vw); line-height: calc(1.2em + 1vw); } |
Проблема в том, что при изменении высоты строки основного текста меняется единица Vertical Rhythm. Использовать Molten leading вместе с Vertical Rhythm невозможно.
Даже если отменить molten leading и использовать стандартную безразмерную высоту строки, вы сойдете с ума от повторений. Оно того не стоит.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* Change line height at different breakpoints */ html { line-height: 1.4; } @media (min-width: 600px) { html { line-height: 1.5; } } /* Calculate rhythm again at each breakpoint */ p { margin-top: 1.4rem; } @media (min-width: 600px) { p { line-height: 1.5rem; } } |
Изменение rhytm-единиц с помощью пользовательских свойств CSS
Пользовательские свойства CSS (или CSS переменные) можно использовать для создания rhytm-единиц, которые будут меняться на разных вьюпортах.
Чтобы создать CSS переменную, необходимо создать пользовательское свойство, добавив перед ним —.
|
1 2 3 |
:root { --color: red; } |
Использовать пользовательское свойство можно так var(—your-custom-property).
|
1 2 3 |
p { color: var(--color) } |
Преимущество CSS переменных в том, что их можно динамически обновлять в разных медиа запросах.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
:root { --color: red; } @media (min-width: 30em) { :root { --color: blue; } } p { color: var(--color) } |
То есть можно создать свойство –baseline, которое соответствует одной rhytm-единице. Используйте –baseline для создания адаптивного Vertical Rhythm.
|
1 2 3 4 5 6 7 8 9 10 11 |
:root { --baseline: 1.4; line-height: var(--baseline) } @media (min-width: 30em) { :root { /* a value of 3 used here to exaggerate the changes so you can see it in the demo below */ --baseline: 3; } } |
Для создания rhytm-значений необходимо использовать CSS calc (в CSS все вычисления проводятся через calc).
|
1 2 3 4 5 |
/* Two rhythm units */ h2 { margin-top: calc(var(--baseline) * 2rem); } /* 0.75 rhythm units */ p { margin-top: calc(var(--baseline) * 0.75rem); } |
Упрощаем вычисления с помощью функции
Довольно сложно постоянно при создании rhytm—значения писать calc и var. Можно упростить вычисления, написав функцию в препроцессоре типа Sass.
|
1 2 3 4 |
// rvr stands for responsive vertical rhythm @function rvr($multiple) { @return calc(var(--baseline) * $multiple * 1rem); } |
Затем можно использовать созданную функцию vr. Намного проще!
|
1 2 3 4 5 |
/* Two rhythm units */ h2 { margin-top: rvr(2); } /* 0.75 rhythm units */ p { margin-top: rvr(0.75); } |
Поддержка
У CSS Custom Properties и CSS Calc замечательная поддержка. Они поддерживаются во всех основных браузерах.
К сожалению, в Opera Mini вообще отсутствует поддержка CSS calc и пользовательских свойств (а также в менее известных браузерах QQ и Baidu). Облом.
Так как Opera Mini не поддерживает CSS Calc и CSS Custom properties, то необходимо обеспечить фолбек свойства при создании rhytm-единиц. Чуть больше работы, но терпимо.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
:root { --baseline: 1.4; /* Line-height fallback */ line-height: 1.4; line-height: calc(var(--baseline) * 1rem); } @media (min-width: 30em) { :root { --baseline: 1.5; } } p { /* Line-height basic vertical rhythm fallback. */ margin-top: 1.05rem; margin-top: rvr(0.75); } |
Для упрощения также можно создать функцию vr, которая будет вычислять Vertical rhythm на основе значения высоты строки. Ниже представлена простая версия (специально для примера). Более полную версию можно сделать в Typi – моя библиотека, которую я написал для упрощения адаптивной типографики.
|
1 2 3 |
@function vr($multiple) { @return 1.4 * $multiple * 1rem; } |
Если создать функцию vr, то rhytm фолбек будет проще:
|
1 2 3 4 5 |
p { /* Line-height basic vertical rhythm fallback. */ margin-top: vr(0.75); margin-top: rvr(0.75); } |
Заметка: я еще не включил адаптивный vertical rhythm в Type. Надеюсь сделать это, когда будет свободно время.
Заключение
Vertical Rhythm – важный принцип типографики, который мы, как дизайнеры и разработчики, должны учитывать. К сожалению, раньше мы не могли уделять ему достаточно внимания, потому что у нас не было подходящих инструментов.
Сейчас мы можем создать адаптивный vertical rhythm с помощью пользовательских свойств CSS и CSS calc. При создании адаптивного vertical rhythm обязательно используйте фолбек для браузеров без поддержки!
Автор: Zell
Источник: //zellwk.com/
Редакция: Команда webformyself.
