Как с помощью типографики улучшить сайт

Как с помощью типографики улучшить сайт
28 октября 2021
Описание


Хотите сделать скучный текст ярким и запоминающимся? Чтобы он захватил внимание пользователей с первых секунд? В этом поможет типографика.
Как - расскажем ниже, а еще приведем примеры использования правил типографики в оформлении сайтов на нашем собственном конструкторе RANX: Creator.


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

Как с помощью типографики улучшить сайт?
Рассказываем, на что обратить внимание при оформлении текста и графических элементов.

Грамотное сочетание шрифтов
Шрифты отличаются по размеру, стилю и даже настроению: одни придают тексту динамики, другие - наоборот. Сочетание нескольких шрифтов может создать впечатление разрозненности, отсутствия структуры. Поэтому придерживайтесь принципа: чем меньше, тем лучше. В идеале - 1-2 шрифта. И убедитесь, что они сочетаются.

Вы легко сможете найти свой идеальный шрифт на RANX: Creator: тестируйте разные варианты и совмещайте их между собой в режиме реального времени, без перехода в административную панель.

Стандартные шрифты
Тексты, написанные классическими шрифтами, воспринимаются легче, так как привычны для пользователей. На RANX: Creator можно найти некоторые из них в базовых настройках.
Примеры классических шрифтов: Open Sans, Roboto, Montserrat, Verdana, Georgia.  Старайтесь работать именно с ними. Исключение - когда заказчик просит в оформлении сайта использовать фирменный шрифт своей компании.

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

Длина строки
Длина строки должна быть такой, чтобы читать было комфортно. Если строка будет слишком длинной, читателю придется долго фокусироваться на написанном. Если короткой - наоборот, он не сможет сосредоточиться. Подбирайте оптимальное количество знаков в строке. Стандартно 60-80 знаков - для страницы на ПК, 30-40 - для мобильной версии.

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

  • Заголовок - главная составляющая иерархии. Его цель - привлечь внимание.

  • С помощью подзаголовка пользователь определяется, стоит ли читать дальше.

  • Задача основного текста - донести информацию в полном объеме.
Структурируйте текст - тогда каждая его часть будет выполнять свою задачу на 100%.

В RANX: Creator море возможностей для структурирования текста:

  • во всех блоках выделены поля для заголовков, подзаголовков и основного текста - вам понадобится минимум времени на построение иерархии;

  • в библиотеке есть готовые блоки: Список, Тизеры, Тарифы, Этапы работ - они помогают оформить списки и акцентировать внимание клиентов на важном;

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

Межстрочный интервал
Межстрочное расстояние (интер­ли­нья­ж) зависит от размера шрифта и длины строки.
Обычно придерживаются правила: чем длин­нее стро­ка, тем боль­ше дол­жен быть межстрочный интервал.  
Что касается размера шрифта: для лучшей читабельности интервал должен быть ~ на 30% больше высоты знака.

Цвет текста и контраст
Не используйте похожие по гамме цвета для фона и текста, или слишком резкие контрасты.
В RANX: Creator вы можете самостоятельно выбрать цвет фона для блока (любой из палитры) и текста (черный или белый).
Учитывайте, что пользователи будут заходить на ваш сайт с разных устройств, в том числе с ноутбуков и мобильных телефонов. Именно они чаще всего используются в разных условиях, например, на улице при ярком солнце. В этом случае ошибочно подобранные цвета  ухудшат восприятие контента, особенно у людей с плохим зрением.
Еще момент: не применяйте цвета для выделения важной информации, особенно красный и зеленый - они плохо воспринимаются людьми, страдающими дальтонизмом.

В RANX: Creator для придания проекту большей индивидуальности вы можете использовать в качестве фона собственные изображения. Главное, следите за тем, чтобы текст не сливался и хорошо читался.

Выравнивание
Оптимально выравнивать текст по левому краю. Остальные варианты (по ширине, центру или правому краю) применяйте осторожно.

В заключение
Типографика нужна любому сайту - она помогает наладить коммуникацию с клиентами, вызвать нужные эмоции, побудить к действию и выделить вашу компанию среди конкурентов.
С RANX: Creator вы можете экспериментировать в свое удовольствие, используя разные шрифты, выбирая цвет фона /текста и сочетая их.  А самое главное, не придется тратить много времени, чтобы оформить текст по правилам типографики - решение поможет вам в этом.

Вам нужна консультация?

Можете связаться с нами удобным удобным способом

Ready.KZ: Готовые сайты