Профессиональные инструменты типографики

Калькулятор типографики

Q: Как использовать rem вместо px?

1rem = размер шрифта корневого элемента (обычно 16px). Преимущество rem: пользователь может увеличить базовый размер в настройках браузера, и все rem-значения пропорционально увеличатся. Рекомендация: задавайте font-size и spacing в rem, media queries в em, а мелкие декоративные элементы (borders, shadows) -- в px.

Q: Подходит ли калькулятор для кириллицы?

Да. Все формулы и расчеты универсальны. Однако учитывайте, что средняя ширина кириллических символов немного больше латиницы, поэтому при одинаковом font-size строка кириллического текста может быть длиннее. Корректируйте max-width или char-width ratio в калькуляторе длины строки для точных результатов.

Q: Можно ли использовать готовый CSS в своем проекте?

Да, все сгенерированные CSS-переменные и значения готовы к использованию. Скопируйте блок :root с переменными в ваш глобальный CSS-файл. Переменные --font-size-* и --space-* можно использовать через var() в любом месте стилей. Код совместим со всеми современными браузерами (поддержка clamp() -- 95%+).

Модульная шкала (Type Scale), межстрочный интервал, оптимальная длина строки, вертикальный ритм, подбор пар шрифтов и Fluid Typography -- все расчёты в одном инструменте.

Базовый размер (px)

Модульное соотношение

Шагов вверх

Шагов вниз

Типографическая шкала

Соотношение: Perfect Fourth (1.333)

h189.76px5.61remАа Бб Вв

h267.34px4.209remАа Бб Вв

h350.52px3.157remАа Бб Вв

h437.9px2.369remАа Бб Вв

h528.43px1.777remАа Бб Вв

h621.33px1.333remАа Бб Вв

Base16px1remАа Бб Вв

small112px0.75remАа Бб Вв

small29px0.563remАа Бб Вв

CSS Variables

:root {
  --font-size-h1: 5.61rem; /* 89.76px */
  --font-size-h2: 4.209rem; /* 67.34px */
  --font-size-h3: 3.157rem; /* 50.52px */
  --font-size-h4: 2.369rem; /* 37.9px */
  --font-size-h5: 1.777rem; /* 28.43px */
  --font-size-h6: 1.333rem; /* 21.33px */
  --font-size-base: 1rem; /* 16px */
  --font-size-small1: 0.75rem; /* 12px */
  --font-size-small2: 0.563rem; /* 9px */
}

Модульных шкал

От Minor Second до Golden Ratio

Инструментов

Type Scale, ритм, fluid type и др.

Пар шрифтов

Проверенные комбинации serif + sans

clamp()

Fluid CSS

Готовый код для адаптивной типографики

Что такое веб-типографика

Веб-типографика -- это система принципов оформления текста для цифровых интерфейсов. Она объединяет модульные шкалы, вертикальный ритм, оптимальную длину строки и адаптивные размеры для создания читабельного и гармоничного текста на любых устройствах.

Модульная шкала (Type Scale)

Система пропорциональных размеров шрифта, основанная на математических соотношениях (Minor Third, Perfect Fourth, Golden Ratio). Обеспечивает визуальную иерархию и гармонию между заголовками и основным текстом.

≡

Вертикальный ритм

Система выравнивания текста по базовой сетке (baseline grid). Все межстрочные интервалы и отступы кратны одному базовому модулю, что создает визуальную упорядоченность и облегчает восприятие длинных текстов.

⇔

Fluid Typography

Адаптивная типографика с использованием CSS функции clamp(). Размер шрифта плавно масштабируется между минимальным и максимальным значением в зависимости от ширины экрана -- без медиа-запросов.

Возможности калькулятора

Шесть профессиональных инструментов для полного контроля над типографикой в ваших проектах.

📐

Генератор Type Scale

Модульные шкалы от Minor Second (1.067) до Golden Ratio (1.618). Генерация размеров заголовков h1-h6 из базового размера с CSS-переменными.

↕

Калькулятор межстрочного

Оптимальный line-height на основе размера шрифта, длины строки и x-height ratio. Мгновенный предпросмотр результата на живом тексте.

↔

Длина строки (Measure)

Расчёт оптимальной ширины текстового блока (45-75 символов). Значения в px, rem и ch с готовым CSS для max-width.

📏

Вертикальный ритм

Baseline grid калькулятор. Шкала отступов, выравнивание заголовков по сетке, единицы spacing для margin и padding.

🎨

Подбор пар шрифтов

8 проверенных комбинаций serif + sans-serif. Анализ контраста весов, сравнение x-height, оценка совместимости и предпросмотр.

📱

Responsive Typography

Fluid типографика с CSS clamp(). Расчёт min/max размеров, slope и intercept. Готовый CSS для всей шкалы заголовков.

Модульные шкалы/ подробное руководство

Модульная шкала (modular scale) -- это последовательность размеров, где каждый следующий получается умножением предыдущего на фиксированное соотношение. Этот принцип лежит в основе типографической иерархии.

Minor Second (1.067) и Major Second (1.125)

Минимальный контраст между уровнями. Подходит для интерфейсов с большим количеством текстовых уровней, где не нужна сильная иерархия -- например, дашборды, таблицы данных, админ-панели.

Minor Third (1.200) и Major Third (1.250)

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

Perfect Fourth (1.333) и Perfect Fifth (1.500)

Выраженная иерархия. Отлично работает для лендингов и промо-страниц, где нужно привлечь внимание крупными заголовками. Perfect Fourth -- самый универсальный вариант для большинства сайтов.

Golden Ratio (1.618)

Максимальный контраст. Создает драматическую разницу между уровнями. Используется для плакатов, героических секций и экспериментальной типографики. Требует осторожности: h1 может стать слишком большим.

Формула: size = baseSize * ratio^step. Например, при base = 16px и ratio = 1.333: h3 = 16 * 1.333^1 = 21.3px, h2 = 16 * 1.333^2 = 28.4px, h1 = 16 * 1.333^3 = 37.9px.

Совет: для мобильных устройств используйте шкалу с меньшим соотношением (1.125-1.200), а для десктопа -- с большим (1.250-1.333). Fluid Typography поможет плавно переключаться между ними.

Практические советы по типографике

Рекомендации от ведущих веб-дизайнеров для создания читабельного и визуально гармоничного текста.

1Оптимальная длина строки

Придерживайтесь 45-75 символов в строке (включая пробелы). Идеал -- 66 символов. Слишком длинные строки утомляют глаза при переходе на следующую строку, а слишком короткие нарушают ритм чтения.

2Базовый размер не меньше 16px

Основной текст (body) должен быть минимум 16px для комфортного чтения на экранах. Для длинных текстов (статьи, блог) лучше 18-20px. Мелкий шрифт допустим только для вспомогательных элементов.

3Не более 2-3 шрифтов

Один шрифт для заголовков, другой для основного текста. Третий -- только для акцентов (код, подписи). Больше трёх шрифтов создают визуальный хаос и увеличивают время загрузки страницы.

4Используйте rem, а не px

Единица rem масштабируется относительно корневого элемента, что обеспечивает доступность (пользователь может увеличить базовый размер в браузере). Для адаптивности комбинируйте rem с clamp().

5Line-height зависит от размера

Большой текст (заголовки) требует меньшего line-height (1.1-1.3), а мелкий текст (body) -- большего (1.5-1.7). Универсальный line-height: 1.5 не подходит для всех элементов.

6Тестируйте на реальном контенте

Lorem ipsum не покажет реальных проблем. Используйте настоящий текст нужного языка и длины. Особенно это важно для кириллицы, где ширина символов отличается от латиницы.

Как пользоваться калькулятором

Пошаговая инструкция для максимально эффективной работы с инструментами типографики.

Выберите инструмент

Переключайтесь между 6 вкладками: Type Scale, Межстрочный, Длина строки, Вертикальный ритм, Пары шрифтов и Fluid Type.

Задайте параметры

Введите базовый размер шрифта, выберите модульное соотношение, настройте длину строки. Все расчеты обновляются мгновенно.

Скопируйте CSS

Каждая вкладка генерирует готовый CSS-код с переменными. Скопируйте и вставьте в ваш проект -- типографика готова.

ЧАСТЫЕ ВОПРОСЫ

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

Модульная шкала -- это система размеров шрифта, где каждый следующий уровень получается умножением предыдущего на фиксированное соотношение (ratio). Например, при базовом размере 16px и соотношении Perfect Fourth (1.333): следующий размер = 16 × 1.333 = 21.3px, затем 28.4px, 37.9px и т.д. Это создает визуально гармоничную иерархию заголовков.

Для контентных сайтов (блоги, статьи) рекомендуется Minor Third (1.200) или Major Third (1.250). Для лендингов и маркетинговых страниц -- Perfect Fourth (1.333) или Perfect Fifth (1.500). Golden Ratio (1.618) дает максимальный контраст, но h1 может стать очень крупным. Для админ-панелей и дашбордов подходит Major Second (1.125).

