Разработка типографики для сайта

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

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

Начинайте с контентной типографики

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

Задумайтесь о размере (кегле) шрифта. Нет оптимального размера, поскольку каждый шрифт индивидуален, но приблизительно стоит ориентироваться на значение 14–18. Шрифт не должен быть меньше 12 пикселей.

Выбор шрифта для заголовков

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

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

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

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

Немаловажные составляющие типографики

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

2. Цвет текста делается контрастным по отношению к фону. Его должно быть четко видно, и он не должен сливаться с текстурой. Но не стоит шрифт делать слишком контрастным, ведь таким образом, создается дополнительная нагрузка на текст. Идеальное сочетание светлого фона/темного шрифта и наоборот. Можно сделать цветовое выделение важной информации, но не нужно использовать красный и зеленый цвет (люди с дальтонизмом плохо различают эти цвета), а также выделять весь текст (отвлекает от чтения).

3. Для комфортного чтения важен не только правильный шрифт, но и важно задать оптимальную длину строки. Короткие и слишком длинные снижают скорость чтения. Наиболее подходящее значение от 45 до 80 символов. Если не получается сделать такую строчку, то можно сделать разбивку на две колонки или выбрать узкий шрифт.

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

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

Отображение шрифта

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

Чтобы избежать подобных ситуаций рекомендуется выбор шрифта останавливать на сайтах fonts.google.com и webfont.ru. Можно еще превратить текст в изображение, но так делать не нужно.

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