Поскольку веб-шрифты выросли (по количеству, качеству и простоте использования), веб-типография стала необходимой частью веб-дизайна. Веб-типографика — сложная тема, включающая множество мелких аспектов, таких как сопряжение шрифтов, производительность, FOUT, лигатуры и шкалы типов.
Когда вы делаете типографский выбор при создании веб-сайтов, важно помнить о адаптивном дизайне. Огорчает чтение страницы на телефоне с огромными заголовками размером с рабочий стол; также скучно видеть все размеры шрифтов на сайте, размещенном между 14px и 20px на широкоэкранном мониторе. Эти проблемы помогли мне определить адаптивную веб-типографику с помощью трех компонентов:
- Базовый размер шрифта, который изменяется в точках останова
- Вертикальный ритм, который изменяется в точках останова
- Согласованные типовые шкалы, которые изменяются в точках останова
Эти три вещи являются важной частью обычной веб-типографики: их настройка в заданной точке останова дает нам возможность адаптировать типографику к области просмотра пользователя.
Организация данных с помощью Sass Maps
Если вы никогда раньше не использовали карту в Sass, эта статья станет отличным введением. В Sass карты — это массивы данных. Вы можете вложить карты для подробной, многослойной организации данных. Давайте посмотрим на карту, на которой мы можем основать адаптивную типографику:
$rwd-typography: ( default: ( base-font-size: 16px, vertical-rhythm: 1.414, type-scale: 1.2, min-width: null ), medium: ( base-font-size: 18px, vertical-rhythm: 1.5, type-scale: 1.414, min-width: 480px ), large: ( base-font-size: 20px, vertical-rhythm: 1.618, type-scale: 1.5, min-width: 960px ), xlarge: ( base-font-size: 24px, vertical-rhythm: 1.618, type-scale: 1.618, min-width: 1300px ) ); Эта карта содержит три типографские детали, которые нам нужны для адаптивной типографии, распределенной по четырем точкам останова. Он также имеет измерение минимальной ширины для медиа-запроса, используемого в каждой точке останова. Примечание: значение медиа-запроса может быть любым, что нужно вашему проекту. В конце концов, точки останова должны определяться содержимым, а не настройками по умолчанию!
Значение base-font-size в каждой вложенной карте устанавливает нормальный размер шрифта для основного текста. Значение vertical rhythm задает высоту строки для обычного основного текста и используется для создания вертикального ритма для заголовков и других элементов, не относящихся к <p> . Значение type-scale определяет, насколько большим становится каждый шаг вверх по шкале типов. Например, при нашем размере по умолчанию текст абзаца будет 16px, следующий размер вверх (назовем его пока «кавычкой») будет 16px × 1.2 или 19.2px. Возможно, следующий размер «подзаголовка» будет 19.2px × 1.2 или 23px.
Теперь, когда я представил абзац, подзаголовок и подзаголовок (и, вероятно, размеры заголовков и героев), нам нужно сгенерировать эти размеры. Давайте поместим наши метки шкалы типов в список Sass:
$rwd-scale-labels: (p, bq, sh, h, hero);
Теперь, когда у нас есть все наши данные, давайте напишем немного Sass для автоматического построения наших размеров!
Генерация размеров с помощью Sass Loops и Mixins
Теперь мы можем использовать некоторые циклы и миксины для генерации адаптивных размеров шрифта. Мы начнем с написания цикла, который проходит через каждую из меток шкалы шрифта и генерирует селектор-заполнитель Sass для каждого из них.
@each $label in $rwd-scale-labels { %#{$label} { // we'll put more code here soon… } }
Внутри каждого из этих заполнителей мы @each еще @each оператор @each для @each точек останова и создания нашей типографии:
@each $breakpoint, $data in $rwd-typography { // $breakpoint represents the breakpoint's key, // $data is the nested map containing its data }
В этом цикле первое, что мы сделаем, это выясним, нужен ли нам медиа-запрос или нет. По умолчанию / первая точка останова не требует медиа-запроса; другие делают.
@if map-get($data, min-width) != null { //CHECK != syntax @media screen and (min-width: map-get($data, min-width)) { // generate CSS output here } } @else { // generate CSS output here }
Давайте пока оставим этот вложенный код в покое и напишем несколько вспомогательных функций для генерации наших значений CSS. Первая функция, которую мы напишем, получит размер шрифта для текущей метки в текущей точке останова:
@function rwd-generate-font-size($label, $breakpoint) { $label-position: index($rwd-scale-labels, $label); $breakpoint-base-font-size: map-get(map-get($rwd-typography, $breakpoint), base-font-size); $breakpoint-type-scale: map-get(map-get($rwd-typography, $breakpoint), type-scale); $return: $breakpoint-base-font-size; @for $i from 1 to $label-position { $return: $return * $breakpoint-type-scale; } @return $return; }
Есть несколько продвинутых функций Sass, используемых выше:
-
index($item, $list)получает позицию элемента в списке -
map-get($map, $key)возвращает значение, соответствующее указанному ключу в данной карте
Цикл @for примерно имитирует @for power() функцию / экспоненциальную математику.
Мы включим это в наш цикл прямо над проверкой медиазапроса:
$current-font-size: rwd-generate-font-size($label, $breakpoint);
Теперь давайте расширим функцию выше, чтобы сгенерировать высоту строки в соответствии с нашим вертикальным ритмом:
@function rwd-generate-font-size($label, $breakpoint) { $label-position: index($rwd-scale-labels, $label); $breakpoint-base-font-size: map-get(map-get($rwd-typography, $breakpoint), base-font-size); $breakpoint-type-scale: map-get(map-get($rwd-typography, $breakpoint), type-scale); $breakpoint-vertical-rhythm: map-get(map-get($rwd-typography, $breakpoint), vertical-rhythm); $font-size: $breakpoint-base-font-size; @for $i from 1 to $label-position { $font-size: $font-size * $breakpoint-type-scale; } $base-vertical-rhythm: $breakpoint-base-font-size * $breakpoint-vertical-rhythm; $line-height: round($font-size / $base-vertical-rhythm) * $base-vertical-rhythm / $font-size; $return: join($font-size, $line-height); @return $return; }
Теперь $return значение этой функции — список с двумя значениями: font-size и line-height. Нам нужно обновить присвоение переменной в нашем цикле, чтобы соответствовать этому:
$generated-values: rwd-generate-font-size($label, $breakpoint); $font-size: nth($generated-values, 1); $line-height: nth($generated-values, 2);
Функция nth() в Sass возвращает значение списка в заданной позиции индекса.
Теперь давайте соберем все в нашем цикле:
@each $label in $rwd-scale-labels { %#{$label} { @each $breakpoint, $data in $rwd-typography { $generated-values: rwd-generate-font-size($label, $breakpoint); $font-size: nth($generated-values, 1); $line-height: nth($generated-values, 2); @if map-get($data, min-width) != "null" { @media screen and (min-width: map-get($data, min-width) { font-size: $font-size; line-height: $line-height; } } @else { font-size: $font-size; line-height: $line-height; } } } }
Теперь, чтобы использовать эти стили, расширите их от фактических селекторов. Например:
body { @extend %p; } blockquote { @extend %bq; } h1 { @extend %h; } h2 { @extend %sh; } .hero-title { @extend %hero; }
Теперь каждый из этих селекторов получает все выходные данные, основанные на медиа-запросах, которые мы создали с помощью наших циклов и функции выше! Вы можете установить все свои данные в исходной карте и списке, а затем расширить созданные вами метки, чтобы создать адаптивную типографику с помощью автоматически сгенерированного CSS-вывода из циклов.