Как с помощью типографики улучшить сайт
28 октября 2021
Автор: RANX
Хотите сделать скучный текст ярким и запоминающимся? Чтобы он захватил внимание пользователей с первых секунд? В этом поможет типографика.
Как - расскажем ниже, а еще приведем примеры использования правил типографики в оформлении сайтов на нашем собственном конструкторе RANX: Creator.
Зачем нужна типографика?
С помощью типографики можно оформить текст так, чтобы читать его было легко.
Если вы хотите акцентировать внимание пользователей на какой-то информации, в этом тоже поможет типографика: структурируйте текст заголовками, подзаголовками и списками, правильно подбирайте шрифты, отступы и цветовую гамму.
Хорошая типографика может улучшить коммуникацию с клиентом и мотивировать его на целевое действие, что в свою очередь повлияет на конверсию и продажи.
Как с помощью типографики улучшить сайт?
Рассказываем, на что обратить внимание при оформлении текста и графических элементов.
Грамотное сочетание шрифтов
Шрифты отличаются по размеру, стилю и даже настроению: одни придают тексту динамики, другие - наоборот. Сочетание нескольких шрифтов может создать впечатление разрозненности, отсутствия структуры. Поэтому придерживайтесь принципа: чем меньше, тем лучше. В идеале - 1-2 шрифта. И убедитесь, что они сочетаются.
Вы легко сможете найти свой идеальный шрифт на RANX: Creator: тестируйте разные варианты и совмещайте их между собой в режиме реального времени, без перехода в административную панель.
Стандартные шрифты
Тексты, написанные классическими шрифтами, воспринимаются легче, так как привычны для пользователей. На RANX: Creator можно найти некоторые из них в базовых настройках.
Примеры классических шрифтов: Open Sans, Roboto, Montserrat, Verdana, Georgia. Старайтесь работать именно с ними. Исключение - когда заказчик просит в оформлении сайта использовать фирменный шрифт своей компании.
Шрифты, хорошо читаемые в любом размере
Учитывайте, что люди будут просматривать ваш сайт с устройств с различным разрешением экрана. Поэтому используйте шрифт, который будет хорошо читаться в любом размере.
Длина строки
Длина строки должна быть такой, чтобы читать было комфортно. Если строка будет слишком длинной, читателю придется долго фокусироваться на написанном. Если короткой - наоборот, он не сможет сосредоточиться. Подбирайте оптимальное количество знаков в строке. Стандартно 60-80 знаков - для страницы на ПК, 30-40 - для мобильной версии.
Иерархия
Разделяйте текст на абзацы - каждому своя мысль.
Структурируйте страницы: обозначьте заголовки, подзаголовки и основной текст - это поможет акцентировать внимание на важном:
В RANX: Creator море возможностей для структурирования текста:
Текст, полностью написанный капсом, воспринимать тяжело, поэтому люди его просто пролистывают.
Капс можно использовать в логотипах, названиях, а также на кнопках и в кричащих фразах - как способ привлечь внимание. Есть и другие способы привлечь внимание текстом - поменять начертание на полужирное или курсив.
Межстрочный интервал
Межстрочное расстояние (интерлиньяж) зависит от размера шрифта и длины строки.
Обычно придерживаются правила: чем длиннее строка, тем больше должен быть межстрочный интервал.
Что касается размера шрифта: для лучшей читабельности интервал должен быть ~ на 30% больше высоты знака.
Цвет текста и контраст
Не используйте похожие по гамме цвета для фона и текста, или слишком резкие контрасты.
В RANX: Creator вы можете самостоятельно выбрать цвет фона для блока (любой из палитры) и текста (черный или белый).
Учитывайте, что пользователи будут заходить на ваш сайт с разных устройств, в том числе с ноутбуков и мобильных телефонов. Именно они чаще всего используются в разных условиях, например, на улице при ярком солнце. В этом случае ошибочно подобранные цвета ухудшат восприятие контента, особенно у людей с плохим зрением.
Еще момент: не применяйте цвета для выделения важной информации, особенно красный и зеленый - они плохо воспринимаются людьми, страдающими дальтонизмом.
В RANX: Creator для придания проекту большей индивидуальности вы можете использовать в качестве фона собственные изображения. Главное, следите за тем, чтобы текст не сливался и хорошо читался.
Выравнивание
Оптимально выравнивать текст по левому краю. Остальные варианты (по ширине, центру или правому краю) применяйте осторожно.
В заключение
Типографика нужна любому сайту - она помогает наладить коммуникацию с клиентами, вызвать нужные эмоции, побудить к действию и выделить вашу компанию среди конкурентов.
С RANX: Creator вы можете экспериментировать в свое удовольствие, используя разные шрифты, выбирая цвет фона /текста и сочетая их. А самое главное, не придется тратить много времени, чтобы оформить текст по правилам типографики - решение поможет вам в этом.
Как - расскажем ниже, а еще приведем примеры использования правил типографики в оформлении сайтов на нашем собственном конструкторе RANX: Creator.
Зачем нужна типографика?
С помощью типографики можно оформить текст так, чтобы читать его было легко.
Если вы хотите акцентировать внимание пользователей на какой-то информации, в этом тоже поможет типографика: структурируйте текст заголовками, подзаголовками и списками, правильно подбирайте шрифты, отступы и цветовую гамму.
Хорошая типографика может улучшить коммуникацию с клиентом и мотивировать его на целевое действие, что в свою очередь повлияет на конверсию и продажи.
Как с помощью типографики улучшить сайт?
Рассказываем, на что обратить внимание при оформлении текста и графических элементов.
Грамотное сочетание шрифтов
Шрифты отличаются по размеру, стилю и даже настроению: одни придают тексту динамики, другие - наоборот. Сочетание нескольких шрифтов может создать впечатление разрозненности, отсутствия структуры. Поэтому придерживайтесь принципа: чем меньше, тем лучше. В идеале - 1-2 шрифта. И убедитесь, что они сочетаются.
Вы легко сможете найти свой идеальный шрифт на RANX: Creator: тестируйте разные варианты и совмещайте их между собой в режиме реального времени, без перехода в административную панель.
Стандартные шрифты
Тексты, написанные классическими шрифтами, воспринимаются легче, так как привычны для пользователей. На RANX: Creator можно найти некоторые из них в базовых настройках.
Примеры классических шрифтов: Open Sans, Roboto, Montserrat, Verdana, Georgia. Старайтесь работать именно с ними. Исключение - когда заказчик просит в оформлении сайта использовать фирменный шрифт своей компании.
Шрифты, хорошо читаемые в любом размере
Учитывайте, что люди будут просматривать ваш сайт с устройств с различным разрешением экрана. Поэтому используйте шрифт, который будет хорошо читаться в любом размере.
Длина строки
Длина строки должна быть такой, чтобы читать было комфортно. Если строка будет слишком длинной, читателю придется долго фокусироваться на написанном. Если короткой - наоборот, он не сможет сосредоточиться. Подбирайте оптимальное количество знаков в строке. Стандартно 60-80 знаков - для страницы на ПК, 30-40 - для мобильной версии.
Иерархия
Разделяйте текст на абзацы - каждому своя мысль.
Структурируйте страницы: обозначьте заголовки, подзаголовки и основной текст - это поможет акцентировать внимание на важном:
-
Заголовок - главная составляющая иерархии. Его цель - привлечь внимание. -
С помощью подзаголовка пользователь определяется, стоит ли читать дальше. -
Задача основного текста - донести информацию в полном объеме.
В RANX: Creator море возможностей для структурирования текста:
-
во всех блоках выделены поля для заголовков, подзаголовков и основного текста - вам понадобится минимум времени на построение иерархии; -
в библиотеке есть готовые блоки: Список, Тизеры, Тарифы, Этапы работ - они помогают оформить списки и акцентировать внимание клиентов на важном; -
вы можете экспериментировать и менять местами сами блоки, чтобы найти свою идеальную композицию, которая будет эффективной и удобной для пользователей.
Текст, полностью написанный капсом, воспринимать тяжело, поэтому люди его просто пролистывают.
Капс можно использовать в логотипах, названиях, а также на кнопках и в кричащих фразах - как способ привлечь внимание. Есть и другие способы привлечь внимание текстом - поменять начертание на полужирное или курсив.
Межстрочный интервал
Межстрочное расстояние (интерлиньяж) зависит от размера шрифта и длины строки.
Обычно придерживаются правила: чем длиннее строка, тем больше должен быть межстрочный интервал.
Что касается размера шрифта: для лучшей читабельности интервал должен быть ~ на 30% больше высоты знака.
Цвет текста и контраст
Не используйте похожие по гамме цвета для фона и текста, или слишком резкие контрасты.
В RANX: Creator вы можете самостоятельно выбрать цвет фона для блока (любой из палитры) и текста (черный или белый).
Учитывайте, что пользователи будут заходить на ваш сайт с разных устройств, в том числе с ноутбуков и мобильных телефонов. Именно они чаще всего используются в разных условиях, например, на улице при ярком солнце. В этом случае ошибочно подобранные цвета ухудшат восприятие контента, особенно у людей с плохим зрением.
Еще момент: не применяйте цвета для выделения важной информации, особенно красный и зеленый - они плохо воспринимаются людьми, страдающими дальтонизмом.
В RANX: Creator для придания проекту большей индивидуальности вы можете использовать в качестве фона собственные изображения. Главное, следите за тем, чтобы текст не сливался и хорошо читался.
Выравнивание
Оптимально выравнивать текст по левому краю. Остальные варианты (по ширине, центру или правому краю) применяйте осторожно.
В заключение
Типографика нужна любому сайту - она помогает наладить коммуникацию с клиентами, вызвать нужные эмоции, побудить к действию и выделить вашу компанию среди конкурентов.
С RANX: Creator вы можете экспериментировать в свое удовольствие, используя разные шрифты, выбирая цвет фона /текста и сочетая их. А самое главное, не придется тратить много времени, чтобы оформить текст по правилам типографики - решение поможет вам в этом.
Предлагаем еще прочесть
