Обзор: новые и улучшенные шрифты Google Fonts стали лучше?

От автора: с тех пор, как Google анонсировали появление самого большого сервиса бесплатных веб-шрифтов, прошло шесть лет. Все эти хрупкие технологии нужно было донести до масс, и простой интерфейс сыграл тут огромную роль. С 2010 года сервис постоянно растет и увеличивает количество библиотек.

Недавно сервис получил полный редизайн. Теперь просматривать шрифты стало еще удобнее, и вы можете моментально пользоваться ими. Но стал ли сервис действительно лучше? Давайте разберемся.

Отполированный и обновленный внешний вид

Я считаю, что общий внешний вид Google Fonts стал лучше. Первым крупным изменением, на которое вы обратите внимание, будет использование Material Design. Ушли в прошлое толстые рамки, графика низкого разрешения и светло-голубые кнопки. Все это было заменено на тонкую анимацию и интерактивность, которая поможет вам сосредоточиться именно на подборе нужных вам шрифтов.

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

На правой части скриншота видно, как с уменьшением экрана мы теряем поле «Preview Text», из-за чего становится невозможным попробовать живой предпросмотр текста. Также с уменьшением экрана кнопки начинают наезжать на автора и название шрифта, в конце концов, полностью скрывая их.

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

Динамический выбор темы

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

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

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

Избранные шрифты

Избранные шрифты – совершенно новая функция на обновленном сайте Google Fonts. Посмотреть избранные шрифты можно, перейдя по ссылке в верхнем меню. Они представляют собой коллекции шрифтов, которые Google хотят выделить среди остальных. Коллекции создаются как самим Google, так и сторонними агентствами, которые хотят показать особый стиль дизайна или философии.

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

Навороченный селектор инлайновых шрифтов

Основной опыт от работы с Google Fonts заключается в том, как посмотреть и выбрать шрифты. Некоторые считают, что это главная часть сайта.

Раньше при просмотре шрифта вы видели что-то похожее на рисунок выше – простое превью текста с рядом кнопок. Картинка могла немного отличаться, все зависело от выбранных фильтров поиска, но в основном это был простой квадратный бокс с рядом кнопок и большой голубой кнопкой Add to Collection.

Старый дизайн, в принципе, нормальный, но он кажется неотполированным и непонятным. К примеру, если взглянуть на кнопки под каждым шрифтом. Понимаете ли вы их назначение без клика по ним или наведения на них курсора мыши? Если бы я раньше вообще не пользовался этим сайтом, клянусь, мне показалось бы, что это кнопки «загрузить», «вперед» и «копировать». Единственной нормальной кнопкой была Add to Collection.

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

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

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

Обновленный просмотр образцов шрифта

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

Обновленный сайт полностью ушел от функционала всплывающих окон. По клику на слово «See Specimen» мы попадаем на длинную страницу, где показаны все символы шрифта, типы насыщенности, создатель/дизайнер, а также дополнительная информация (статистика использования шрифта и шрифты, с которыми он сочетается). Сайт привлекает мое внимание и смотрится намного живее и современнее.

Упрощенная панель настройки шрифта

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

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

Экран делится на две части Embed и Customize. В секции Embed можно получить URL стилей и CSS правила. В секции Customize можно настроить насыщенность, стили, а также оценить влияние шрифта на скорость загрузки страницы.

Единственное, что мне не нравится, это то, что теперь индикатор не показывает единицы измерения. То есть вы не увидите, как раньше, что шрифт влияет на сайт на 150 единиц. Теперь вам будет показываться просто слово, например, «moderate». В старой версии сайта влияние на скорость загрузки со шрифтом описывалось точнее.

К примеру, если в шрифте проставить несколько стилей, то вы можете получить оценку «slow». Без цифр очень сложно определить важность оказываемого влияния.

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

Бонус: оставьте отзыв о Google Fonts

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

Чтобы оставить отзыв, необязательно делать скриншот. Но сама возможность указать разработчикам на что-то уже радует.

Выходит, сервис стал лучше?

Если вам нравился старый Google Fonts, то вы, скорее всего, полюбите и новый сайт. Разработчики сохранили все то, что вы любили в старой версии, и перенесли это на новый сайт без потерь. Все было настолько упрощено, что процесс просмотра, выбора и применения шрифтов стал почти бесшовным.

Везде чувствуется новизна и лоск, которые ожидаешь увидеть в современных веб-сервисов Google. Поиграйтесь с сервисом. Сейчас идеальный момент, чтобы самому из первых рук увидеть, насколько лучше стал сервис, а также оценить то, насколько он упрощает поиск шрифтов. Отличный момент, чтобы попробовать новый сервис в деле. Пишите в комментариях свои мысли!

Автор: Simon Codrington

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: