Веб-сервисам шрифтов посвящается — мнение от первого лица

Мы подготовили для вас перевод интересной на наш взгляд статьи, которая будет полезна в первую очередь веб-дизайнерам. Автор статьи— Лора Франц, профессор в Университете штата Массачусетс, США (University of Massachusetts Dartmouth), где она преподает дисциплины из нескольких областей, такие как Веб Типографика и Интерактивный Дизайн.

Когда вы покупаете что-то, спорим,  вы хотите, чтобы это работало. Даже если что-то досталось вам бесплатно, может, вы одолжили у друга, вы хотите, что оно работало. Никто не предпочтет ботинки, которые жмут (или слишком свободны), машину, которая дребезжит на скорости больше 60 километров в час, или кухонный нож, которым нельзя разрезать помидор. Точно так же и веб-дизайнеры не отдают предпочтение шрифтам, не вписывающимся в проект, разваливающимся в разных браузерах или таким, которые нельзя использовать в макете.

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

Восемь лет назад, издание List Apart опубликовал «CSS и Ten: следующая большая вещь», в которой Эйкон Фиум Ли описывает сервис @Font-face и заявляет: “Две вещи должны случиться, прежде чем веб-шрифты смогут вывести веб-дизайн на новый уровень… Во-первых, мы должны удостовериться в корректности выбранного подхода… Во-вторых, мы должны убедить разработчиков браузеров в необходимости поддерживать веб-шрифты.”

Сегодня браузеры поддерживают веб-шрифты, и у нас есть легальная CSS (таблица оформления структуры страницы, прим. пер.), чтобы шрифты отображались нормально. Конечно, так как браузеры предыдущего поколения сменили новые браузеры (и расширенные семейства шрифтов), действующая CSS превратилась в вечную игру в “цель-движение”.

Действительно большой благодарности заслуживают Пол Айриш, который дал нам “Bulletproof Syntax”, чтобы одурачить Internet Explorer (IE) во время загрузки корректного файла шрифта; Ричард Финк, автор “Mo’ Bulletproofer Syntax” для устранения проблемы загрузки шрифтов на ОС Android; и Итэн Даннем, автор “Fontspring @font-face Syntax,” который совместим даже с IE 9. Они все тщательно объяснили, почему их синтаксис работает, что заставило каждого активизировать свои силы там, где другие сдавались. Более того, Font-face генератор Даннема обеспечил работающий синтаксис для всех тех веб-дизайнеров, которые могли лишь мечтать о том, чтобы их шрифты отображались по-человечески.

Наконец, хостинги шрифтов, такие как Typekit и Fontdeck, заслужили отдельного упоминания. Они трудились над кросс-браузерной поддержкой нескольких стилей шрифтового семейства. Разнообразные специфические названия шрифтовых семейств (конечно, легче и короче сказать «эй, приятели, вам нужно использовать уникальное название для каждого стиля и начертания шрифтового семейства») требуют более длинную CSS, однако они эффективны и позволяют загружаться одновременно более четырем шрифтовым начертаниям и стилям в IE 7 и 8. Те из дизайнеров, кто не может жить без легкого, нормального, жирного и очень жирного начертаний, и для которых черный имеет значение, оказались в раю веб-шрифтов!

Один аспект, который Ли упустил в своей заметке (нужда в большем количестве веб-шрифтов) – как же мы сможем вывести веб-дизайн на новый уровень, если у нас нет большого количества шрифтов для использования? Это, разумеется, значит, что сервисам следовало добиться доверия в сообществе шрифтовых дизайнеров.

Нужно было защитить шрифты.

Помните, когда дизайнеры не хотели создавать или отдавать веб-шрифты без гарантии, что их файлы в безопасности? Статья на Typekit «Обслуживание и защита шрифтов в Вебе» (2009) показала, что сервисы даже чинят препятствия к «случайному злоупотреблению» и поэтому изобрели «умеренно безопасную» систему для обслуживания шрифтов.

Благодаря выдержке каждого в дизайнерском сообществе, в какой-то момент за последние четыре года «умеренно безопасно» было достаточно, чтобы попробовать. И теперь они на крючке. В недавнем интервью, Джонатан Хофлер и Тобиас Фре-Джонс из H&FJ сказали: «Мы требуем, чтобы каждый новый проект мог процветать не только на бумаге, но также на декстопах и экранах мобильных устройств.»

Как же здорово, правда?

Так, в течение только лишь шести лет, мы прошли большой путь. Синтаксис веб-шрифтов работает и поддерживается большинством браузеров (наши шрифты загружаются!); у нас есть тысячи веб-шрифтов для работы; у нас есть несколько способов передачи веб-шрифтов (DIY или через сервис-провайдера; бесплатно или на ежемесячной, ежегодной или единоразовой платной основе); сервисы беспрестанно улучшаются, так что веб-шрифты легче ввести и они обычно загружаются равномерно!

