Калькулятор типографики
Что такое веб-типографика
Веб-типографика -- это система принципов оформления текста для цифровых интерфейсов. Она объединяет модульные шкалы, вертикальный ритм, оптимальную длину строки и адаптивные размеры для создания читабельного и гармоничного текста на любых устройствах.
Модульная шкала (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-код с переменными. Скопируйте и вставьте в ваш проект -- типографика готова.
Часто задаваемые вопросы
Похожие инструменты
Калькулятор компьютерной сборки для нейросетей (ИИ)
Онлайн конфигуратор ПК для нейросетей и ИИ. Подбор видеокарты (RTX 4060–5090), CPU, RAM и SSD для Stable Diffusion, LLM, fine-tuning. Цены в рублях.
Рост и вес ребёнка по перцентилям ВОЗ
Оценка физического развития ребёнка по стандартам ВОЗ. Перцентили роста, веса, ИМТ и окружности головы от 0 до 19 лет.
Калькулятор социальной психологии: социометрия, конформизм и групповая динамика
Социально-психологические расчёты онлайн: социометрический индекс, шкала Богардуса, модель Латане, Кендалл W, групповое мышление.
Калькулятор биоинформатики
GC-состав, температура плавления Tm, трансляция ДНК→белок, обратный комплемент, сайты рестрикции, кодоновое смещение RSCU.
Калькулятор и тест памяти (digit span, мнемотехники)
Тест кратковременной памяти (digit span по Миллеру 7±2), дворец памяти, техники запоминания и ёмкость памяти. Для студентов и всех, кто развивает память.
Калькулятор критериев Рэнсона (панкреатит)
Оценка тяжести острого панкреатита по критериям Рэнсона. При поступлении и через 48 часов. Прогноз летальности.
Калькулятор RLC
Расчет параметров конденсаторов и индуктивностей, постоянной времени RC/RL цепей и резонанса LC контура.
Калькулятор рациона для КРС
Расчёт рациона кормления КРС по кормовым единицам и перевариваемому протеину. Дойные коровы, нетели, бычки на откорме.
Калькулятор NAS / сетевого хранилища
Подбор NAS: объём дисков, RAID, стоимость системы. Synology, QNAP, выбор дисков.
Калькулятор психологии здоровья: стресс Холмса-Раэ, копинг и качество жизни
Расчёты психологии здоровья: шкала стресса Холмса-Раэ, модель убеждений о здоровье, стадии Прохазки, копинг Лазаруса, EQ-5D, HLI.
Калькулятор BI Dashboard: производительность, лицензии, KPI, adoption
Комплексный калькулятор BI-дашбордов. Производительность (виджеты, время загрузки, concurrent users), расписание обновления данных, сравнение стоимости Power BI/Tableau/DataLens/Metabase/Superset, подбор виджетов, KPI framework, метрики внедрения DAU/MAU.
Калькулятор такси
Расчёт стоимости поездки на такси по городам РФ. Сравнение тарифов Яндекс.Такси, Uber, Ситимобил.
Калькулятор замены масла
Расчёт объёма моторного масла по объёму двигателя, стоимости замены с фильтром и работой, интервала и даты следующего ТО.
Калькулятор биомеханики: нагрузка на позвоночник, прыжок, бег и мышцы Хилла
Биомеханические расчёты: модель Чаффина, кинетика прыжка и бега, центр масс (Де Лева), сила удара, модель мышцы Хилла.
Калькулятор авиаперевозок грузов
Расчёт стоимости авиадоставки: объёмный вес, тарифы, ULD-контейнеры, страховка и сроки.
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.