Дыхание

Хорошие, плохие и отличные примеры веб-типографики. Хорошие, плохие и отличные примеры веб-типографики Красивая типографика

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

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

Итак, сегодня, мы проигнорируем модные тренды, сфокусируемся на теории типографики, и на том, как «правила» могут помочь нам в создании красивых текстов.

Размер и иерархия

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

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

Трекинг и кернинг

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

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

Ограничьте количество применяемых стилей начертания

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

Смешивайте и сравнивайте стили

Я рекомендую выбрать два разных стиля. Самая распространенная пара — serif и sans serif. Соединяя различные стили и начертания, ищите буквы с одинаковой высотой и формой чаш (пространство внутри замкнутых букв, таких, как «о»).

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

Переносы и выключка

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

Не изменяйте шрифты

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

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

Если шрифт вас не устраивает, то поищите что-нибудь другое. Воспользуйтесь Identifont similar font tool , инструментом, который определяет похожие шрифты.

Контраст

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

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

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

Формат полосы набора

Формат полосы набора – это размер содержащего текст контейнера. Это может быть ширина всего текстового фрейма, или единственной колонки.

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

Из The Elements of Typographic Style : «Любое количество символов, в пределах от 45 до 75, рассматривается как удовлетворительная длина строки для одноколонного набора. 66-символьная строка (включая буквы и пробелы) считается идеальной. Для многоколонного набора, идеальным средним вариантом будет строка, длинной 40-50 символов».

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

Перевод статьи Кэрри Казинс

Куратор ресурса о шрифтах Typewolf Джереми Шоаф выбрал примеры сайтов с интересными шрифтовыми решениями и описал их преимущества и недостатки.

В сочетании с тонкой бумажной текстурой данная типографика создаёт ощущение, будто читаешь книгу.

Simply Gum

Спасибо веб-шрифтам, помогающим подогнать типографику упаковки продукта к типографике сайта производителя. Это происходит всё чаще и чаще. Сайт Simply Gum выбрал Gotham начертанием своего бренда, что сохраняет идентичность постоянной и на онлайн, и на офлайн каналах.

Этот сайт — хороший пример того, как только одно начертание иногда является единственным нужным. Используя разную насыщенность Gotham и ставя заголовки в верхнем регистре, Simply Gum установил чёткую иерархию всего с одним начертанием.

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

Краткий вывод

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

Если вы собираетесь использовать несколько начертаний, тогда разработайте постоянную систему в конкретной типографике и придерживайтесь её.
Для основного текста выбирайте шрифт с нормальным курсивом, жирным начертанием и полужирным курсивным стилем.
Если собираетесь выбрать популярное начертание, попробуйте сочетать его с менее заезженным, чтобы сделать дизайн отличительным.
Сделайте руководство по стилю в самом начале проекта для гарантии последовательного использования шрифтов среди членов вашей команды.
Используйте контрастные, а не схожие начертания.
Не применяйте экранные шрифты для основного текста. Используйте начертания по назначению.
Не бойтесь использовать только одну семью начертания. Вы можете установить иерархию с помощью разной насыщенности и стиля одной семьи.
Если ваш логотип позволяет, делайте его в SVG для обеспечения чёткости и масштабируемости.

Этот список составлен по итогам II кв. 2008 года. Предыдущие «хит-парады» можно найти и .

Каждый пример сопровождается кратким комментарием, а нажатие на скриншот ведёт на оригинальный сайт.

Seed Conference

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

Designing the News

Большой контраст между заголовком и основным контентом, много чистого места и хорошая организация.

OmniTI

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

Designr.it

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

Design View

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

WordPress.org & WP 2.5.x Admin

Хотя блоггерская платформа WordPress не основана на веб-сайте, но их сайт отображается на тысячах, если не миллионах, наших экранов каждый день. Хотелось бы, чтобы как можно больше онлайновых и офлайновых приложений выглядели так же хорошо.

OurType

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

The Deck

Ещё один сайт, который основан просто на шрифтах во всём. Отличный пример иерархии и разметки. Кто сказал, что «фотография говорит больше тысячи слов»? Нет, шрифт говорит лучше.