В начале 2012 года я поделился формулой для «Molten leading» (резиновый line-height).
Опытные типографы знают, что более длинным строкам в тексте нужно больше межстрочного интервала, а для коротких строк расстояние может быть плотным. Проблема заключается в том, что текст должен быть резиновым. Таким образом, наш межстрочный интервал должен быть гибким:
Некоторые люди, узнав о формуле, реализовали ее в JS (Mat Marquis, Jim Jeffers, Viljami Salminen), а в прошлом году Mike Riethmuller показал нам в своей статье как это сделать с помощью CSS, используя calc и viewport-единицы, но примечательно, что статья его была нацелена на шрифт. Это заставило меня задуматься. Эта формула что-то большее чем line-height или font-size. Эта формула — способ динамического расчета любого значения между двумя противоположностями, относительно другого набора значений — без зависимости от медиа-запросов.
В речном судоходстве понятие “lock” — это устройство, предназначенное для подъема и опускания судов между водными пространствами, которые находятся на различных уровнях (судоходный шлюз). Это именно то, что наша формула выполняет. Наша формула — это CSS “lock”.
Возьмем в качестве примера “molten leading“. Наши ворота — это минимальная и максимальная ширина параграфов, а уровень воды это наш line-height. Ниже находятся нижние ворота, наш статический line-height 1.3. Над верхними воротами статический line-height 1.5. Вся магия заключается между ними — так как ширина наших абзацев резиновая, наш line-height меняется динамически, поддерживая соответствующее значение. Вот результат на CodePen.
See the Pen ZpoaRL by Ruslan (@rkaliev) on CodePen.0
Вот так выглядит CSS “lock” в кодe:
line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));
Чтобы понять как работает эта формула внутри calc(), давайте разберем ее с конца:
1. Видите в последней части 35-21? Это дает нам полный диапазон ширины нашего параграфа. Получается 14, так как 14em это разница между шириной параграфа p.
2. Левее у нас 100vw–21em. Исходя из способа работы CSS Calc, это приведет к значению, основанному на em и даст нам числитель больше 14em. Так, например, давайте скажем, что ширина области просмотра (100vw) эквивалентна 34em. 34em–21em=13em. Обратите внимание, что viewport-единица на этом шаге наш секретный ингредиент. Тот факт, что значение может динамически меняться вместе с шириной окна браузера — это то, что делает значение line-height динамическим.
3. Таким образом, все выражение справа от знака умножения сводится к этому: 13em / 14em или 0.928571429 em. Мы близки к верхним воротам. Если значение близко к нулю, мы недалеко от нижних ворот. Если ближе к 1, мы недалеко от верхних ворот.
4. Двигаясь влево от знака умножения, мы вычисляем разницу между максимальным и минимальным line-height. 1.5–1.3 =0.2.
5. Теперь мы умножаем весь ряд нашего гибкого line-height (Шаг 4) по тому, как далеко мы продвинулись в сторону верхних ворот (Шаг 3): 0.2 * 0.928571429em =0.185714286em.
6. Добавьте это к минимальному line-height, и в конечном итоге мы с динамическим line-height: 1.3em + 0.185714286em =1.485714286em.
7. Поместив все это в ширину на основе медиа-запросов позволяет нам отключить его по умолчанию (используйте наш минимальный line-height 1.3), установите его когда окно просмотра станет шире нижних ворот, чем наши нижние ворота (используйте “lock” line-height выше 21em) и отключите его выше верхних ворот (используйте максимальный line-height 1. 5 выше 35em). Размер шрифта я установил 1.15 em. Можете посмотреть CSS стили на Codepan
Эта концепция CSS “lock” может быть полезной во многих случаях.
Рассмотрим идею Cyrus Highsmith’s текстового блока “tempo”. Не только line-height, но и letter-spacing, word-spacing и margin, все могут быть гибкими относительно ширины текстового блока, ослабляясь, чтобы замедлить темп и сжимаясь чтобы его ускорить.
CSS “lock” полезен не только в типографии. Используйте его там, где вам необходима гибкость. Термин CSS “lock” я использую для определенного вида расчета. Надеюсь, это облегчит общение и сделает эту концепцию более полезной.
Источник: blog.typekit.com
