Отличный веб-сайт начинается с красивой типографики. И хотя какие-то правила нарушить можно, иногда, правильно будет вернуться к основным принципам того, что представляет из себя хорошая типографика, и как ее создавать.
Это напоминание поможет вам свежим взглядом посмотреть на свои проекты, подумать о новых подходах, или вернуться к более простому дизайну.
Итак, сегодня, мы проигнорируем модные тренды, сфокусируемся на теории типографики, и на том, как «правила» могут помочь нам в создании красивых текстов.
Размер и иерархия
Размер имеет значение. Для создания удобочитаемой типографики, он может оказаться решающим фактором. Мелкий текст сложно рассмотреть, не то что прочитать, а слишком крупный, будет превышать высоту строки и приводить к путанице.
Удобочитаемая типографика имеет несколько слоев иерархии. Эти слои подсказывают пользователю, что нужно читать в первую, во вторую, и в третью очередь. Также, существует очевидная иерархия в размерах текста – один размер у заголовков, другой, у основного текста, и третий у подзаголовков.
Трекинг и кернинг
Трекинг и кернинг часто путают. Кернинг – это избирательное изменение интервала между буквами в зависимости от их формы. Трекинг – это изменение интервала между наборами букв, т.е., параграфами, или всем блоком текста.
Кернинг часто применяется к конкретным элементам для создания четкости, улучшения удобочитаемости, и, даже, для стилизации больших отрывков текста. Трекинг, часто используется для сужения слишком широкого шрифта основного текста.
Ограничьте количество применяемых стилей начертания
Для большинства проектов хватит двух-трех стилей. Чтобы не ошибиться в выборе, найдите семейство шрифтов с большим количеством доступных вариаций начертания. Самые качественные шрифты имеют большое разнообразие стилей — жирный, обычный, курсив, конденсированный, черный и т. д.
Смешивайте и сравнивайте стили
Я рекомендую выбрать два разных стиля. Самая распространенная пара — serif и sans serif. Соединяя различные стили и начертания, ищите буквы с одинаковой высотой и формой чаш (пространство внутри замкнутых букв, таких, как «о»).
Эти небольшие детали значительно повлияют на то, как эти шрифты будут смотреться вместе, и на удобство чтения текста.
Переносы и выключка
В большинстве случаев, переносы строк и выключка не нужны. В случае с онлайн текстом, эти техники только усложняют быстрое его усвоение и понимание. Переносы мешают чтению, а полная выключка часто приводит к нечитабельному форматированию.
Не изменяйте шрифты
Никогда не меняйте шрифт. Не пытайтесь сделать его толще, тоньше, или выше. Лучше выберите другой.
Дизайнеры, занимающиеся разработкой шрифтов, тратят много времени на то, чтобы этот шрифт был удобочитаем, и удовлетворял требованиям стиля. Не нужно ничего менять. Вы не сможете его улучшить, а в большинстве случаев только всё испортите.
Если шрифт вас не устраивает, то поищите что-нибудь другое. Воспользуйтесь Identifont similar font tool, инструментом, который определяет похожие шрифты.
Контраст
Используйте типографику для создания контраста. Также, как для создания иерархии вы используете разные размеры, создайте визуальный интерес, изменив вес, цвет, и стиль шрифта.
Цвет – это один из самых эффективных и простых способов создания контраста. Идеальный контраст – темный текст на светлом фоне (или наоборот). У вас есть почти безграничный набор цветов, который поможет вам достичь этой цели. Играя с цветом и типографикой, имейте ввиду, что некоторые цветовые комбинации, например, ярко-красный на ярко-голубом, могут быть довольно трудночитаемы.
Когда речь идет о контрасте, для создания удобочитаемого текста лучше всего использовать простой фон. Но если он содержит такие визуальные элементы, как изображения или узоры, то увеличьте размер букв – это создаст разделение между фоном, и текстовыми элементами переднего плана.
Формат полосы набора
Формат полосы набора – это размер содержащего текст контейнера. Это может быть ширина всего текстового фрейма, или единственной колонки.
Формат строки имеет значение потому, что количество символов (включая пробелы, особые символы, и знаки препинания) на экране, влияют на удобочитаемость. Если строки слишком длинные или слишком короткие, взгляду пользователя будет сложно по ним перемещаться.
Из The Elements of Typographic Style: «Любое количество символов, в пределах от 45 до 75, рассматривается как удовлетворительная длина строки для одноколонного набора. 66-символьная строка (включая буквы и пробелы) считается идеальной. Для многоколонного набора, идеальным средним вариантом будет строка, длинной 40-50 символов».
Даже несмотря на то, что на момент издания этой книги никто не думал о мобильной типографике, рекомендация, касающаяся многоколонного набора, не потеряла свою актуальность. В случаях с маленькими экранами, можно, даже, использовать 35 символов на строку.
Перевод статьи Кэрри Казинс