Ваш отдел интернет-маркетинга на аутсорсе
Работаем по KPI на продажи
05 июля 2019

Правила типографики в вебе

Как офор­мить текст, что­бы его читали

ДизайнСайтыФирменный стиль
Декоративное изображение

Что такое типографика

Типо­гра­фи­ка (от греч. τύπος — отпе­ча­ток + γράφω — пишу) — искус­ство оформ­ле­ния при помо­щи набор­но­го (не рисо­ван­но­го) тек­ста, бази­ру­ю­ще­е­ся на опре­де­лён­ных, при­су­щих кон­крет­но­му язы­ку пра­ви­лах, посред­ством набо­ра и вёрстки.

А если про­ще – это свод пра­вил о том, как пра­виль­но исполь­зо­вать бук­вы, сло­ва, пред­ло­же­ния и фор­ма­ти­ро­ва­ние, что­бы текст был удо­бен для вос­при­я­тия. Более 95% инфор­ма­ции в интер­не­те пред­став­ле­но в виде тек­ста. Хоро­шая типо­гра­фи­ка дела­ет текст лег­ко­чи­та­е­мым, а текст с пло­хой типо­гра­фи­кой, ско­рее все­го, не про­чи­та­ют вообще.

К сча­стью, в веб-дизайне суще­ству­ют чет­кие пра­ви­ла, сле­дуя кото­рым, кон­тент мож­но сде­лать ком­форт­ным для восприятия.

Правила типографики

Минимализм прекрасен - описательное изображение

Минимализм прекрасен

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

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

Стандартные шрифты Google Fonts

На сего­дняш­ний день во всех совре­мен­ных бра­у­зе­рах под­дер­жи­ва­ют­ся веб-шриф­ты. Это зна­чит, что вы може­те исполь­зо­вать любой шрифт, доступ­ный на сай­тах Google Fonts или Typekit.

 

Преимущества этого очевидны:

 

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

автор­ских прав

Эко­но­мия во времени При верст­ке шриф­ты добав­ля­ют­ся на сайт с помо­щью одной стро­ки кода
Уни­фи­ка­ция Шриф­ты сов­ме­сти­мы со все­ми новы­ми вер­си­я­ми веб-бра­у­зе­ров и опти­ми­зи­ро­ва­ны для SEO

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

Короче — не значит хуже 

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

Хоро­ший и пра­виль­ный ритм тек­ста таков: для поли­гра­фии это 45–75 зна­ков, для веб-верст­ки – 50–65 зна­ков в стро­ке. Для мобиль­ных устройств за осно­ву при­ня­ты 30–40 сим­во­лов в строке.

Размер имеет значение

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

Мы любим дарить подарки!

Все способы получить клиентов из интернета: список из 30 каналов продаж в интернете с кратким описанием каждого.

Выделяем главное

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

 

Вместе тесно, а врозь скучно - описательное изображение

Вместе тесно, а врозь скучно

Что­бы сде­лать блок тек­ста более удоб­ным для чте­ния, уста­нав­ли­ва­ют рас­сто­я­ние меж­ду стро­ка­ми 120 — 145% от раз­ме­ров бук­вы. Так стро­ки не будут сли­вать­ся, взгляд не будет пере­ска­ки­вать с одной стро­ки на другую.

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

Цветик — не семицветик

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

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

 

 

Одних букв мало - описательное изображение

Одних букв мало

Руко­вод­ство­вать­ся пра­ви­ла­ми типо­гра­фи­ки — усло­вие обя­за­тель­ное, но недо­ста­точ­ное.  Не забы­вай­те “раз­бав­лять” текст изоб­ра­же­ни­я­ми. Это может быть гра­фи­че­ский кон­тент, фото­гра­фии, гра­фи­ки и диа­грам­мы. Это зна­чи­тель­но облег­ча­ет вос­при­я­тие инфор­ма­ции, пере­клю­чая вни­ма­ние читателя.

Чек-лист по оформлению текстов на сайте

Ну, и напо­сле­док, неко­то­рые шаги, по кото­рым вы може­те про­ве­рить и испра­вить свои тексты:

 

