Математика
идеального дизайна
Почему важен контраст?
Доступность (Accessibility, или a11y) — это не просто тренд, а необходимость. Согласно стандартам Web Content Accessibility Guidelines (WCAG), текст должен быть достаточно контрастным по отношению к фону, чтобы его могли прочитать люди с нарушениями зрения, цветовой слепотой или просто в условиях плохого освещения.
- AA (Minimum): Ratio 4.5:1. Стандарт для большинства сайтов.
- AAA (Enhanced): Ratio 7:1. Для государственных сайтов и максимальной читаемости.
Магия пропорций в шрифтах
Модульная шкала (Modular Scale) — это последовательность чисел, которые соотносятся друг с другом определенным образом. Использование математической шкалы в типографике делает размеры шрифтов не случайными, а взаимосвязанными и гармоничными.
Популярные шкалы пришли из музыки и архитектуры:
- Major Third (1.250)
Классика для веба. - Perfect Fourth (1.333)
Для блогов и статей. - Golden Ratio (1.618)
Сильный контраст (лендинги). - Minor Second (1.067)
Мобильные интерфейсы.
Сетка: Скелет Интерфейса
Правильная сетка ускоряет разработку и делает дизайн предсказуемым. Используйте этот калькулятор, чтобы настроить grid-layout в CSS или адаптивном дизайне.
Desktop (12 Cols)
Стандарт де-факто. Делится на 2, 3, 4, 6. Идеально для сложных дашбордов и лендингов.
Tablet (8 Cols)
Оптимально для iPad и планшетов. Позволяет удобно размещать карточки по 2 или 4 в ряд.
Mobile (4 Cols)
Минималистичная сетка для смартфонов. Меньше шума, больше фокуса на контенте.
Часто задаваемые вопросы
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Калькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradientГенератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор типографики: Type Scale, межстрочный, Fluid Typography
Комплексный типографический калькулятор. Модульная шкала (Type Scale), расчёт межстрочного интервала (line-height), оптимальная длина строки, вертикальный ритм (baseline grid), подбор пар шрифтов и Fluid Typography с CSS clamp().
/typography-calculatorКалькулятор PPI и DPI (плотность пикселей)
Рассчитайте PPI экрана, размер пикселя и физические размеры монитора/телефона. Конвертер пикселей в сантиметры.
/ppi-calculatorКалькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена
Комплексный калькулятор UX-метрик: System Usability Scale (SUS), Net Promoter Score (NPS), HEART framework Google, статистическая значимость A/B-тестов, эвристическая оценка Нильсена (10 эвристик), метрики выполнения задач (Task Success Rate, Efficiency).
/ux-metrics-calculatorГенератор favicon из текста
Создание иконки сайта (favicon) из буквы, эмодзи или символа. Генерация ICO, PNG, SVG для всех устройств с готовым HTML-кодом.
/generator-faviconКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКалькулятор пропорций золотого сечения
Расчёт пропорций по золотому сечению (φ = 1.618). Визуализация золотого прямоугольника и спирали Фибоначчи.
/zolotoe-sechenieКонвертер типографских единиц
Конвертация между пунктами, мм, пикселями, em/rem. Типографская шкала, пика, цицеро, дюймы.
/konverter-tipografskih-edinicКонвертер цветовых пространств
Конвертация цветов между CMYK, RGB, HEX, HSL, HSV с визуальным предпросмотром. Цветовые гармонии и контрастность WCAG.
/konverter-cvetov-cmyk-rgb-hexКалькулятор соотношения сторон
Расчёт и пересчёт соотношения сторон изображения/видео. Определение ratio, пересчёт размеров, кроп.
/sootnoshenie-storonКалькулятор DPI и размера печати
Пересчёт пикселей в размер печати при заданном DPI. Форматы A4-A0, фотопечать, полиграфия.
/kalkulyator-dpi-pechatГенератор цветовых палитр
Подбор гармоничных цветовых сочетаний: комплементарные, аналогичные, триадные. Экспорт в CSS, Tailwind, SCSS.
/generator-cvetovyh-palitr