Работаем по всей России
+7 (499) 705-30-10Заказать сайт
Заказать сайт
Подписаться
Поделиться
Подписаться

Эволюция веб-типографики и ее влияние на читаемость сайта

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

История типографики

Для начала предлагаем узнать, откуда растут ноги этого явления. А началось все задолго до появления первого компьютера. Истоками типографики можно назвать изобретение печатного станка Иоганном Гутенбергом примерно в 1440 году. Печатный станок позволил создавать книги массово, быстро и, что главное, одинаково качественно. Гутенберг разработал и первый шрифт, который теперь известен как «гутенбергская готика». Это был толстый, тяжелый шрифт, который идеально подходил для первых печатных книг.

gutenberg_gothic_font_preview_characters

Со временем шрифты становились все более разнообразными. В Италии возникла антиква — новый стиль шрифта с более тонкими и ровными линиями, а в VII веке был изобретен курсив. Рост количества печатной продукции привел к тому, что типографы начали активно экспериментировать. В VIII веке появились такие известные шрифты, как Bodoni и Didot, которые отличаются большим контрастом между толстыми и тонкими линиями.

image6

Промышленная революция привнесла свои изменения, и типографика стала еще доступнее благодаря механизированному производству бумаги и печати. Многие шрифты, которые современные дизайнеры считают практически совершенными, относятся к термину «швейцарская типографика». Например, к ним относятся Helvetica и Univers. А ведь со шрифтами этого стиля стали экспериментировать художники школы Баухаус ещё до Второй Мировой войны! Тут стоит отметить, что эта школа в принципе стоит у истоков современной типографики: еще тогда были сформулированы основные ее законы.

image3

Современные тенденции веб-типографики

Несмотря на постоянно меняющиеся тренды и огромное количество экспериментов, основной тенденцией веб-типографики остается баланс между стилем и функциональностью. Современные веб-студии прекрасно понимают роль типографики в UX/UI и стараются не жертвовать удобством пользователя ради исключительности дизайна. Типографика, как и остальные элементы веб-дизайна, должна быть не просто украшением вашего интернет-пространства, а помощником в привлечении и удержании посетителей.

На этом месте мы предлагаем закончить с историей и подробнее рассмотреть основные законы современной веб-типографики.

Веб-типографика и визуальная иерархия

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

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

Вот несколько приемов, которые используются в веб-типографике для создания иерархии:

  1. Размер. Самый простой способ создать иерархию — это использовать разные размеры текста. Даже если вы применяете одно и то же семейство шрифтов для заголовков и основного текста, разница в размерах позволит читателю с легкостью сориентироваться.
  2. Начертание шрифта. Жирный шрифт и курсив позволяют акцентировать внимание на определенных частях текста. Здесь важно учитывать, что жирное или полужирное начертание всегда будет заметнее курсива, то есть автоматически встанет выше по иерархии.
  3. Цвет шрифта. В статье про психологию в веб-дизайне мы уже упоминали важность цвета для восприятия пользователем вашего сайта. Цвет помогает не только выстроить иерархию, акцентировав внимание на главном, но понять посыл текста еще до его прочтения. Например, когда посетитель видит красную подсказку при заполнении формы, он сразу понимает, что это сообщение об ошибке.
  4. Использование разных гарнитур. Гарнитурами дизайнеры называют семейства шрифтов, объединенных одним стилем. Например, для заголовков вы выбираете гарнитуру с засечками, а для основного текста — без них.

Для примера давайте посмотрим, как мы выстраиваем иерархию в собственном блоге:

image4

Мы используем одну и ту же гарнитуру, но за счет разного начертания и размера вы сразу можете определить, где заголовок, а где основной текст статьи.

Основные правила хорошей веб-типографики

В последнем по очередности, но не по значимости, разделе мы собрали ключевые правила типографики, которым стоит следовать при создании сайта.

Не используйте большое количество шрифтов

Большое количество гарнитур и/или начертаний на странице приведет к тому, что куски текста будут бороться друг с другом за внимание читателя.

image1

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

Оригинальность не должна мешать читаемости

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

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

image7

Не забывайте про оптимизацию типографики для мобильных устройств

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

image2

Учитывайте контрастность текста и фонов веб-страницы

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

Используйте правильные символы

Начнем с самой распространенной ошибки — неправильных кавычек. В отечественной типографике принято использовать кавычки-елочки «». Кавычки-лапки используются только внутри них. Например, ООО «Строительное бюро “Стройгарант”».