Что еще нужно дизайнеру?

Я так рада, что вы спросили.

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

На некоторых сайтах доступны тысячи шрифтов. Но знаете, что?

«Больше» не всегда хорошо. Иногда «больше» превращается в «больше-одолеть-чтобы-найти-то-что-я-хочу». В 2010 г. в статье в New York Times «Слишком большой выбор: проблема, которая может парализовать», говорится об «ослабляющем» эффекте слишком обширного выбора, так как в таком случае сложнее выбрать.Веб-дизайнерам уже дали тысячи веб-шрифтов. Теперь им требуется полезная информация по возможным вариантам, а также помощь в определении лучших рабочих шрифтов в конкретном проекте. Какие из них выдержат отображение в разных браузерах? Какие их них наилучшим образом интегрируются в рабочий процесс? Как мы можем быть уверены, что наш выбор лучший? Как мы можем знать, что шрифт подойдет? И если подойдет, как мы узнаем, что другой не был бы лучше?

Бенджамин Шайбеэн, ученый и исследователь Университета Базель в Швейцарии, предполагает , что такой упадок сил приходит не только от слишком широкого выбора, но и от «недостатка информации или должного понимания вариантов». Хммм, но пока мы здесь и смотрим на автомобиль, откуда мы знаем, что он не будет дребезжать на шоссе?..

ПОКАЖИТЕ НАМ ВАШИ ШРИФТЫ В СРЕДЕ

Большинство из продавцов показывают, как шрифты будут выглядеть непосредственно в среде. Они дают возможность увидеть, подойдет ли шрифт («Мм, это как раз slab serif, это должно сработать»), и помогают выделить те, что совершенно точно не сработают («Нет, я не хочу такой круглый шрифт»). Отличный старт, но этого не достаточно.

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

Не сочтите за рекламу, но только Fontdeck, Fontspring, Font Squirrel и MyFonts предлагают возможность тест-драйва веб-шрифта в предложении. Проблема с предложением заключается в том, что оно не показывает, как шрифт выглядит в абзаце. В абзаце есть визуальная текстура, и она может быть привлекательной (живо, но не навязчиво продвигая взгляд по горизонтали) или колеблющейся (с пустыми полями или сильным горизонтальным натяжением, препятствующим движению взгляда по горизонтали). Текстура влияет на читабельность.

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

Теперь об остальных сервисах – Google Fonts, Fonts.com, Webtype и Hoefler & Frere-Jones – они показывают свои шрифты в параграфах. Спасибо им. Но просто для того, чтобы вы знали, не все абзацы так полезны, как они могли бы быть.

На Google Fonts текст имеет слишком плотную высоту по ширине строки, так что все шрифты выглядят неуклюже (см. иллюстрацию ниже). Fonts.com не предлагает достаточно вариантов размера текста; если шрифт выглядит слишком маленьким в 14 пикселей и слишком большим в 18, мы не можем сказать каким он будет в 16 пикселей (для информации, 16 – это действительно очень популярный размер веб-текста). Webtype использует строку для букв верхнего регистра, так что у них слишком много заглавных букв, и шрифты выглядят неуклюже; если же они действительно хотят показать, как выглядят их шрифты, просто пусть используют простой текст. Что касается Hoefler & Frere-Jones, их абзацы ограничены тремя строками, со слишком длинной 725-типиксельной длиной строки; такие параграфы не слишком-то приятно читать, и они подрывают качество шрифтов.

Typekit или Typotheque, их всех сервисов, которые я посещала или использовала, дают лучшую возможность проверить вид текста внутри абзаца. Есть несколько параграфов различных размеров, с хорошей длиной и высотой строки. Решение сервиса WebINK также прекрасно. Используя FontDropper, вы можете поместить любой из их шрифтов на существующую веб-страницу и проверить, как текст выглядит в деле.

Хотя все же одна проблема есть: библиотека FontDropper не позволяет встроить шрифтовую систему полностью, так что мы не можем увидеть текст в начертаниях bold и italic.

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

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

А КАК ВАШИ ШРИФТЫ ВЫГЛЯДЯТ В ДРУГИХ СИСТЕМАХ И БРАУЗЕРАХ?

Я много говорила о среде. Среда – это не только лишь текстура шрифта в абзаце или то, как шрифтовое семейство смотрится все вместе. Среда – это также место, в котором шрифт «живёт».

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

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

