Что такое Тестер размера шрифта?

Введите любой текст и посмотрите его во всех размерах от 8px до 96px. Переключайтесь между px, rem и pt, настраивайте межстрочный интервал и трекинг для точной настройки типографики.

Вставьте любую фразу — и она одновременно отрисуется в 14 размерах: от крошечных 8 px подписи до плакатных 96 px. Переключайте единицу между px, rem и pt, на лету подкручивайте межстрочный и межбуквенный интервалы. Удобно, когда нужно увидеть, на каком размере текст начинает раздражать глаз, или сравнить кнопку 14 px и 16 px до того, как трогать CSS.

Как использовать

1. Шаг 1 — Введите или вставьте текст, который хотите проверить.
2. Шаг 2 — Настройте диапазон размеров и единицу измерения (px, rem или pt) для предпросмотра.
3. Шаг 3 — Сравните все размеры рядом и выберите оптимальный вариант для вашего дизайна.

Когда использовать

• Подобрать размер подписей в навигации, чтобы оставались читаемыми и не забивали панель.
• Сравнить основной текст 14 px и 16 px, чтобы закрыть спор внутри дизайн-команды.
• Перевести значение в px от дизайнера в rem, чтобы страница уважала настройки шрифта пользователя.

Результат

Тестирование навигационной надписи: введите «Dashboard» и сравните при 12px, 14px и 16px, чтобы найти самый читаемый размер без лишнего расхода места.

Частые вопросы

Что выбирать для шрифтов на сайте: px, rem или pt?

Для основного текста и компонентов используйте rem: он масштабируется относительно корневого размера, заданного пользователем, что важно для доступности. Px оставьте для рамок и совсем маленьких иконок, где нужны точные пиксели. Pt — это типографская единица, на экране её лучше избегать.

Какой размер основного текста разумен?

16 px (1 rem) — фактический стандарт абзацев в вебе. Опускайтесь до 14 px только для вторичного текста вроде подписей и меток. Сайты, где основной текст меньше 14 px, обычно проваливают аудит доступности и раздражают читателей на маленьких экранах.

Насколько сильно межстрочный интервал влияет на читаемость?

Целевой диапазон для основного текста — 1.4–1.6. Меньше — становится тесно; больше — теряется ритм между абзацами. Заголовки можно сжимать сильнее (1.1–1.2), поскольку строки и так обычно короткие.

Когда стоит регулировать межбуквенный интервал (tracking)?

Слегка расширьте интервал (около 0.05 em) для подписей капителью, где базовый кернинг кажется зажатым. Сожмите (–0.01 — –0.02 em) у очень крупных дисплейных заголовков. Основной текст не трогайте — дизайнер шрифта уже всё настроил.

WCAG правда требует минимум 16 px?

WCAG не задаёт жёсткого минимума, но требует, чтобы текст можно было увеличить до 200% без разрушения макета. На практике старт с 16 px и относительные единицы решают вопрос. Меньшие значения по умолчанию заставляют пользователя зумировать страницу, чего большинство не делает.

Похожие инструменты