Типографика в дизайне сайта: основные понятия + секретная информация из курса «Текстерры»

Вы удивитесь, но в блоге «Текстерры» еще не было статьи, полностью посвященной типографике. Исправляемся! Перед вами основные понятия и правила типографики от А до Я.

В этой статье мы также делимся эксклюзивными материалами – свежачком из курса «UX-специалист». Такого в свободном доступе вы не увидите!

А что это вообще такое? Типографика в веб-дизайне (а мы будем говорить именно про него) – это наука оформления текста на сайте. Правила типографики созданы для того, чтобы текст был удобен для чтения и подталкивал пользователя к совершению целевого действия: купить товар, оформить подписку, дочитать статью до конца. Получается, типографика работает в тесной связке с UX-дизайном – мы к этому еще вернемся.

Большие элементы. Последние несколько лет в тренде большие шрифты – чем крупнее, тем лучше. Почему так? Большие шрифты воспринимаются лучше, прочитать их не составляет труда. Однако есть и исключения: например, в дизайне бренда холодного кофе CoolBrew используется мелкая типографика. По словам одного из создателей, «массивный системообразующий символ контрастирует с мелким шрифтом, но не забирает на себя все внимание. А мелкая типографика гармонично заполняет пространство, добавляя дизайну премиальной эстетики».

Мелкая типографика в дизайне

Выравнивание. Считается, что оптимальным является выравнивание текста по левому краю. По ширине, по правому краю или, боже упаси, по центру нужно применять очень осторожно. Исключение – подзаголовки или микротексты в несколько слов, которые могут располагаться друг под другом.

Голос бренда на сайте определяет взаимоотношения компании и потребителей. Об этом рассказывает лектор курса «UX-специалист» (и главред блога «Текстерры») Константин Рудов. Вот основные правила подобных текстов:

  • Определитесь со стилем общения. Деловой, дружеский, немного фамильярный – все зависит от вашего позиционирования на рынке.
  • Придерживайтесь единой манеры – или ты, или вы.
  • Вступайте в диалог с пользователем, объясняйте значение графических элементов, а не раскидывайте их по странице в надежде, что сам разберется.
  • Не используйте термины и профессиональный жаргон – говорите так, чтобы вас поняли.
  • Говорите о пользе для потребителя, а не о том, что нужно вам.

Голос этого бренда – спокойный, дружественный. Единственное, что смущает – все о нас да о нас, а не о клиенте

Длина строк – какой она должна быть? Слишком длинная мешает понять суть: пока дойдешь до конца – забудешь, что было в начале. Короткая – тоже ничего хорошего: только и будешь стрелять глазами от начала к концу строки. Если не знаете, какой должна быть золотая середина, расслабьтесь: все уже вычислено. Оптимальный размер строки для декстопной страницы – 55-65 символов. Для мобильной версии – 30-40 символов. Пользуйтесь.

Заодно расскажем о двух забавных терминах – вдовах и сиротах. Так на профессиональном жаргоне называются висячие строки. «Вдовы» – это одинокие слова на строке, которые остаются в конце абзаца или страницы. «Сироты» – висячие строки, которые убежали на новую страницу. От них нужно избавляться.

[Запись вебинара] Какой должна быть типографика на сайте?

Есть ли разница между типографикой и версткой? Ну конечно! Типографика – это правила оформления текста, верстка – процесс его распределения на странице. Версткой занимается верстальщик или дизайнер, и вот тут возникает частый косяк. В угоду дизайну коверкается текст – а должно быть наоборот! На сайте текст всегда важнее графики. Сам по себе дизайн сайта не подтолкнет пользователя к совершению целевого действия: не продаст ему товар, не подпишет на рассылку. А вот вкупе с текстом – запросто! Поэтому важно расставить приоритеты.

«Дежурка» говорит, что это круто. Мне не нравится – сильно отвлекает от текста. А вам как?

«Дежурка» говорит, что это круто. Мне не нравится – сильно отвлекает от текста. А вам как?

