Секрет аккуратного сайта без случайных отступов
Сайты от ИИ часто выглядят неряшливо из-за случайных отступов, например 13 пикселей в одном блоке и 27 в другом. Единая шкала решает эту проблему. Вы выбираете базовую единицу в 4 или 8 пикселей, базовый размер текста от 16 до 18 и один из трех коэффициентов увеличения: 1.2, 1.25 или 1.333. Получается десять шагов для отступов и восемь размеров текста, от сноски до главного заголовка. Код для вставки представляет собой блок :root с переменными CSS в единицах rem, а все вычисления происходят прямо в браузере.
Это стандартная единица в современных дизайн-системах. Все отступы кратны ей, что и создает ощущение порядка.
Отношение размера одного текста к следующему. Чем выше коэффициент, тем сильнее контраст между заголовками и основным текстом.
Единица rem зависит от размера шрифта в браузере пользователя. Если человек увеличил текст для удобства чтения, весь сайт пропорционально увеличится. С пикселями так не получится, а расчет идет как 16 пикселей на один rem.
Скопируйте ему блок переменных и прямо укажите брать все отступы и размеры текста только оттуда. Без этого указания ИИ продолжит выдумывать случайные значения.
Значение 1.25 подходит для большинства сайтов. Коэффициент 1.2 лучше для больших массивов сплошного текста, а 1.333 идеален для лендингов с крупными заголовками. При базе 16 главный заголовок получится 49 пикселей при 1.25 и 67 пикселей при 1.333.
Klix не загрузился
Сначала попробуйте обновить страницу. Если только что вышла новая версия, обновление решает это сразу.
Если обновление не помогло, возможно, ваш браузер слишком старый. Klix запускает инструменты на вашем устройстве, а не на сервере, поэтому ему нужен браузер 2022 года или новее. Что делать: обновите Chrome или Firefox и снова откройте klixtools.com.