Выбор гарнитур

«В новой компьютерной эре распространение гарнитур и манипуляция над шрифтами демонстрируют собой новый уровень визуального загрязнения, который угрожает нашей культуре. Из тысяч шрифтов на самом деле нужны всего несколько базовых, а всё остальное — мусор.» —Massimo Vignelli

Один из величайших визуальных проектировщиков, Массимо Вигнелли, сделал карьеру с использованием только 6 гарнитур. При этом он произвёл огромное количество работ в графическом дизайне. Для него, огромное количество шрифтов кажутся шумом и загрязнением. Он воспринимал их как отвлекающие — бессмысленные тренды, которые приходят и уходят. Его видение было довольно радикальным, но я думаю, что в чем-то он был прав. Там так много шрифтов, что трудно понять, как отличить хорошее от плохого. И поверьте мне, последнего намного больше, чем первого.

Изображение 1:  6 гарнитур Массимо Вигнелли (Источник: Fontsinuse.com).

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

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

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

Безопасные веб-шрифты не провальны

Времена, когда у нас было всего несколько гарнитур для выбора, остались далеко в прошлом. Я помню, как я постоянно проверял, какие шрифты безопасные для веба, когда я только начал профессионально заниматься дизайном. Их было не так много, но большинство из них я забыл. В большинстве случаев, я просто хотел избавиться от типичного веб-сайта с Times New Roman. Вскоре я начал подключать его всякий раз, когда что-то не работало или я допустил ошибки в CSS. В итоге у меня остался негативный осадок, который помешал мне понять, что Times New Roman — приятная гарнитура. Не думаю, что я вообще когда либо её использовал.

Изображение 2: Две прекрасных гарнитуры, которые ничего не стоят (ноль рублей, ноль килобайт).  

Но я подумайте об этом. Times New Roman и Georgia. Обе — очень приятные гарнитуры с засечками, которые не влияют на время загрузки вашего сайта.  Georgia специально была создана для использования в вебе. Она предназначена для использования на экранах. Она выглядит немного уже и выше, чем Times New Roman. Немного более современной. Вы когда-нибудь использовали эти шрифты? Почему нет? Почему бы не попробовать сейчас?

Изображение 3: Веб-сайт с использованием одной гарнитуры Georgia.

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

Пункты, которые надо учитывать при выборе гарнитуры

Цели

Какая цель вашего текста? Или даже вашего сайта? Это место, куда люди приходят почитать средние или длинные статьи? Или сайт, где большинство людей хотят быстро просканировать контент в поиске чего-то конкретного?

Текст

Этот наиболее важный шаг все пропускают или практически полностью игнорируют. Так много веб-дизайнеров, которые проектируют симпатичные картинки веб-сайта в их идеальных формах.  Большинство из них до сих пор используют Lorem Ipsum в качестве шаблона текста. Вместо этого, разберитесь, о чем этот сайт. Какой тип информации будет публиковаться? Новости? Посты для блога? Поэмы? Эссе? Возьмите несколько примеров контента. Это важно. Как выбранная вами гарнитура раскроет содержание информации на сайте, которую вы даже не прочитали? На этом моменте вы вероятно думаете «прочитать это»? Да, прочитать это. «Но у меня нет времени, мне нужно отрисовать страницы, написать строки кода. Надо успеть к дедлайнам».  Оправдания. Вы никогда не научитесь выбирать гарнитуры, если игнорируете контент. Что автор пытается передать? Не проектируйте без контента. Не используйте текстовые заглушки. В крайнем случае, найдите что-то подобное в интернете и используйте похожий контент.

Гарнитура

Что вы сделаете после? Какой контент на сайте? Какая гарнитура дополнит контент наиболее объективным способом? Кто и как будет читать этот текст? Чего ожидает читатель? Будет ли хорошо выглядеть современный геометрический шрифт без засечек? Или стоит вместо него использовать современный с засечками?

Основной текст или заголовки

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

Вес и стиль

Идёт ли гарнитура с базовыми весами и стилями? Жирный, курсивы, и жирный курсив? Есть ли еще какие-то веса? Некоторые гарнитуры имеют нумерацию весов и стилей и обычно называются рабочими гарнитурами. Даже если работаете с такими, используйте только несколько весов. Двух или трёх будет достаточно. Некоторые гарнитуры идут только с одним весом и стилем. Я рекомендую избегать таких. Они слишком вас ограничивают.

Размер шрифта в килобайтах

Это зависит от всех рассмотренных выше идей. Некоторые гарнитуры будут весить больше, чем другие. Гарнитуры с засечками обычно весят больше кб, чем без засечек. Некоторые жирные стили насыщеннее, чем другие, что, опять-таки, отражается на размере в кб. Также как и количество весов, которые вы хотите использовать. Я стараюсь избегать использования жирного курсива, поэтому я обычно экономлю несколько килобайт за счет исключения таких стилей.

Особенности Opentype и языковая поддержка

Я рассматриваю особенности Opentype в качестве бонуса. Если есть две гарнитуры, среди которых я выбираю и одна из них поддерживает особенности Opentype, а другая — нет, то я выберу первую. Не все гарнитуры поддерживают эти особенности, и даже те, что поддерживают, не всегда используют все особенности. Мы рассмотрим особенности Opentype на следующих стадиях курса.

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

Изображение 4: Poligon.si использует шрифт без требуемых букв č, š и ž.

Отображение гарнитур

Не смотрите на гарнитуры в Фотошопе, Скетче или других дизайнерских инструментах. Ваш контент не появится там. Он будет показываться как часть веб-сайта в веб-браузере. Нескольких браузерах, если быть точным. Проверьте вашу гарнитуру в разных размерах, цветах и браузерах. У каждого их них свои способы рендеринга шрифтов (Firefox известен тем, что рендерит все шрифты чуточку тяжелее, чем остальные). Также проверьте их на разных операционных системах. Не просто проектируйте стильно выглядящий дизайн  сайта на вашем макбуке с ретиной и не принимайте решения на основании этого. Проверьте, как всё выглядит на Windows и других экранах.

Запомните: если вы не знаете, как вставить ваш текст в HTML и применить к нему CSS, вам нужно сделать предпросмотр гарнитуры на сайте поставщика шрифта. В худшем случае, используйте плагин Font Changer, представленный ниже. Найдите вебсайт с достойной типографикой (я рекомендую Web Font Specimen) и выберите шрифт, который вы хотите использовать.

Упражнение

Теперь, когда вы изучили анатомию гарнитур и способ их выбора, время изучить интернет. Установите  плагин What Font или Fontface Ninja. Всякий раз, когда вы натыкаетесь на понравившийся шрифт на веб-сайте, изучите его. Проверьте, какой шрифт использует сайт, какого размера, высоту линии и вес/стиль.

Смотрите также

Инструмент: Font Changer with Google Fonts

Инструмент: Web Font Specimen

Статья: Massimo Vignelli’s 6 typefaces

— Статья: FOUT, FOIT, FOFT

— Видео: Times New Roman

Уроки

1/10 — Введение в типографику

2/10 — Равносторонний треугольник идеального абзаца

3/10 — Анатомия гарнитуры

5/10 — Сочетание гарнитур

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

По материалам https://betterwebtype.com/