Спасибо Fonts.com, MyFonts и Typekit за скриншоты шрифтов в различных браузерах. Вы показываете только предложения, но даже это помогает. Также как Мистер Каслон запечатывал большой лист-образец, Вы трое даёте веб-дизайнерам возможность увидеть шрифт в деле. Вы показываете, какой шрифт отбросить, а какой рассмотреть в дальнейшем тестировании.

Hoefler & Frere-Jones, вы объявляете, что Ваш новый сервис Cloud.typography создает несколько файлов шрифтов (каждый построен для браузера и платформы отдельно) и обеспечивает каждый тип браузера уникальным файлом. Если это так, то ваши шрифты должны выглядеть отлично везде!

Некоторые веб-дизайнеры без проблем переходят с наброска от руки карандашом или ручкой к макету-черновику сайта. Некоторые предпочитают (или от них этого требуют) промежуточный этап в виде макетов страниц в Photoshop, Illustrator или InDesign.

Знаю – теперь ваша очередь сказать, что следует заглянуть в историю. До того, как шрифт стал цифровым, дизайнеры не делали набросков с использованием настоящих шрифтов. Клиенты попросту не ожидали увидеть их – и наборщиков это устраивало. Но с ранних 1980-х, макеты должны были выглядеть «как настоящие». И если мы хотим (или нам нужно) показать реалистичную макет-страницу клиенту, нам необходим доступ к «черновым» шрифтам.

Fonts.com, Font Squirrel, Google Fonts и WebINK – вы все дополняете шрифты для веба бесплатным доступом к «черновым» шрифтам при условии подписки. Спасибо вам! Но, к сожалению, ни одно из ваших решений не совершенно. Fonts.com, вы даете доступ к «черновым» шрифтам только на один день, для «продвижения дизайн-процесса». Не знаю, как всё устроено в вашем офисе, но я не в состоянии сделать всё за один день. Font Squirrel и Google Fonts, вы специализируетесь на бесплатных шрифтах. В то время как мне (и моим студентам) нравится пользоваться бесплатными шрифтами, доступ к высококачественным основным начертаниям ограничен. WebINK, ваш плагин для Photoshop – прекрасное решение, но только до тех пор, пока дизайнер не захочет использовать Illustrator, InDesign или другое ПО.

Fontspring, MyFonts, Typotheque и Hoefler & Frere-Jones, я знаю, что вы все даете пакетные предложения или скидки за покупку веб- и декстопных шрифтов сразу, что значительно уменьшает траты веб-дизайнера. Однако, если вы –­ маленькая компания или фрилансер, такие мелкие расходы только лишь для зарисовки идеи не слишком приятны.

Наиболее перспективный подход для «черновых» шрифтов, должно быть, уже не за горами. Typekit, я знаю, что вы работаете с Adobe Creative Cloud, чтобы обеспечить синхронизацию с декстопными шрифтами. Я только что протестировала сервис, и счастлива доложить, что он работает как по волшебству! (Ладно, мой старенький ноутбук Mac ведет себя как черепаха во время работы Creative Cloud – но я ведь могу его выключить, пока не использую.)

Я была цинична насчет уже функционирующих сервисов синхронизации шрифтов. Я использую CS6 и бесплатный Creative Cloud. Вы обещали, что он будет работать с платным Typekit (который у меня уже есть), и он работает! Шрифты остаются синхронизированными даже тогда, когда я работаю офлайн. Это дает отличные возможности.

Я знаю, что вы заняты, поэтому не буду затягивать.

Еще одно событие должно случиться, чтобы вывести веб-дизайн на новый уровень, и только вы можете это сделать. Вы должны удовлетворить нужды людей, которые уже выбирают и используют ваши шрифты – веб-дизайнеров. Уверена, мы все можем работать над этим вместе. Что касается меня, я использую специальную страницу-образец для тестирования интересных мне шрифтов. После того, как я сужаю выбор, я самостоятельно тестирую шрифты в разных браузерах. Несколько часов спустя, если хотя бы один из шрифтов работает так, как мне нужно, я могу идти сразу в HTML и CSS от карандашного наброска и избежать использования «черновых» шрифтов.

Но возникает вопрос:

«Почему мы должны проработать эти детали?»

(Все веб-дизайнеры, которые любят использовать новые шрифты, повторяйте за мной: «Почему?»)

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

Если важно добиться, чтобы у веб-дизайнеров был обширный выбор веб-шрифтов, почему не считается важным показать, как на самом деле шрифты работают?

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

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

Осмелюсь сказать, вы заслужите расположение каждого веб-дизайнера, который когда-либо взирал на тысячи вариантов шрифтов и восклицал: «Черт побери, какой же мне выбрать?!»

Искренне ваша, Лора

Автор статьи — Laura Franz.

Оригинал статьи Dear Web Font Providers на сайте www.smashingmagazine.com.

Перевод — Анна Данилова для Adventum.