Оптимальный межстрочный интервал зависит от трех факторов: размера шрифта, длины строки и x-height шрифта. Общие правила: основной текст (16-18px) -- line-height 1.5-1.7; заголовки (24px+) -- line-height 1.1-1.3. При длинных строках (>75 символов) увеличивайте line-height. Шрифты с большой x-height (Inter, Roboto) также требуют большего line-height.

Fluid Typography -- подход, при котором размер шрифта плавно масштабируется между минимальным и максимальным значением в зависимости от ширины viewport. CSS функция clamp(min, preferred, max) позволяет задать это одной строкой. Например: font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem) -- шрифт будет 16px на узких экранах, 24px на широких, и плавно между ними.

Вертикальный ритм -- принцип, при котором все элементы страницы выравнены по невидимой базовой сетке. Базовая единица (baseline unit) обычно равна line-height основного текста. Все отступы (margin, padding) и высоты строк заголовков должны быть кратны этой единице. Например, при base = 24px: отступ после абзаца = 24px, после заголовка = 12px или 24px.

Ключевые принципы: (1) Контраст категорий -- serif для заголовков + sans-serif для текста (или наоборот). (2) Схожий x-height -- шрифты должны визуально совпадать по высоте строчных букв. (3) Контраст веса -- заголовок Bold/Black + текст Regular/Light. (4) Тестируйте на реальном тексте, а не на Lorem ipsum.

Исследования читабельности показывают, что оптимальная длина строки -- 45-75 символов (включая пробелы), идеал -- 66 символов. Слишком длинные строки (>80 символов) утомляют глаза при переходе на следующую строку. Слишком короткие (<40 символов) нарушают ритм чтения из-за частых переносов. Для расчета используйте единицу CSS ch (ширина символа '0').

1rem = размер шрифта корневого элемента (обычно 16px). Преимущество rem: пользователь может увеличить базовый размер в настройках браузера, и все rem-значения пропорционально увеличатся. Рекомендация: задавайте font-size и spacing в rem, media queries в em, а мелкие декоративные элементы (borders, shadows) -- в px.

Да. Все формулы и расчеты универсальны. Однако учитывайте, что средняя ширина кириллических символов немного больше латиницы, поэтому при одинаковом font-size строка кириллического текста может быть длиннее. Корректируйте max-width или char-width ratio в калькуляторе длины строки для точных результатов.

Да, все сгенерированные CSS-переменные и значения готовы к использованию. Скопируйте блок :root с переменными в ваш глобальный CSS-файл. Переменные --font-size-* и --space-* можно использовать через var() в любом месте стилей. Код совместим со всеми современными браузерами (поддержка clamp() -- 95%+).

СМЕЖНЫЕ ИНСТРУМЕНТЫ

Калькулятор типографики

Типографическая шкала

CSS Variables

Что такое веб-типографика

Модульная шкала (Type Scale)

Вертикальный ритм

Fluid Typography

Возможности калькулятора

Генератор Type Scale

Калькулятор межстрочного

Длина строки (Measure)

Вертикальный ритм

Подбор пар шрифтов

Responsive Typography

Модульные шкалы/ подробное руководство

Minor Second (1.067) и Major Second (1.125)

Minor Third (1.200) и Major Third (1.250)

Perfect Fourth (1.333) и Perfect Fifth (1.500)

Golden Ratio (1.618)

Практические советы по типографике

1Оптимальная длина строки

2Базовый размер не меньше 16px

3Не более 2-3 шрифтов

4Используйте rem, а не px

5Line-height зависит от размера

6Тестируйте на реальном контенте

Как пользоваться калькулятором

Выберите инструмент

Задайте параметры

Скопируйте CSS

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

Похожие калькуляторы

Конвертер типографских единиц

Генератор Cubic Bezier (CSS transition)

Калькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм

Калькулятор градиентов и интерполяции цветов

Калькулятор контрастности (WCAG), шрифтов и сетки

Калькулятор Responsive Margin/Padding (Clamp generator)

Калькулятор пропорций золотого сечения

Калькулятор PPI и DPI (плотность пикселей)

Калькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена

Калькулятор CSS единиц (PX, REM, EM, %)

Конвертер цветовых пространств

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

Калькулятор DPI и размера печати

Генератор цветовых палитр

Калькулятор размера баннера

Лиана Арифметова

Инструмент справочный — не заменяет эксперта

Типографическая шкала

CSS Variables