Ёлочки или лапки? В русском языке предпочтительнее елочки. Не спрашивайте, чем они лучше лапок – так сложилось. Лапки используются, когда надо поставить кавычки внутри кавычек или в рукописном тексте. А еще есть железный способ определить новичка в копирайтинге. Матерый автор автоматически будет ставить елочки – даже если в ТЗ или редполитике об этом не сказано.

Жена Стива Круга не была веб-дизайнером, но суть ухватила точно. В своей книге «Веб-дизайн» писатель приводит слова супруги (на картинке). Упрости жизнь своему читателю (клиенту) – не заставляй его продираться сквозь нечитабельный текст и преодолевать трудности. Пусть идет по страницам легко, словно на лодочке плывет, преодолевая мели, водовороты и водопады. Подробнее этого мы коснемся, когда дойдем до буквы Ю.

Это работает везде, и в типографике в том числе

Заголовки набираются по принципу пирамиды. Основной заголовок – крупным шрифтом, подзаголовок (если есть) – поменьше, остальной текст – еще меньше.

Заголовок и подзаголовок статьи в нашем блоге

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

Текст заголовка, набранный на фото (как на картинке выше), – отдельная тема. Важно, чтобы он не слился с фотографией. А весь остальной текст – с фоновым изображением страницы, если оно имеется. Для этого лучше затемнить фотографию или публиковать текст на наиболее темных участках фона.

Инструменты для создания типографики легко находятся в интернете. Даем список ресурсов с бесплатными шрифтами:

Еще больше инструментов – в статье нашего блога 76 ресурсов для тех, кому нужен бесплатный дизайнерский контент.

Кегль, кернинг, трекинг и прочий интерлиньяж – слова из лексикона верстальщика. Кегль – высота буквы. Кернинг – интервал между буквами. Причем между разными буквами он может быть разным – чтобы читалось лучше (изменение расстояния называется трекинг). Интерлиньяж – расстояние между строками. Обычно он делается в 1,5 раза больше кегля.

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

Логотип Google с простой и четкой типографикой
И лого Disney с фантазийным шрифтом

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

Тренды дизайна-2019

Микротексты – это не полноценные новости, статьи, продающие тексты. Микротексты могут состоять из одного или нескольких слов – например, разделы меню, фильтры для выбора товаров в интернет-магазине, надпись на кнопке СТА, надпись в форме заказа и так далее. Для таких текстов тоже есть свои правила. Лайфхаками из курса «UX-специалист» делится Константин Рудов:

  • Используйте узнаваемые выражения. К любому слову можно подобрать синонимы, но это тот самый случай, когда лучшее – враг хорошего. В микротекстах используйте формулировки, которые знакомы большинству пользователей. Даже не так – которые ПРИНЯТО использовать в этом контексте. Чем более предсказуемо выглядит интерфейс – тем больше вероятности, что человек щелкнет на кнопку.
  • Сокращайте все лишнее. Например, если вы раздумываете, что лучше написать на кнопке – «Оставить заявку на обратный звонок» или просто «Обратный звонок» – без сомнений выбирайте второе, такой текст будет считываться быстрее.

Сколько вам нужно, срок кредита – все кратко и понятно

  • Однако если ваша ЦА – не очень опытные пользователи, тогда лучше писать более длинно. Или под основным предложением (записаться на консультацию, заказать товар) писать текстовое пояснение – для удобства.

Новички часто допускают ошибки в типографике. О некоторых мы уже писали: смотрите буквы В, Г, Д, З… Какие из них самые распространенные:

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

Объединение – одно из базовых правил UX, которое относится и к типографике. Оно гласит: схожие элементы воспринимаются как единое целое. Это могут быть иконки, выполненные в одном стиле, шрифты в разделе меню, сами микротексты, поля в форме заказа. Поэтому если вы хотите не рассеивать внимание пользователя, а наоборот, заострить его, – оформляйте все одинаково.

Вот пример с сайта одного мобильного оператора. Вроде все выровнено, но если присмотреться – видно, что единообразия в пунктах меню нет. В названии разделов мирно соседствуют существительные и глаголы, «Развлечения» и «Приложения» почему-то соединились в одно.

На мой взгляд, довольно разношерстное меню

