Что такое Тестер типографики?

Тестер типографики позволяет настраивать свойства шрифтов и сразу видеть результат. Выберите гарнитуру, измените размер, начертание, межстрочный интервал и отступы, а затем скопируйте CSS прямо в свой проект.

Тестер позволяет настраивать семейство шрифта, размер, начертание (100–900), межстрочный интервал, межбуквенный и междусловный интервалы, выравнивание, преобразование регистра и цвет. Образец текста редактируется, так что можно сразу попробовать собственные заголовки и абзацы, а панель CSS одним кликом готова к вставке в таблицу стилей или styled-компонент.

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

1. Введите или вставьте образец текста в область предварительного просмотра.
2. Настройте параметры типографики: гарнитуру, размер, начертание, межстрочный интервал, трекинг и словесный интервал.
3. Скопируйте CSS-вывод, чтобы сразу использовать настройки типографики в своём проекте.

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

• Подгонять основной текст блога, пока Inter 18 px с междустрочным 1,6 не станет читаться спокойно на телефоне.
• Прогнать длинную статью через 16, 17 и 18 px и посмотреть, какой размер дольше удерживает читателя.
• Проверить, исправит ли увеличенный межбуквенный интервал тесный вид кнопки, набранной капителью.

Результат

Веб-дизайнер тестирует шрифт «Inter» при 18 пикселях, межстрочном интервале 1,6 и трекинге 0,02em, затем копирует CSS для таблицы стилей своего блога.

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

Какой межстрочный интервал подходит для основного текста?

Для длинных абзацев в 16–18 px межстрочный интервал 1,5–1,7 читается комфортно на экране. Заголовки выглядят лучше при более плотных значениях, обычно 1,1–1,3. Введите заголовок и абзац в окно образца и сравните рядом.

Почему межбуквенный интервал задаётся в em, а не в px?

Em масштабируется вместе с размером шрифта, поэтому 0,02em остаётся пропорциональным и при 14 px, и при 48 px. Значение в пикселях смотрится правильно на одном размере и сбивается на других.

Какие начертания шрифта безопасно использовать в вебе?

Современные Google Fonts и переменные шрифты охватывают 100–900, но у некоторых самохостящих шрифтов есть лишь 400 и 700. Если при смене веса превью не меняется, значит, у шрифта нет нужного начертания, а браузер подделывает его синтетически.

Можно тестировать шрифты, которых нет на странице?

Выбирайте из встроенного меню шрифтов — там есть поиск и фильтры Без засечек / С засечками / Моноширинный / Системные, а любой выбранный Google-шрифт подгружается сам. Переключитесь в режим «Галерея», чтобы увидеть ваш пример сразу во всех шрифтах, или включите «Сравнение», чтобы поставить две гарнитуры рядом. Загрузка собственного файла шрифта здесь не поддерживается, для этого нужен @font-face на вашем сайте.

Как перенести CSS в проект на React или Tailwind?

Нажмите «Скопировать CSS», получите каждое свойство как стандартное объявление. В React вставьте в шаблонный литерал styled-components или превратите каждую строку в ключ в camelCase. В Tailwind свяжите размер и вес с утилитарными классами, а нестандартные интервалы оставьте в синтаксисе с произвольными значениями.

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