Калькулятор типографики
Что такое веб-типографика
Веб-типографика -- это система принципов оформления текста для цифровых интерфейсов. Она объединяет модульные шкалы, вертикальный ритм, оптимальную длину строки и адаптивные размеры для создания читабельного и гармоничного текста на любых устройствах.
Модульная шкала (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-код с переменными. Скопируйте и вставьте в ваш проект -- типографика готова.
Часто задаваемые вопросы
Похожие инструменты
Шкала SOFA — калькулятор сепсиса
Оценка органной дисфункции при сепсисе. Шесть систем: дыхание, коагуляция, печень, сердечно-сосудистая, ЦНС, почки.
Калькулятор объёмного веса (Dimensional Weight)
Рассчитайте объемный вес груза для отправки (DHL, FedEx, UPS). Сравнение с фактическим весом, расчет стоимости доставки.
Генератор Cron выражений (Crontab)
Создать и расшифровать Cron выражения онлайн. Удобный генератор расписания для скриптов и серверов. Перевод на понятный язык.
Калькулятор пени: налоги (ст. 75 НК) и договор
Расчет налоговой пени (1/300 и 1/150). Поиск неустойки по ст. 395 ГК РФ и договорам. История ключевой ставки ЦБ.
Калькулятор IPO
Оценка компании по P/E, P/S и EV/EBITDA, объём размещения. Для Московской биржи.
Chmod калькулятор (права доступа Unix)
Онлайн калькулятор chmod. Конвертация прав доступа (rwx) в числовой код (777, 755). Генератор команд для Linux.
Калькулятор технического долга: объём, SQALE, рефакторинг
Комплексный калькулятор технического долга: оценка объёма в часах и рублях, расчёт процентной ставки (стоимость бездействия), матрица приоритизации (impact vs effort), метрики качества кода (цикломатическая сложность, дупликация, покрытие тестами), план рефакторинга по спринтам, SQALE рейтинг A-E.
Калькулятор расхода материалов: краски, обоев, плитки
Строительный калькулятор расхода материалов. Расчет количества обоев, краски (литры), плитки, ламината и ковролина с учетом запаса.
Калькулятор управления рисками
Ожидаемые потери, ROI риск-менеджмента по ГОСТ Р ИСО 31000-2019. Для проектов в России.
Генератор UUID v4 онлайн
Генерация UUID v4. Один или сотни уникальных идентификаторов за секунду. Разные форматы.
Калькулятор нутрициологии: нутриенты, PDCAAS, гликемическая нагрузка и HEI
Нутрициологические расчёты: суточная норма нутриентов (МР 2.3.1), аминокислотный скор PDCAAS, гликемическая нагрузка, баланс Омега-3/6, HEI.
Калькулятор выборки и репрезентативности
Расчёт размера выборки по формуле Кокрана, погрешность выборки, генератор случайных чисел и сравнение методов выборки (случайная, стратифицированная).
Калькулятор APACHE II
Рассчитайте балл APACHE II. Оценка тяжести состояния в ОРИТ по 12 физиологическим параметрам. Прогноз госпитальной летальности.
Калькулятор шести сигм (Six Sigma)
Расчёты Six Sigma: уровень сигма, DPMO, DMAIC, выборка, FMEA, поток создания ценности
Генератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.