Существует несколько основных способов ставить кавычки-елочки:

  1. С клавиатуры. Alt + 0171 («) и Alt + 0187 (») — для Windows.⌥ Alt + \ («) и ⌥ Alt + Shift + \ (») — для Mac OS X.
  2. При помощи установки типографской раскладки. Самая популярная из них — это типографская раскладка Ильи Бирмана. Вы просто устанавливаете себе на рабочий компьютер и используете более простое сочетание клавиш Alt + Б и Alt + Ю.
  3. При помощи автозамены сервисов. Многие сервисы проверки орфографии подсвечивают неправильные кавычки и предлагают заменить их на корректные.

Еще одна распространенная ошибка — использование дефиса вместо тире. Тире используется между членами предложений, для выделения прямой речи и для указания маршрутов (Санкт-Петербург — Москва). Средняя тире — между числами (3–4 часа). А дефис подходит для разделения в словах (что-нибудь, во-первых).

Получить нужный символ можно все теми же способами:

  1. С клавиатуры. Длинное тире на Windows: удерживайте Alt+0151, среднее: Alt+0150. Длинное тире на MacOS: Option+Shift+-, среднее: Option+-.
  2. При помощи установки типографской раскладки. В раскладке Бирмана это будет Alt плюс -.
  3. При помощи автозамены сервисов. Здесь все аналогично истории с кавычками.

Веб-типографика и SEO

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

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

Успехов в бизнесе!

В избранное
0
1245
Рекомендуем к прочтению
10 правил продающей карточки товара
Карточка товара может быть простым описанием продукции или эффективным маркетинговым инструментом, повышающим ваши продажи. Мы выбираем последнее! И сегодня расскажем вам, как сделать действительно продающие карточки.
Контент-маркетинг и веб-разработка: создание контента для роста органического трафика
Сегодня поговорим про создание контента, который любят краулеры поисковых систем. Соблюдение всего нескольких основных принципов поможет вам увеличить посещаемость сайта без покупки рекламы. Читайте статью и делайте первый шаг к высоким позициям в поисковой выдаче!
Нейросети на службе у контент-менеджера: реальные возможности и подводные камни
Можно ли уже сейчас использовать нейросети для создания качественного контента? Как еще помогает AI в работе контент-менеджеру и что это больше: тренды или реальная польза? Давайте попробуем разобраться вместе!
Репутация в сети: 5 ошибок, которые будут вам стоить доброго имени
Репутация компании зарабатывается годами, а рухнуть может в считаные часы. Сегодня мы не будем рассказывать о том, как заработать себе доброе имя — это тема для целого цикла статей. Лучше разберем основные промахи в управлении репутацией компании, чтобы уберечь вас от них еще на берегу.
Психология веб-дизайна: как цвета, формы и пространство влияют на восприятие пользователя
Наверняка вы сами хотя бы раз в жизни натыкались на сайт, с которого хочется уйти по непонятным причинам. Вроде бы и стиль присутствует, и нет каких-то очевидных недочетов, но пользоваться им неудобно, долго находиться — неприятно.
Как мы перевозили в Россию Барбару Робертс и Роберта Оппенгеймера
Чем бы занялись в России персонажи двух популярных фильмов? Как бы они стали зарабатывать себе на жизнь, как адаптировались бы? Этими вопросами задалась команда веб-студии Megagroup.ru и в качестве ответа выпустила к Новому году спецпроект «Барбара и Оппенгеймер начинают жизнь в России».
Сайт компании грузоперевозок: что должно быть на сайте, чтобы он приносил доход?
Как бы нам ни хотелось, единых решений для любого бизнеса просто не может существовать. Чтобы сайт был не просто красивым, но и эффективным, важно учитывать особенности сферы деятельности. Рассказываем, что нужно учесть при создании интернет-ресурса для компании грузоперевозок, чтобы сайт не просто работал, но и приносил доход.
Авторизация пользователей через Google, Apple и другие иностранные сервисы запрещена с 1 декабря
С 1 декабря 2023 года авторизация и регистрация на сайтах через Google, Apple и другие иностранные сервисы запрещены. Объясняем, как закон коснется владельцев сайтов и что делать, чтобы не получить штрафы.
Где и как рекламировать бизнес в Интернете?
Мало разработать и опубликовать сайт, надо сделать так, чтобы люди узнали о нем. А значит, грамотно прорекламировать себя в сети. Давайте узнаем, где сегодня можно продвигаться наиболее эффективно.
Эффективная защита сайта от ботов: как избежать незваных гостей?
Согласно исследованиям компании Qrator Labs в последние годы процент ботового трафика в среднем составляет более 40% от всего трафика. Притом, большая часть приходится совсем не на безобидных ботов.
Свежее Маркетинг Бизнес Новости Управление сайтом
Скопировано
Наверх