Примеры отличной типографики разбросаны по всей статье. Приведу три своих фаворита.

Можно кликнуть по каждой книге
Пройдите по ссылке на сайт – не пожалеете

Пройдите по ссылке на сайт – не пожалеете

Куда же без него =)

Роберт Брингхёрст («Основы стиля в типографике»), Джеймс Феличи («Типографика: шрифт, верстка, дизайн»), Элам Кимберли («Графический дизайн. Принцип сетки»), Эрик Шпикерман («О шрифте»), Владимир Лаптев («Типографика. Порядок и хаос»), Александра Королькова («Живая типографика») – все эти авторы старались для нас. В их книгах вы найдете основы основ, примеры типографики XX-XXI веков и даже забавные истории.

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

А вот цветом структурировать текст лучше не надо – по крайней мере, не перебарщивать с этим. Это отвлекает внимание читателя и создает ощущение мешанины. То же самое касается выделения основных мыслей жирным, курсивом и, упаси боже, капслоком.

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

Уникальность – пожалуй, основная тенденция веб-дизайна последних лет. В статье «Тренды дизайна-2019» мы уже касались этой темы. По словам Святослава Грошева, руководителя отдела дизайна TexTerra, бренды все чаще используют собственные шрифты. Это добавляет бренду индивидуальности, особенно если свой шрифт – элемент фирменного стиля и используется везде. Уникальность проявляется не только в шрифтах – популярно нестандартное расположение текста и заголовков. Главное, опять же – не переборщить и не дезориентировать читателя («Где я? Что тут происходит?»).

Узнаваемый дизайн – эффективный способ привлечь внимание к контенту и продукции компании.
Подробнее

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

С годами яблочко становилось все минималистичнее
Рисованный король уступил место лаконичному логотипу

Хотя есть и исключения. Создатели нового логотипа Zara просто проигнорировали все, что мы тут написали. Тенденция к упрощению, свободное пространство, большие крупные шрифты – не-е-е, не слышали.

Было – стало

Мнения дизайнеров разделились: от «Логотип индивидуальный, с оттенком ретро и отсылкой к журналам про моду» до «Будто бы это уже не логотип модного дома, а “логосик” где-то на базаре». И даже так: «Как минимум лого перестал быть скучным, как надпись ЛЕНИН на Мавзолее». А вы как думаете?

Холивары на тему «Шрифты с засечками / шрифты без засечек» продолжаются до сих пор. Раньше считалось, что шрифты с засечками не подходят для веб-дизайна. «Старый принцип юзабилити для интернет-типографики был прост: придерживаться шрифтов без засечек. Поскольку компьютерные экраны паршиво отображали засечки, использование таких шрифтов в тексте приводило к размытым буквам», – писал специалист по UX Якоб Нильсен. Сейчас, хвала богам, такой проблемы нет – а значит, ограничения на засечки могут сниматься. По большому счету, наличие и отсутствие засечек – не основной критерий. А что главное – расскажем в пункте «Ч» нашей азбуки.

Как делаем мы? «Шрифты с засечками очень хорошо вписываются в современный дизайн, но я бы не советовал их использовать во всех проектах. Они могут быть эффектно реализованы в качестве заголовков», – говорит дизайнер Святослав Грошев. Вот так мы и делаем на сайте и в блоге «Текстерры». Посмотрите на этот текст и вернитесь к заголовку – там совсем другой шрифт.

Цвет текста тоже имеет значение. Не будем городить огород и скажем, что лучше черного на белом или белого на черном ничего еще не придумали. Окей, серый вместо черного тоже достойно смотрится. Да и белый на темно-синем/красном/зеленом вполне подойдет. Сейчас в моде еще одна достойная альтернатива – прозрачность.

Смотрится очень интересно!

Важные текстовые блоки можно выделять цветом, чтобы привлечь внимание пользователя. Контрастная кнопка СТА – классический пример. В этих случаях сам текст точно должен быть черным или белым – иначе читатель забьется в падучей. Особенно если будете сочетать вырвиглазные цвета – красный на зеленом или синий на желтом. Думаете, такие сайты остались в прошлом? В основном да, но есть еще доисторические образчики.

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

