Шрифты и типографика
в веб-дизайне

Важный элемент дизайна,
о котором многие забывают.

Больше, чем просто шрифты

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

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

Основы типографики

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

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

Правильно подобранные шрифты — это первый столп грамотной типографики;

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

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

Итак, пропорция в кегле, интерлиньяже и кернинге — это столп типографики номер 2;

Длина строки. Мы привыкли, что в книгах длина строки равна примерно 90% от ширины страницы, а в интернете все иначе. На каких-то сайтах текст представлен в удобной форме (так, чтобы глаза не бегали из угла в угол), а на других сайтах ширина строки такая, что приходится даже перематывать ползунок в сторону, чтобы прочитать весь текст. Так вот. Для веб-дизайна (опытным путем выведена золотая длина строки) эта величина равна 600 px, при условии, что шрифт текста 14-18 px.

Простой пример, как все меняется, если уменьшить длину строки: в журналах текст располагается либо узкими островками, либо в колонках. Благодаря такому нехитрому приему, чтение ускоряется в 1,5 — 2 раза. Секрет в том, что глаза минимально двигаются по горизонтали и не сбиваются со строчек.

Длина строки — столп номер 3;

Немного грустный 4 столп — масса законов и правил типографики, которые Вы должны изучить самостоятельно. В одной статье не получится уложить все постулаты, но этого и не нужно. Ведь единственный достоверный способ понять типографику — это постепенное изучение различных источников (например, работы Артемия Лебедева) с одновременной отработкой на практике. Если вам больше нравится обучение с наставниками, а не по учебникам, то на просторах рунета есть масса годных профессионалов, которые создали свои курсы и уроки типографики.

Почему важна типографика в вебе

Сайты — это большие и маленькие полотна текста, разбитые периодическими вставками изображений и видео. Грамотное оформление текста дает уверенность в том, что клиент не убежит сразу после того, как прогрузится страница, а останется читать. За счет типографики можно сделать информацию не просто удобной, но и внятной — добавить разделение информации по смыслу, по функционалу, по важности и т.п.

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

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

😊 Итоги

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

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

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