Слиш­ком малень­кий размер
шрифта
  • Вы долж­ны скон­цен­три­ро­вать­ся, что­бы про­чи­тать текст
  • Вы долж­ны прищуриться
  • У вас есть жела­ние уве­ли­чить масштаб
Слиш­ком боль­шой раз­мер шрифта
  • Вы начи­на­е­те заме­чать бук­вен­ные фор­мы вме­сто чте­ния содержимого
  • Вы може­те читать толь­ко от одно­го до трех слов за раз
  • У вас есть жела­ние умень­шить масштаб
Слиш­ком длин­ная строка
  • Вы долж­ны повер­нуть голо­ву, что­бы про­чи­тать текст
  • Вы теря­е­те кон­цен­тра­цию по пути к кон­цу строки
Слиш­ком корот­кая строка
  • Вы испы­ты­ва­е­те раз­дра­же­ние, когда текст пере­хо­дит на сле­ду­ю­щую строку
  • Ваши гла­за уста­ют от часто­го пере­ме­ще­ния взгля­да вле­во и вправо
Слиш­ком малень­кий межстрочный
интервал
  • Текст кажет­ся плот­ным и подавляющим
  • При чте­нии вы пере­хо­ди­те на непра­виль­ную стро­ку текста
Слиш­ком боль­шой межстрочный
интервал
  • Вы отвле­ка­е­тесь на про­бел меж­ду строками

 

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

Кейсы

Молодежный проект
«Инициативы Ямала»


Авто­ма­ти­за­ция 4 500 заявок

Подробнее Молодежный проект<br>«Инициативы Ямала»

Онлайн доставка
молочных продуктов
«Золотые луга»


Рост про­даж в 8 раз
Подробнее Онлайн доставка<br>молочных продуктов<br>«Золотые луга»

Ресторан баварской кухни
Brezelino


Выве­ли в онлайн

Поток зака­зов вырос с 10 до 40 в день

Подробнее Ресторан баварской кухни <br> Brezelino

Семейный гриль-ресторан Rancho


Запол­ня­е­мость ресто­ра­на вырос­ла на 20%

Подробнее Семейный гриль-ресторан Rancho

Интернет-магазин подарочных наборов
для детей Play Plan Box


Объ­ем про­даж вырос в 7 раз

Цена при­вле­че­ния кли­ен­та сни­же­на в 2 раза
Подробнее Интернет-магазин подарочных наборов <br> для детей Play Plan Box
Портфолио

Статьи и полезные материалы

Как рассчитать бюджет для теста канала продвижения
19 ноября 2021

Как рассчитать бюджет для теста канала продвижения

Какой объ­ем средств от при­бы­ли вы гото­вы тра­тить на при­вле­че­ние кли­ен­тов ежемесячно?

ВебвизорСайты
Ошибки при анализе сайта через вебвизор
15 июня 2021

Ошибки при анализе сайта через вебвизор

О раз­ра­бот­ке кон­цеп­ции сайта

ВебвизорДизайнСайты
Видеоконтент — не тренд, а необходимость. Пожалуй, это навсегда!
27 февраля 2021

Видеоконтент — не тренд, а необходимость. Пожалуй, это навсегда!

Как ани­ма­ция и видео­кон­тент повы­ша­ют кон­вер­сию сайта 

SMMПривлечение клиентов
Памятка по запуску продвижения в соцсетях
24 декабря 2020

Памятка по запуску продвижения в соцсетях

Про­дви­же­ние биз­не­са в соц­се­тях – поша­го­вая инструкция

SMM
SMM-маркетинг служб доставки пиццы и суши
7 сентября 2020

SMM-маркетинг служб доставки пиццы и суши

Про­дви­же­ние ресто­ра­нов: наше иссле­до­ва­ние мар­ке­тин­га служб достав­ки еды

SMMДизайнПривлечение клиентов
Что такое верстка сайта?
8 апреля 2020

Что такое верстка сайта?

Основ­ные кри­те­рии каче­ства верст­ки сайта

РазработкаСайты

Все статьи

Все сложно и непонятно?

Закажите обратный звонок — мы позвоним и все объясним