Типографика сайта как правильно оформить текст контента

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

Типографика сайта — это умение работать с текстом: от набора к верстке. Поэтому знание этих основ пригодится всем, кто каким-то образом взаимодействует с контентом. Почему это важно? Нарушение правил форматирования затрудняет восприятие информации, что отрицательно сказывается на эффективности работы ресурса. Есть и другие причины:

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

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

Работа со шрифтами.

работа с шрифтами

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

  • кегль — высота букв;
  • кернинг — интервалы между буквами;
  • интерлиньяж — расстояние между строками.

Этими терминами активно жонглируют верстальщики, но их все равно нужно знать.

Использовать засечки или нет?

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

Как оформлять заголовки?

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

Использовать КАПСЛОКА запрещается, так как в этом случае пользователь воспринимает написанное вместо изображения и не углубляется в суть. Зато допускается применение различных цветов.

Выравниваем тексты: по центру или по краю?

анатомия типографики сайта

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

Какой выбрать цвет?

какой выбрать цвет

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

Выбираем кавычки.

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

Разберитесь с тире и дефисом.

Еще один проблемный пункт. Некоторые пользуется только одним из этих символов, хотя между ними есть разница. Запомните следующее: тире — это длинная черта, которая используется в пределах предложения, дефис — короткая черта, она используется только в пределах слова.

Использование общего стиля для одинаковых элементов.

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

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