Шрифты – наконец-то мы до них добрались! Опишем кратко свежие тенденции:

  • Крупно, как можно крупнее! Особенно хорошо большие шрифты смотрятся вместе с минималистичным дизайном.
  • Уникальные шрифты, разработанные специально для конкретного бренда или ресурса.
  • Контурные шрифты помогают грамотно расставлять акценты на нужных частях текста.
  • Шрифты с засечками – ну вы поняли.
  • Выбирайте адаптивные шрифты, которые будут одинаково хорошо читаться и в декстопной, и в мобильной версиях. На смартфоне нереально прочитать слишком маленькие буквы, а постоянно увеличивать изображение быстро надоест.

Shit happens. Терминов на эту букву маловато – идем дальше.

Эмодзи являются хорошим дополнением к тексту — конечно, если это уместно. На сайте машиностроительного завода веселые смайлы вызовут недоумение (хотя вспомним известный «Кубаньжелдормаш» и улыбнемся), а на развлекательном портале зайдут на ура. Конечно, эмоции можно выражать и в текстовом виде, но люди уже настолько привыкли к смайлам, что воспринимают их легче.

Юикс, или UX – это не только про дизайн. Это и про типографику. С помощью текста можно (и нужно!) взаимодействовать с пользователем, вести его сквозь страницы сайта к целевому действию: оформить заказ, подписаться на рассылку, зарегистрироваться на сайте. Вот почему все тексты на сайте должны быть в первую очередь читабельными, во вторую – понятными. В идеале у пользователя вообще не должно быть сомнений, переходить по ссылке или нет, нажимать кнопку СТА или не стоит. Лишние сомнения – лишние печали и препятствия на пути к целевому действию, а нам это совсем не нужно.

Как-то совсем не замотивировали нажимать на кнопку…

Я недавно прослушала курс «UX-специалист» от TexTerra. Сейчас будет не реклама, просто личные впечатления. В этом курсе собраны все современные знания о UX и самое главное – дана бесценная практика. Частичкой этих знаний я поделилась с вами в статье. Надеюсь, было интересно!

Заказать брендинг

Понравилась статья? Поделиться с друзьями:
Marketing-Land.ru
Комментариев: 11
  1. generic viagra canada price

    viagra price generic viagra canada price viagra online without prescription

  2. g those

    Hi! I know this is somewhat off topic but I was wondering which blog platform are you using for
    this website? I’m getting fed up of WordPress because I’ve had problems with hackers and
    I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.

  3. g like

    What’s up, this weekend is good for me, because this occasion i am reading this fantastic educational paragraph here at my house.

  4. g then

    Good post. I learn something totally new and challenging on blogs I stumbleupon on a
    daily basis. It’s always helpful to read articles from other writers and use
    a little something from other sites.

  5. https://tinyurl.com/rsacwgxy g

    For newest information you have to pay a quick visit internet and on internet I found this web page as a most
    excellent web page for most up-to-date updates.

  6. g rsacwgxy

    I feel this is among the so much significant info for me.

    And i’m glad reading your article. However wanna remark on some
    common issues, The web site style is perfect, the articles is actually nice : D.
    Excellent job, cheers

  7. g https://tinyurl.com/rsacwgxy

    If you desire to increase your experience simply keep visiting this web page and
    be updated with the most recent news posted here.

  8. tinyurl.com

    Everything is very open with a very clear description of the issues.

    It was truly informative. Your website is extremely helpful.

    Many thanks for sharing!

  9. http://video.pirveli.ge/user/EstelaKelleher5/

    An impressive share! I have just forwarded this onto a friend who was conducting a little homework on this.
    And he actually ordered me breakfast because I discovered it
    for him… lol. So allow me to reword this…. Thank YOU for the meal!!

    But yeah, thanks for spending the time to talk about this
    issue here on your web page.

  10. cbd oil that works 2020

    Pretty! This was an extremely wonderful article. Thank you for providing this
    information.

  11. cbd oil that works 2020

    Awesome article.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: