Что такое тестер шрифтов?

Тестер шрифтов — это инструмент, который позволяет предварительно просмотреть, как выглядит шрифт перед его использованием в дизайне или на веб-сайте. Вместо установки шрифта в операционную систему или встраивания его в проект, вы можете загрузить его непосредственно в браузер и увидеть, как именно отображаются буквы, цифры и символы. Это особенно полезно при оценке пользовательских или незнакомых шрифтов, поскольку визуальный характер шрифта — его пропорции, вес, интервалы и ритм — можно оценить только в контексте с реальным текстом.

Современные браузеры предоставляют FontFace API, что позволяет зарегистрировать шрифт из локального файла и применить его к любому элементу на странице без загрузки на сервер. Весь процесс отображения происходит локально, поэтому файл шрифта никогда не покидает ваше устройство.

Описание инструмента

Этот тестер шрифтов позволяет загрузить файл шрифта (TTF, OTF, WOFF или WOFF2) и мгновенно просмотреть его с полностью настраиваемыми параметрами типографики. Вы можете регулировать размер, высоту строки, межбуквенное расстояние, расстояние между словами, вес, стиль, выравнивание и цвета, а затем увидеть результат в реальном времени на нескольких образцах — примеры текста, полный алфавит, цифры, символы и шкала размеров — для оценки шрифта со всех сторон.

Шрифт загружается полностью в браузер; загрузка, учётная запись или установка не требуются.

Примеры

Входные данные: пользовательский файл .woff2 плюс пример текста The quick brown fox jumps over the lazy dog.

Выходные данные: живой предпросмотр этого предложения, отображённого загруженным шрифтом с выбранным размером, весом и интервалами, плюс отдельные панели, показывающие прописной алфавит, строчной алфавит, цифры, символы и ту же панграмму, повторённую размерами 12, 16, 20, 24, 32, 48, 64 и 96 пикселей.

Возможности

  • Локальная загрузка шрифтов: загрузите файл TTF, OTF, WOFF или WOFF2 и увидите его применение немедленно
  • Полные элементы управления типографикой: регулируйте размер шрифта, высоту строки, межбуквенное расстояние, расстояние между словами, вес, курсив и выравнивание
  • Настройка цвета: выбирайте цвета текста и фона для проверки контрастности и соответствия бренду
  • Несколько образцов: просмотрите шрифт с пользовательским текстом, полным алфавитом, цифрами, символами и шкалой размеров
  • Защита конфиденциальности: файлы обрабатываются в вашем браузере и никогда не загружаются на сервер

Варианты использования

  • Оценка приобретённого или загруженного шрифта: протестируйте шрифт в разных размерах, весах и цветах перед его использованием в бренде или проекте
  • Проверка отображения веб-шрифтов: проверьте, как файл .woff2 отображается в браузере, включая кернинг, интервалы и стиль курсива
  • Разработка типографики для веб-сайта или приложения: быстро итерируйте размер шрифта, высоту строки и межбуквенное расстояние, чтобы найти правильное сочетание

Поддерживаемые форматы

  • TTF (TrueType Font)
  • OTF (OpenType Font)
  • WOFF (Web Open Font Format)
  • WOFF2 (Web Open Font Format 2.0)

Объяснение параметров

  • Пример текста — текст, отображаемый в основной панели предпросмотра; поддерживает несколько строк.
  • Размер шрифта — размер основного текста предпросмотра в пикселях (8–200). Панели алфавита, цифр и символов отображаются с размером 75% от этого значения.
  • Высота строки — вертикальное расстояние между строками, выраженное в процентах от размера шрифта (50–300%).
  • Межбуквенное расстояние — дополнительное пространство между отдельными символами в пикселях (-10 до 30). Отрицательные значения сужают текст.
  • Расстояние между словами — дополнительное пространство между словами в пикселях (-10 до 50).
  • Вес шрифта — числовой вес от 100 (Thin) до 900 (Black). Только веса, фактически включённые в файл шрифта, будут отображаться отчётливо; остальные имитируются браузером.
  • Курсив — переключает font-style: italic. Если шрифт не имеет вариант курсива, браузер может синтезировать наклонную версию.
  • Выравнивание текста — выравнивание по левому краю, по центру, по правому краю или по ширине для панелей предпросмотра.
  • Цвет текста / Цвет фона — цвета, используемые во всех панелях предпросмотра, полезны для предпросмотра шрифта на предполагаемом фоне.

Советы

  • Некоторые шрифты поставляются только с одним весом; переключение на полужирный или тонкий может выглядеть идентично или вернуться к синтетическому стилю браузера. Проверьте документацию шрифта, если вес выглядит неправильно.
  • Используйте панель шкалы размеров, чтобы обнаружить шрифты, которые плохо отображаются при малых размерах — шрифт, который выглядит элегантно при 64px, может стать нечитаемым при 12px.
  • Протестируйте шрифт как на светлом, так и на тёмном фоне; тонкие веса часто исчезают на тёмном фоне и требуют увеличения.
  • Сравните панели прописных и строчных букв рядом, чтобы оценить высоту x, высоту заглавных букв и общий ритм.

Ограничения

  • Оси переменных шрифтов, выходящие за пределы стандартного веса и курсива, не отображаются отдельно.
  • Функции OpenType, такие как лигатуры, стилистические альтернативы и капители, отображаются с использованием значений браузера по умолчанию и не могут быть переключены в пользовательском интерфейсе.
  • Очень большие файлы шрифтов могут занять некоторое время на загрузку и анализ.