Чек-лист по типографике и текстам в веб-дизайне

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

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

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

Давайте разберем ряд принципов и особенностей типографики в веб-дизайне, которые влияют на восприятие информации.

Шрифты

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

В прошлом использовались в основном так называемые безопасные шрифты но с развитием css появилась возможность подключить любой шрифт к сайту с помощью правила @font-face.

Шрифт и гарнитура

Стоит в первую очередь дать определения, что такое шрифт и что такое гарнитура.

Шрифт – графическое начертание букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка.

К примеру:

• Open Sans Light – шрифт
• Open Sans Regular – шрифт
• Open Sans Bold – шрифт

Гарнитура – это группа шрифтов разных видов, кеглей, имеющих одинаковое начертание, единый стиль и оформление.

К примеру:

• Open Sans Light
• Open Sans Light Italic
• Open Sans Regular
• Open Sans Regular Italic
• Open Sans Semi-Bold
• Open Sans Semi-Bold Italic
• Open Sans Bold
• Open Sans Bold Italic
• Open Sans Extra-Bold
• Open Sans Extra-Bold Italic

Все эти отдельные шрифты и есть гарнитура.

Подбирайте хорошие пары

Отнеситесь со всей серьезностью к шрифтам (подберите 2 шрифта, которые будут гармонично сочетаться друг с другом). Один для заголовка, а второй для основного текста. Заголовок должен контрастировать на фоне основного текста, но не должен быть огромным или слишком маленьким. Для создания гармоничной шрифтовой пары используйте шрифты (Антикву в сочетание с Гротеском), подберите размер шрифтов, используйте начертание (italic, bold, regular), а также задействуйте цвет.

Ограничьте количество шрифтов

Используйте на сайте не более 3 шрифтов (1 для заголовков, 2 для цитат и 3 для основного текста).

Не используйте декоративные шрифты

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

Не декорируйте шрифты

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

Не злоупотребляйте заглавными

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

Размеры шрифтов

1. Используйте при разработке макета шрифты только с кеглем целого числа (16пт, 18пт, 22пт и так далее). Не используйте кегель ( 15,5пт, 16,8пт и прочие).
2. Не стоит делать заголовки гигантскими, а контент мелким (минимум лучше использовать не менее 12px).
3. Для обычного текста применяйте шрифт размером 14–18px.
4. При выборе размера шрифта не забудьте про адаптивность.
5. Заголовки делайте разного размера, чтобы была видна иерархия.

Деформация шрифтов

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

Акценты

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

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

Оформление ссылок

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

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

Трекинг – изменение межбуквенных пробелов в словах, строках и абзацах.

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

Кернинг – избирательное изменение расстояния между каждой конкретной буквенной парой с целью улучшения удобства чтения и внешнего вида.

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

Выравнивание текстов

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

Также довольно часто используется и выравнивание по центру, в основном используется для заголовков, и текстов поясняющих заголовок, часто можно увидеть на landing page. Причем, таким образом, выравнивают текст не более чем в три — пять строк.

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

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

Контраст и читабельность

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

Отступы

Не следует делать больших отступов между заголовками и связанным с ним абзацем.

Используйте межстрочный интервал для лучшего чтения текстов (используйте оптимальный межстрочный интервал, не стоит его делать маленьким и уж точно не стоит его делать огромным). Используйте значения в интервале 1.4 — 1.6 раза больше размера шрифта.

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

Длина строки

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

Висячая пунктуация

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

Вдовы и Сироты

Этими понятиями обычно обозначают слова стоящие отдельно на одной строке в блоке с текстом. Слово стоящее одно на строке в начале блока называется сиротой. Слово стоящее на отдельной строке в конце блока называется вдовой.

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

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

• Попробовать отрегулировать ширину контейнера в котором располагается текст;
• Изменить размер шрифта;
• Изменить сам текст, удалив его часть или добавив слова;
• Использовать кернинг или трекинг для текста.

О текстах рыбе в дизайне

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

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

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

Почему это важно? Давайте рассмотрим несколько причин:
1.Текст рыба, написанная с использованием Lorem ipsum зачастую не дает должного представления о тексте и какую информацию он несет, дополняя иконку или картинку.

2.Большая ошибка использование при разработке русскоязычного макета английских шрифтов. Так как литера (буква) у латиницы и кириллицы отличаются по ширине.

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

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