Типографика сайта

Улучшаем типографику на вашем сайте

Типографика сайта
Типографика сайта

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

 
Итак, начнем: 


1. ШРИФТ 

Выбор шрифта — один из самых важных моментов в типографике. Шрифт должен соответствовать содержанию текста и быть уместным. Также лучше всего выбирать хорошо читаемый и четкий шрифт. Для заголовков можно использовать и декоративные шрифты, но для основного текста лучше всего остановится на Helvetica, Lato или Open Sans. 


2. КАЛИБР

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

 
3. СОПОДЧИНЕННОСТЬ

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

4. ФОКУС 

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


5. ДЛИНА СТРОКИ

Если длина строки будет слишком короткой — текст становится непонятным, а если слишком длинным — то трудно читаемым. Обычно длина строки варьируется между 40-80 символами. Золотая середина, то что нам нужно, будет равна 65 символам. 


6. МЕЖСТРОЧНОЕ РАССТОЯНИЕ

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


7. ВЫРАВНИВАНИЕ

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


8. КОНТРАСТ И ЦВЕТ

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

 
9. «ВОЗДУХ» 

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

 

 

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