Вариативные шрифты с осью оптического размера
Вариативные семейства, которые перерисовываются под размер набора: крепче и свободнее в мелком, тоньше и плотнее в крупном.
Small print, big type
В металлическом наборе каждый размер вырезался отдельно, и пуансонисты подправляли рисунок по ходу дела. Мелкие размеры делали шире и крепче со свободными интервалами, чтобы они выжили на странице; крупные дорабатывали: тоньше волосяные линии, плотнее посадка. Цифровые шрифты утратили это, когда один контур стали масштабировать до любого размера. Ось оптического размера, тег opsz, возвращает её.
В шрифте с такой осью значение обычно соответствует размеру в пунктах. При низком значении буквы имеют более высокие строчные, более толстые тонкие штрихи и больше пространства между собой. При высоком значении контраст усиливается, а детали становятся тонкими. Практический результат: одно семейство может служить и текстовым, и акцидентным шрифтом, а подпись остаётся читаемой, не выглядя тяжёлой.
Браузеры применяют ось автоматически: font-optical-sizing по умолчанию установлено в auto, так что шрифт с осью подстраивается под размер без дополнительного кода. Её можно задать и вручную, чтобы намеренно использовать акцидентный рисунок в мелком кегле или текстовый в крупном. Диапазоны у семейств сильно различаются: от настройки всего на несколько пунктов, только для текста, до диапазона больше тысячи; в заметках каждый приведён так, как записан.
-
Inter
Оптический размер от 14 до 32 настраивает экранный гротеск под мелкие подписи и более крупные заголовки; плюс девять насыщенностей с курсивом.
-
DM Sans
Оптический размер от 9 до 40 в малоконтрастном геометричном гротеске.
-
Merriweather
Текстовая антиква, у которой оптический размер идёт от 18 до 144, с осями насыщенности и ширины.
-
Bricolage Grotesque
Оптический размер от 12 до 96, с преувеличенными компенсационными врезками на малом конце, рядом с насыщенностью и шириной.
-
Nunito Sans
Диапазон малых оптических размеров, от 6 до 12, среди четырёх осей: насыщенность, ширина и высота строчных.
-
Source Serif 4
Оптический размер от 8 до 60 в переходной антикве, с восемью насыщенностями и курсивом.
-
Newsreader
Ось оптического размера от 6 до 72, насыщенности от 200 до 800.
-
Literata
A reading serif with optical size from 7 to 72, eight weights and italics.
-
Playfair
The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
-
Fraunces
Оптический размер от 9 до 144 рядом с осями насыщенности, Softness и Wonky.
-
Bodoni Moda
Контрастная антиква, у которой оптический размер идёт от 6 до 96.
-
Roboto Serif
Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
-
Roboto Flex
Оптический размер от 8 до 144 — одна из 13 осей в одном файле.
-
Pathway Extreme
Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
-
TikTok Sans
Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
-
Hedvig Letters Serif
A single-weight brand serif whose only axis is optical size, from 12 to 24.
В образцах загружается только базовая латиница каждого семейства. Все семейства здесь — с открытой лицензией; на странице каждого указаны условия и есть исходные файлы.
Вопросы и ответы: Вариативные шрифты с осью оптического размера
Что меняет оптический размер в шрифте?
Контраст штрихов, интервалы, высоту строчных и тонкие детали. Малые оптические размеры крепче и свободнее, большие — резче и плотнее посажены.
Нужно ли писать CSS, чтобы использовать оптический размер?
Обычно нет. Браузеры сами подбирают ось по размеру шрифта. Чтобы переопределить её, задайте font-variation-settings: "opsz" и значение в пределах диапазона шрифта.
Что лучше: ось оптического размера или отдельные текстовый и акцидентный шрифты?
Результат тот же. Ось удобнее, охватывает промежуточные размеры и требует одного файла.