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

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

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

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

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

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

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

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

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

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

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

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

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

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