Pull to refresh

Новый каталог веб-шрифтов от Google

Typography *


Удивительно, сколько классных продуктов Google может выпустить за один день, пусть это даже и тау-день. На Хабре уже обсудили Google+, новый дизайн, Takeout и конвертер Swiffy, а вот ещё один релиз: новый интерфейс для просмотра веб-шрифтов Google Web Fonts. Ссылка на новую версию появилась также в старом интерфейсе (вверху). На данный момент каталог содержит 180 семейств веб-шрифтов. Все они являются свободными и могут быть легко встроены в любую страницу.

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

Интерфейс разработан по результатам тестов юзабилити на группе пользователей. Выяснилось, что при выборе шрифта пользователи часто имеют какой-то конкретный способ его использования. Поэтому в браузер шрифтов добавлены три типичных варианта предпросмотра и сравнения шрифтов: 1) слово; 2) предложение; 3) абзац. При выборе того или иного варианта автоматически меняются размер шрифта и размер окошка предпросмотра, так что на экран помещается больше шрифтов.

В новом интерфейсе добавлен фильтр просмотра шрифтов по ширине/толщине, независимо от номинальных характеристик шрифта. То есть один шрифт в варианте Bold может быть тоньше, чем другой шрифт в стандартном варианте, а при выборе фильтра на экране всегда находятся шрифты одинаковой толщины. Эта фича основана на технологии TypeDNA.

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

Для внедрения веб-шрифтов из коллекции Google можно использовать бесплатный интерфейс Google Fonts API.
Tags:
Hubs:
Total votes 87: ↑77 and ↓10 +67
Views 15K
Comments Comments 25