# Вариативные шрифты с осью оптического размера > Вариативные семейства, которые перерисовываются под размер набора: крепче и свободнее в мелком, тоньше и плотнее в крупном. В металлическом наборе каждый размер вырезался отдельно, и пуансонисты подправляли рисунок по ходу дела. Мелкие размеры делали шире и крепче со свободными интервалами, чтобы они выжили на странице; крупные дорабатывали: тоньше волосяные линии, плотнее посадка. Цифровые шрифты утратили это, когда один контур стали масштабировать до любого размера. Ось оптического размера, тег opsz, возвращает её. В шрифте с такой осью значение обычно соответствует размеру в пунктах. При низком значении буквы имеют более высокие строчные, более толстые тонкие штрихи и больше пространства между собой. При высоком значении контраст усиливается, а детали становятся тонкими. Практический результат: одно семейство может служить и текстовым, и акцидентным шрифтом, а подпись остаётся читаемой, не выглядя тяжёлой. Браузеры применяют ось автоматически: font-optical-sizing по умолчанию установлено в auto, так что шрифт с осью подстраивается под размер без дополнительного кода. Её можно задать и вручную, чтобы намеренно использовать акцидентный рисунок в мелком кегле или текстовый в крупном. Диапазоны у семейств сильно различаются: от настройки всего на несколько пунктов, только для текста, до диапазона больше тысячи; в заметках каждый приведён так, как записан. How these were chosen: Вариативные семейства, в карточках которых указана ось оптического размера (opsz) с пригодным для работы диапазоном; диапазоны и сопутствующие оси приведены по карточкам. ## Fonts (16) - [Inter](https://trendhub.net/ru/fonts/inter.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Оптический размер от 14 до 32 настраивает экранный гротеск под мелкие подписи и более крупные заголовки; плюс девять насыщенностей с курсивом. - [DM Sans](https://trendhub.net/ru/fonts/dm-sans.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Оптический размер от 9 до 40 в малоконтрастном геометричном гротеске. - [Merriweather](https://trendhub.net/ru/fonts/merriweather.markdown) (Антиква, начертаний: 14 · вариативный, OFL): Текстовая антиква, у которой оптический размер идёт от 18 до 144, с осями насыщенности и ширины. - [Bricolage Grotesque](https://trendhub.net/ru/fonts/bricolage-grotesque.markdown) (Гротески, начертаний: 7 · вариативный, OFL): Оптический размер от 12 до 96, с преувеличенными компенсационными врезками на малом конце, рядом с насыщенностью и шириной. - [Nunito Sans](https://trendhub.net/ru/fonts/nunito-sans.markdown) (Гротески, начертаний: 16 · вариативный, OFL): Диапазон малых оптических размеров, от 6 до 12, среди четырёх осей: насыщенность, ширина и высота строчных. - [Source Serif 4](https://trendhub.net/ru/fonts/source-serif-4.markdown) (Антиква, начертаний: 16 · вариативный, OFL): Оптический размер от 8 до 60 в переходной антикве, с восемью насыщенностями и курсивом. - [Newsreader](https://trendhub.net/ru/fonts/newsreader.markdown) (Антиква, начертаний: 14 · вариативный, OFL): Ось оптического размера от 6 до 72, насыщенности от 200 до 800. - [Literata](https://trendhub.net/ru/fonts/literata.markdown) (Антиква, начертаний: 16 · вариативный, OFL): A reading serif with optical size from 7 to 72, eight weights and italics. - [Playfair](https://trendhub.net/ru/fonts/playfair.markdown) (Антиква, начертаний: 14 · вариативный, OFL): The widest optical range here, 5 to 1200, in a serif that also varies in weight and width. - [Fraunces](https://trendhub.net/ru/fonts/fraunces.markdown) (Антиква, начертаний: 18 · вариативный, OFL): Оптический размер от 9 до 144 рядом с осями насыщенности, Softness и Wonky. - [Bodoni Moda](https://trendhub.net/ru/fonts/bodoni-moda.markdown) (Антиква, начертаний: 12 · вариативный, OFL): Контрастная антиква, у которой оптический размер идёт от 6 до 96. - [Roboto Serif](https://trendhub.net/ru/fonts/roboto-serif.markdown) (Антиква, начертаний: 18 · вариативный, OFL): Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles. - [Roboto Flex](https://trendhub.net/ru/fonts/roboto-flex.markdown) (Гротески, начертаний: 20 · вариативный, OFL): Оптический размер от 8 до 144 — одна из 13 осей в одном файле. - [Pathway Extreme](https://trendhub.net/ru/fonts/pathway-extreme.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Optical size from 8 to 144 in a grotesque sans, beside weight and width axes. - [TikTok Sans](https://trendhub.net/ru/fonts/tiktok-sans.markdown) (Гротески, начертаний: 14 · вариативный, OFL): Optical size from 12 to 36 with weight, width and slant, four axes in a single file. - [Hedvig Letters Serif](https://trendhub.net/ru/fonts/hedvig-letters-serif.markdown) (Антиква, 1 начертание · вариативный, OFL): A single-weight brand serif whose only axis is optical size, from 12 to 24. ## FAQs ### Что меняет оптический размер в шрифте? Контраст штрихов, интервалы, высоту строчных и тонкие детали. Малые оптические размеры крепче и свободнее, большие — резче и плотнее посажены. ### Нужно ли писать CSS, чтобы использовать оптический размер? Обычно нет. Браузеры сами подбирают ось по размеру шрифта. Чтобы переопределить её, задайте font-variation-settings: "opsz" и значение в пределах диапазона шрифта. ### Что лучше: ось оптического размера или отдельные текстовый и акцидентный шрифты? Результат тот же. Ось удобнее, охватывает промежуточные размеры и требует одного файла. ## Related collections - [Вариативные шрифты с осью ширины](https://trendhub.net/ru/fonts/for/variable-fonts-with-a-width-axis.markdown) - [Вариативные шрифты с необычными осями](https://trendhub.net/ru/fonts/for/variable-fonts-with-unusual-axes.markdown) - [Антиквы для долгого чтения с экрана](https://trendhub.net/ru/fonts/for/serif-fonts-for-long-reading.markdown) - [Контрастные дидоны для моды и издательских заголовков](https://trendhub.net/ru/fonts/for/high-contrast-didone-fonts.markdown) - [Шрифты для газет и журналов](https://trendhub.net/ru/fonts/for/newspaper-and-magazine-fonts.markdown) - [Чёткие гротески для интерфейсов приложений](https://trendhub.net/ru/fonts/for/app-interface-fonts.markdown) --- Source: https://trendhub.net/ru/fonts/for/variable-fonts-with-optical-size (trendhub)