Реклама мешает? Идти Без рекламы Сегодня 

Генератор модульной шкалы шрифтов

РазработчикМатематикаТекст

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Базовый

Основной размер (px)

Размер отсчета 1rem. Большинство браузеров по умолчанию устанавливают значение 16px.

Отношение

Каждый шаг в шкале равен предыдущему шагу, умноженному на это соотношение.

Пользовательское соотношение

Любое значение от 1.01 до 3.

Выход

Единица

Десятичные дроби

Количество десятичных знаков в отображаемых значениях.

Формат

Текст для предварительного просмотра

Выборка

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Генератор модульной шкалы шрифтов

Генератор шкалы шрифтов создает полную шкалу шрифтов на основе одного базового размера и выбранного математического соотношения. Каждый шаг в шкале равен предыдущему шагу, умноженному на соотношение, поэтому заголовки, основной текст и мелкий шрифт остаются пропорциональными на всех экранах.

Как использовать

Установите Базовый размер в пикселях (обычно 16px, что равно 1rem).
Выберите Отношение из выпадающего списка или выберите Пользовательский и введите свое собственное значение.
Выберите выходной формат Единица (rem, em или px) и количество Десятичные дроби.
Выберите Формат экспорта — CSS-переменные, SCSS-переменные, конфигурация Tailwind или JSON.
Редактируйте Выборка текст для предварительного просмотра вашего собственного текста на каждом шаге шкалы.
Скопируйте или скачайте сгенерированный код и вставьте его прямо в свой проект.

Возможности

Девять классических соотношений — от Минорной второй до Октавы, включая Золотое соотношение (1.618).
Пользовательское соотношение — введите любое значение от 1.01 до 3 для создания собственной шкалы.
Режим визуального предварительного просмотра — просмотрите пример текста, отображаемый на каждом шаге от xs до 6xl.
Четыре формата экспорта — CSS-переменные, SCSS-переменные, конфигурация Tailwind fontSize или JSON.
rem, em или px — выберите единицу, соответствующую вашей системе дизайна.
Настройка точности — округлите сгенерированные значения до 0–5 десятичных знаков.
Математика на стороне клиента — всё происходит в браузере, поэтому ничего не отправляется на сервер.

 Часто задаваемые вопросы

Что такое модульная шкала шрифтов?

Модульная шкала шрифтов — это последовательность размеров шрифтов, построенная на основе одного базового размера и фиксированного множителя. Каждый шаг равен предыдущему шагу, умноженному на этот множитель, что поддерживает постоянную пропорциональную связь между размерами на всей системе дизайна.
Почему использовать математические соотношения вместо произвольных размеров?

Соотношения, взятые из музыкальной теории и классических пропорций — Полная четвертая, Полная пятая, Золотое соотношение — создают отношения, которые глаз воспринимает как гармоничные. Произвольные размеры часто кажутся неравномерными и вынуждают делать больше визуальных решений на каждом экране.
Какое соотношение выбрать для текста с большим объемом содержимого?

Меньшие соотношения, такие как Минорная третья (1.2) и Мажорная третья (1.25), сохраняют размеры заголовков близкими к размеру основного текста, что хорошо работает для документации, блогов и интерфейсов с большим объемом текста, где пользователь проводит большую часть времени в параграфах.
Какое соотношение выбрать для маркетинговых и редакционных размещений?

Большие соотношения, такие как Полная пятая (1.5) и Золотое соотношение (1.618), создают резкие скачки размеров между основным и отображаемым текстом. Они хорошо работают на страницах с привлечением внимания, журналах и секциях с фокусом на типографике.
Какова разница между единицами rem, em и px?

px — это абсолютный размер в пикселях. rem относится к базовому размеру шрифта, поэтому он масштабируется при изменении настроек браузера. em относится к размеру шрифта родительского элемента, что приводит к композиции вложенных элементов. Большинство систем дизайна предпочитают rem для глобальных шкал шрифтов, поскольку они уважают настройки доступности пользователей.