“Веб-дизайн - это 95% типографики”, - сказал основатель компании Information Architect Оливер Райхенштейн. Так оно и есть: без качественной типографики ваш сайт будет неудобным для восприятия. В этой статье разберем основные виды типографики и современные тренды. Поехали!

Что такое типографика и зачем она нужна

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

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

Основные правила типографики

1. Чем проще - тем лучше. Даже если появилось множество новых интересных шрифтов, эмодзи, анимаций - не нужно использовать все их сразу. Сайт будет аляпистым и совершенно не стильным.
2. Сайт должен быть читабельным. Если выбирать между оригинальностью идеи и удобством для посетителя - любой веб-дизайнер не раздумывая выберет второе.
3. Главное должно отличаться от второстепенного. Хорошая типографика сразу показывает, что тут самое важное, а что нет. Если элементы сайта спорят между собой и взгляд посетителя мечется, не зная, что выбрать - значит, типографика хромает.
4. Правило золотого сечения. Мы уже писали о нем в статье про основные правила веб-дизайна. Если кратко - это деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3, и так далее. Чаще всего по этому принципу определяется соотношение рекламных блоков и текста.
5. Текст важнее. Графика должна не перетягивать одеяло на себя и отвлекать от контента, а дополнять его и привлекать к нему внимание. Текстовая информация чаще важнее, чем картинки - а значит, графика должна быть на службе у контента, а не наоборот.
6. Помните о гармонии. Не только в музыке она есть, как пелось в одной известной песне. На сайте все должно быть выполнено приятно глазу, гармонично и естественно. Хотите проверить? Просто дайте оценить сайт любому знакомому: пусть посмотрит свежим взглядом и выскажет честное мнение.

Основные понятия типографики и как их применять

О шрифт, ты - мир!

История шрифтов в типографике заставляет задуматься. На заре веб-дизайна считалось крутым использовать необычные шрифты по принципу “чем чуднее - тем моднее”. Со временем появилась тенденция к упрощению: сейчас предпочтение отдается простым крупным шрифтам. И обязательно читаемым.

Приведем несколько основных правил использования шрифтов на сайте:

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

Например, хорошо сочетаются шрифты Georgia и Verdana - они визуально похожи и гармонично дополняют друг друга. Шрифты Baskerville и Impact, напротив, имеют разную ширину символов, и второй просто “убивает” первый.

2. Используйте стандартные шрифты. Если ваш веб-дизайнер - не суперпрофессионал, лучше не рисковать и выбрать знакомые всем true-шрифты, которые давно зарекомендовали себя. Это, например, системные Arial или Calibri, можно также использовать шрифты Google (это бесплатно) или Adobe Typekit (по подписке) или поюзать онлайн-конструкторы. Вариантов масса!

Внимание! Этот способ могут не применять те, кто хочет сразу громко заявить о себе или создать фирменный стиль сайта. Вот тут можно экспериментировать вволю - конечно, заручившись помощью хорошего дизайнера. С осторожностью обращайтесь с готическим, старославянским шрифтами, Comic Sans - они, как нам кажется, давно себя изжили и не всегда уместны. Хотя на многих ресурсах до сих пор популярны.

3. Буквы должны читаться! Есть некоторые шрифты, в которых отдельные буквы можно перепутать. Например, I и L в английской раскладке, “н” и “м”, “т” и “ш” - в русской. Особенно сложно бывает читателю, когда еще и расстояния между буквами маленькие. Остерегайтесь таких шрифтов!

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

Искусство цвета

1. Играйте на контрасте. Цвет текста и фона для него должны различаться. Серый на сереньком - так себе тренд. Чем больше бросается в глаза контраст - тем гарантированнее он привлечет внимание пользователей. Чем меньше шрифт, тем более он должен быть контрастным, и наоборот.

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

2. Смелее, детка! В моде техники градиента, дуплекс - использование двух цветов и их полутонов, трехмерные объемные изображения, картинки, нарисованные вручную и другие тренды веб-дизайна 2018 - ограничений практически нет. Все зависит от вкуса и чувства стиля вашего дизайнера.

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

Оформление текста

“Крылья, ноги, главное - хвост!” - если перефразировать фразу из культового мультика, то же самое можно сказать и о тексте. Цвет и шрифты, конечно, важны, но оформление текста все же играет главную роль в восприятии сайта посетителем. Рассмотрим современные тенденции оформления текста:

1. Используйте пиктограммы, значки, эмодзи. В типографике как в жизни: если люди активно используют смайлики для общения, значит, нужно применять их и на сайтах. Мир веб-типографики уже никогда не станет прежним: пиктограммы, смайлы и значки стали важной частью текста. Это делает его более динамичным и близким к пользователю.

2. Форматируйте. Это незыблемое правило: если не хотите, чтобы ваш интересный и полезный текст превратился в одну большую простыню - ставьте заголовки и подзаголовки, не забывайте про маркированные списки. Обязательно выделяйте абзацы - сплошной текст читать просто невозможно. Считается, что оптимальная длина абзаца составляет 3-5 строк.

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

3. Забудьте про капслок! Тренд выделять главное капсом давно умер: сейчас большие буквы воспринимаются как крик и вызывают у читателя лишь негатив. Большие буквы уместны лишь в заголовках, да и то не всегда. Привлекать внимание с помощью капса уж точно не рекомендуется.

4. Ограничьте длину строки. Помните базовое правило типографики: текст важнее графики, особенности дизайна не могут диктовать условия верстке текста. Если дизайн вашего сайта предполагает длиннющую строку - проще поправить дизайн, чем заставить читателя дочитать ее до конца. Читабельность превыше всего!

Эксперты говорят, что оптимальное количество символов на строку - не более 60. Если меньше - читатель будет слишком быстро возвращаться в начало строки и сбивать ритм чтения. Если больше - сложно будет сосредоточиться на тексте: пока подойдешь к концу строки, забудешь о том, что написано в ее начале.

Внимание! Это правило актуально для текстов, которые читаются с ПК. Если речь идет о мобильном устройстве, длина строки должна составлять не более 30-40 символов - больше в экран просто не влезет. Ну вы поняли: адаптивный дизайн - наше все.

5. Следите за межстрочным интервалом. Чем он больше - тем больше воздуха в тексте, тем проще читателю пробираться через слова и символы. Обычно размер интервала должен быть на 30% больше высоты символов. Посмотрите, какая колоссальная разница между первым и вторым примером!

Тренды типографики последних лет

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

Крупная типографика

Пожалуй, самый главный тренд последних лет - крупная типографика. Давайте разберем, зачем она нужна:

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

Большие шрифты

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

Сломанные сетки

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

Больше движения!

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

Понравилась статья? Обращайтесь в IDBI - мы знаем о типографике все и поможем разработать ваш сайт с учетом новых тенденций.