Типографика в веб дизайне. Основные понятия и правила

Основные понятия

Правила типографики

 

Статья будет полезна для молодых дизайнеров, для людей, которые начали свое дело и впервые создают сайт, для всех, кто работает с визуальным контентом и наполнением сайтов.

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

# 1 Разбираемся в основных понятиях

Как сделать так, чтобы текст на странице читали? С развитием интернет — пространства увеличился и объем информации, поэтому мы постепенно научились фильтровать информацию, выделять нужное.

Текст — главный элемент на странице, именно он подталкивает пользователя к действию.

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

Неважно насколько полезна информация в текстовом блоке, если текст неправильно оформлен — он останется без внимания.

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

1. Шрифты и гарнитура

Шрифт — это набор малых и больших символов, знаков препинания, цифр и спецсимволов одного размера и толщины для отдельной гарнитуры.

Гарнитура — это «комплект» шрифтов, имеющих общие стилевые признаки и принципы построения знаков.

Коротко разберемся с видами гарнитур:

Лучший вариант для веб-страницы — использовать гротескные гарнитуры, они проще для визуального восприятия, четкие и понятные.

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

2. Кегль

Кегль — определяет плоскость размещения знаков по высоте — от нижней точки буквы «р» до верхней точки буквы «б».

В печатных изданиях размеры шрифтов измеряются в пунктах (pt), а на экране — в пикселях (px). Соотношение размеров вычисляется по формуле:

12 пунктов (pt) × (96/72) = 16 пикселей (px)

Оптимальный кегль для сайтов — 16–20 px (для компьютеров) и 14–18 px (для телефонов), а для печатных изделий — 10–12 pt.

3. Насыщенность или толщина

Насыщенность или толщина — определяется изменением толщины основных и соединительных штрихов. В пределах одной гарнитуры насыщенность может изменяться от тончайшего до самого толстого и описывается словами (Thin — Black) или числовыми значениями (100–900).

4. Контрастность

Контрастность — отношение толщины основных и соединительных штрихов. Контрастность может изменяться от шрифтов без контраста (1: 1) до шрифтов с высоким контрастом (более 3: 1).

5. Трекинг и кернинг

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

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

6. Х-высота

Высота от основания букв, которая определяется по букве х (икс). Для текстов на сайте используют большую X-высоту, для повышения разборчивости букв малых кеглей.

7. Интерлиньяж и межстрочный интервал

Интерлиньяж — расстояние между базовыми линиями соседних строк в тексте.

Межстрочный интервал — расстояние от базовой линии до верхней части строчных на следующей строке.

Для текстов на сайте, размеры интерлиньяжа в абзацах — 120–170%. Обычно, интерлиньяж подбирается дизайнером на глаз, но рекомендуемый интерлиньяж — 150%,

в этом случае строки не распадаются, но хорошо отделены, а текст остается читаемым.

 

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

# 2 Правильная типографика

1. Базовое правило типографики

Не важно, сколько правил типографики вы уже изучили, существует одно базовое правило, которое гарантированно улучшит ваши работы:

Наиболее понятным примером этого правила является ряд размеров:

Апрош ≤ Пробел ≤ Кегль ≤ Интерлиньяж ≤Отбивки абзаца ≤ Расстояние от края

Каждый следующий размер в цепи — больше предыдущего.

 Это позволяет, пользуясь одним базовым правилом, сразу повысить читабельность текста, воздушность, понятность, улучшить визуальное восприятие полотна текста.

2. Заголовок

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

В типографике заголовки разделяются на уровне (h2, h3, h4 …). Если сравнить сайт с книгой, то заголовок h2 — название всей книги, h3 — раздела, h4 — пункта в разделе и так далее.

Чтобы выделить заголовок на фоне остального текста, необходимо:

• увеличить расстояние между заголовком и абзацем;
• увеличить кегль шрифта;
• увеличить насыщенность.

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

• антиква к гротеску;
• рукописный к антикве;
• узкий к широкому.

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

3. Абзац

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

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

4. Список

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

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

Информация, которая подается списком:

• удобная, читабельная;
• четкая, структурированная;
• легче для усвоения.

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

5. Выравнивание

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

Основные типы выравнивания:

• по левому краю  (align left) — уместно в 99% случаев, всегда выигрышный и универсальный вариант выравнивания;
• по центру (align center) — используется в заголовках, коротких тезисах, цитатах, отзывах. Не используйте выравнивание по центру в больших текстовых блоках;
• полное (justify) — в блоках текста с таким выравниванием образуются большие промежутки между словами, блок выглядит дырявым;
• по правому краю (align right) — почти не используются в странах, которые читают текст слева направо.

6. Ширина строки

Количество символов в строке должно быть в диапазоне 40–70 символов для компьютеров и планшетов и 30–40 символов телефонов. При этом для текстов на сайте оптимальный кегль 16–20 px.

7. Неразрывный пробел

В конце строки читатели невольно делают паузу, поэтому на концах не оставляют предлоги и союзы, поскольку они непосредственно связаны с последующим словом. Используйте «неразрывный пробел» (сочетание клавиш Alt + 0160), если таких ситуаций не избежать.

На следующую строку переносят:

• предлоги, союзы и некоторые частицы;
• числа с последующим словом или единицей измерения;
• тире с предыдущим словом;
• инициалы вместе с фамилией;
• сокращение полностью.

8. Разновидности палочек

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

Минус (Alt + 045) — числовой знак. Располагается выше, чем тире и дефис, но в типографике сайтов часто заменяется на дефис (-15%).

Короткое тире (Alt + 0150) используют при обозначении интервалов в датах или времени (1975–1995 г.). По бокам также не ставят пробелов, потому что, знак уже имеет отступления.

Длинное тире (Alt + 0151) чаще всего используют:

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

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

9. Разновидности кавычек

Ёлки (« ») — главные кавычки в наборе русского языка.

Кавычки (“ ”) — второстепенные, можно использовать только в том случае, если внутри цитаты нужно сделать еще одно выделение.

Английские кавычки (‘ ’) — используют, если слово переведено с другого языка.

10. Цвет

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

11. Кнопки действия

Прежде всего, кнопка должна привлекать внимание не только формой, но и цветом, и текстом. Не будем рассматривать все стили кнопок, рассмотрим примеры текста на кнопке:

12. CAPS — не всегда хорошо

CAPS — это крик, не нужно кричать там, где не надо! Такой вид написания подходит для логотипов, небольших названий и заголовков до 5 слов. Встречается в кнопках. Большие буквы труднее воспринимаются людьми, чем малые. Не выделяет слова в абзаце БОЛЬШИМИ буквами, если это не аббревиатура, с большей вероятностью читатели обратят внимание на текст, если увеличить насыщенность.

13. И самое главное

Перед публикацией любого текста — покажите его другому человеку. Ваш текст четкий и понятный для Вас, но совсем по-другому его воспринимают другие люди. Задайте следующие вопросы:

• Легко ориентироваться на странице по ключевым словам, заголовками и изображениями?;
• Легко читать текст с этими шрифтами?;
• Достаточно текст разделен на блоки?.

Измените текст и покажите его еще раз. Ситуация улучшилась? Поздравляю!

Полезные ресурсы:

 

Бесплатные шрифты Библиотека шрифтов от Google для коммерческого использования https://fonts.google. com/?subset=cyrillic	Шрифтовые пары На сайте собраны все наиболее удачные комбинации шрифтов библиотеки Google Fonts https://fontpair.co/
Alt-раскладка Все возможные комбинации клавиш для быстрого набора символов https://htmlweb.ru/html/alt-codes.htm	Типографская раскладка Разработана И. Бирдманом для удобного набора символов без использования кода (только Рус, Eng) https://ilyabirman.ru/projects/typography-layout/
Контраст цветов Проверка уровня контраста между цветом по стандартам WCAG https://colourcontrast.cc/	Главред β Проверка текста на чистоту и читабельность (Только на русском) https://glvrd.ru/

 

 

 

15 примеров хорошей типографики в веб-дизайне

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

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

Что такое типографика в веб-дизайне?

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

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

15 лучших примеров типографики в веб-дизайне

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

1. Van Holtz Co

Van Holtz Co – это студия, специализирующаяся на усовершенствованных цифровых веб-приложениях с упором на анимированный, адаптивный и интерактивный контент. Домашняя страница сайта имеет прекрасный дизайн , выполненный в  оттенках фиолетового, в то время, как массивная, интерактивная, анимированная типографика доминирует на странице. Крупные буквы в правой части экрана перечисляют все проекты, над которыми работала студия, и, если вы наведете курсор на название проекта, буквы потеряют заливку и станут обведенными, что служит отличным примером типографического дизайна.

2. Cambridge International School

Cambridge International School – пример образовательного веб-сайта. Его типографика включает в себя тексты разных размеров, но все они выполняют четкую и простую функцию. На этом сайте посетители могут найти идеальную навигацию. Это пример хорошо спроектированных меню, навигационных систем и кнопок.

3. Child’s own

Child’s own – это сайт, на котором детские рисунки используются для изготовления мягких игрушек. Что касается типографики, то дизайнер использовал два контрастных шрифта, но они хорошо сочетаются друг с другом. Шрифт заголовков контрастирует со шрифтом инструкций. Шрифт заголовка делает дизайн игривым, что соответствует «детской» тематике сайта.

4. The Next Rembrandt

The Next Rembrandt — это напечатанная на 3D-принтере картина, созданная на основе данных о произведениях Рембрандта. Дизайн этого сайта выделяется значительным негативным пространством и набором текста. Общий минималистичный характер этой страницы выделяет центральный текст и фокусируется на теме сайта. Панель навигации также проста и понятна.

5. 1MD

1MD — еще один пример хорошо спроектированного сайта. Дизайнер использовал уникальный шрифт для заголовков, навигации и основного текста. Его уникальные шаблоны и дизайн не будут отвлекать посетителей и заставят их задержаться на странице.

6. Kashoo

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

7. Innovator. Boris Ignatovich

Boris Ignatovich — мастер русской авангардной фотографии. Хотя, не рекомендуется использовать слишком мелкий шрифт, в данном случае сочетание цветов и вес выбранных шрифтов создают должный контраст. У посетителей может возникнуть ощущение, что им нравится сайт, но они не знают почему.

8. Evolve Wealth

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

9. RSQ

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

10. Luke Stephenson

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

11. Pest Stop Boys

Pest Stop Boys — компания по борьбе с вредителями. На этой странице используется много отличных цветов как для фона, так и для текста. Активное использование типографики, большой фоновой графики и анимированных тараканов выделяет предоставляемые услуги и контактную информацию компании.

12. By the Books

By The Books – это виртуальный литературный фестиваль, на котором представлены книги, рекомендованные Аминату Соу ​​и Энн Фридман. Это отличный пример того, как типографика может влиять на дизайн сайта. Заголовки и основной текст используют одинаковую типографику на всей странице, но в разных книгах используются дополнительные шрифты, что делает дизайн слегка контрастным, но согласованным.

13. Marianne Brandt

Люди могут ожидать много разных вещей, когда слышат имя Марианны Брандт, но как его можно отразить в  виде сайта? Этот сайт отражает влияние школы дизайна Баухауз с его плоскими цветами и шрифтами Futura. Общая эстетика дизайна минималистична и аккуратна, но при этом не заставит посетителей скучать.

14. Rijksmuseum

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

15. KOTI Sleepover

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

Лучшие практики типографики в веб-дизайне

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

Ограничьте количество шрифтов

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

Сопоставьте шрифты и подберите правильные сочетания

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

Ограничьте длину строки

Длина вашей строки будет определять легкость, с которой пользователь сможет прочитать и понять сообщение. Пользователям будет трудно читать длинные строки, поэтому вам нужно ограничить строку примерно до 50–60 символов.

Установите межстрочный интервал

Если вы правильно используете пробелы между строками текста, улучшится не только визуальная привлекательность, но и удобочитаемость. Чтобы текст было легче читать, можно установить междустрочный интервал 120–145 % от кегля. Если вы используете такой инструмент дизайна, как Mockplus, вы можете легко установить межстрочный интервал на левой панели.

Используйте цветовой контраст

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

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

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

Не забудьте проверить текст

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

Вывод

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

---

Перевод статьи uxplanet.org

Важность типографики в веб-дизайне

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

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

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

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

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

Источник из Unsplash

Что такое типографика?

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

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

Как однажды сказал Оливер Рихенштейн, «Великий дизайнер знает, как работать с текстом не только как с контентом, он обращается с текстом как с пользовательским интерфейсом».

Четыре основных шрифта в типографике

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

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

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

• Serif

• SANS SEARIF

• SLAB Serif

• Script

91919. SERIF SERIF и САР СЕРИФ и САР. шрифты — это наиболее часто используемые наборы шрифтов в Интернете.

Засечки являются более традиционными, последовательными и официальными. Они улучшают читабельность длинных абзацев.

Шрифты без засечек более непринужденны и просты, чем шрифты с засечками; потому что они хорошо отображаются на дисплеях с низким разрешением и являются рекомендуемым вариантом для веб-дизайна. Оба обычно используются для основного контента или заголовков (включая заголовки, логотипы и т. д.).

В то время как шрифт slab предназначен для привлечения внимания, его наиболее важной особенностью является; толстый и смелый. 9Шрифт 0021 предназначен для имитации разнообразных и часто динамичных штрихов почерка и должен использоваться для особых событий, таких как заметные заголовки и т. д.

Почему типографика важна в веб-дизайне

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

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

Давайте углубимся в то, почему типографика так важна.

1 Помогает поддерживать согласованность

Одной из наиболее важных частей типографики в веб-дизайне является согласованность. Типографика сохраняет единообразие на всем сайте, что делает его более профессиональным.

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

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

2 Привлекает внимание читателя

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

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

3 Улучшает читаемость

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

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

4 Создает и повышает узнаваемость

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

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

5 Поддержание иерархии

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

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

Ошибки типографики в веб-дизайне

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

1Неправильный интерлиньяж/высота строки

Это расстояние между строками текста. Когда между строк есть место для отдыха глаз, чтение становится более захватывающим. В общем, старайтесь использовать как минимум на 2 пункта больше, чем размер шрифта. Например, для оптимальной удобочитаемости шрифт 10pt должен иметь интерлиньяж 12pt.

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

2Неадекватное отслеживание

Отслеживание, также известное в Интернете как расстояние между буквами, представляет собой расстояние между буквами в полном слове или фразе. Чем больше трекинг, тем больше места доступно для букв, составляющих слово.

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

3Нет правильного выравнивания

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

4Мало/слишком контрастно

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

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

5Отсутствие рекомендаций по типографике

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

Правила типографики, которые помогут вам в веб-дизайне

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

1Дружественные заголовки

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

Начнем с того, что размер заголовка столь же важен, как и размер основного текста. Слишком широкий заголовок с большим количеством контента может вывести читателя из равновесия и заставить его потерять внимание во время чтения.

Всегда используйте удобный заголовок, делайте смелые заявления и нацеливайте фразу с большим объемом поиска для уникальных и интерактивных заголовков.

2Белое пространство

Белое пространство, часто называемое «негативным пространством», представляет собой пространство вокруг текста или графики. Правильное использование пустого пространства гарантирует, что интерфейс будет аккуратным и видимым, придавая вашему дизайну чистый, организованный вид.

Пустое пространство может даже привлечь внимание к содержимому и обеспечить эстетически приятное общее впечатление. Многие части процесса и результата определяются и диктуются вашим использованием пустого пространства.

3Плотность текста

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

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

4Иерархия

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

5 Акцент на элементах

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

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

Нужна помощь с типографикой?

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

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

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

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

Руководство для начинающих по типографике в веб-дизайне

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

Говоря о себе, я заядлый пользователь веб-сайтов, собиратель знаний и искатель фактов. Но я никогда не отрывался, скажем, от статьи в Википедии и не думал: «Вау, текст на этой странице был таким читабельным!» Я пришел за какой-то информацией, прочитал информацию и ушел с информацией в голове. Это означает, что с точки зрения типографики Википедия отлично справилась со своей задачей.

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

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

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

Что такое типографика веб-сайта?

Вообще говоря, типографика определяет, как текст выглядит для читателя, как слова буквально появляются на странице или на экране.

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

Помимо простоты чтения, цифровой текст должен быть рассчитан на:

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

Из-за всех этих соображений веб-типографика получает свою особую категорию.

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

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

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

Гарнитуры и шрифты

Гарнитура — это особый внешний вид, применяемый к набору буквенных и цифровых символов. Общие шрифты включают Times New Roman, Arial, Helvetica, Courier и Calibri.

Но подождите, разве это не шрифты? Не совсем. Шрифт — это конкретный экземпляр шрифта. Каждый шрифт в гарнитуре имеет определенный вес (то есть жирнее или светлее), размер (например, 16 пикселей против 24 пикселей) и может иметь другие специальные стилизации (например, выделенные курсивом или не выделенные курсивом, закругленные или неокругленный).

Например, шрифты «Helvetica Light (12pt)», «Helvetica Regular (16pt)» и «Helvetica Bold Oblique (20pt)» — это три шрифта в гарнитуре «Helvetica»:

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

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

Шрифты с засечками и без засечек

Многие шрифты соответствуют двум стилям: с засечками и без засечек.

A serif — это небольшой орнаментальный выступ от основного штриха буквы. Шрифты с этим стилем называются шрифтами с засечками . «Sans» по-французски означает «без», а шрифты без этих украшений обозначаются как . реже, чем шрифты с засечками и без засечек. Рукописные шрифты предназначены для воспроизведения разнообразных и часто плавных штрихов, создаваемых почерком. Шрифт сложнее читать, чем шрифт с засечками и без засечек, и его следует использовать только в особых случаях, например, для ярких заголовков и причудливых приглашений на вечеринки.

Кернинг

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

В приведенном выше примере кернинг разделяет две буквы «Т» для улучшения читаемости.

Трекинг

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

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

Интерлиньяж

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

Опять же, правильное количество интерлиньяжа помогает читателям ориентироваться в тексте — слишком много или слишком мало неудобно читать.

Иерархия

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

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

Например, типичная иерархия сообщений в блоге начинается с текста заголовка (также известного как «Заголовок 1» или «h2»), за которым следуют заголовки разделов с возрастающей специфичностью и уменьшающейся визуальной значимостью (h3, h4 и т. д.). Наконец, мы доходим до основного текста, который может быть самым маленьким, но содержит то, что нужно читателям.

Вот пример визуальной иерархии, созданной с использованием разных шрифтов Helvetica:

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

Руководство по типографике веб-сайтов

1. Ограничьте количество шрифтов на веб-сайте.
2. Используйте шрифт без засечек для основного текста.
3. Сначала придерживайтесь стандартных шрифтов.
4. Подберите размер текста.
5. Не используйте все заглавные буквы.
6. Используйте цвета осторожно и преднамеренно.
7. Оставайтесь в пределах от 40 до 80 символов в строке.
8. Обеспечьте достаточное расстояние между строками.
9. Удалите текстовую анимацию.

Вероятно, вам не приходилось много думать о типографике в Интернете. Это связано с тем, что типографика популярных веб-сайтов сводится к хорошо стилизованной букве Т. Многолетние пробы, ошибки и эксперименты оставили нам 9 лучших практик — следуйте им, чтобы типографика вашего сайта соответствовала ожиданиям и заставляла пользователей читать (или, по крайней мере, пролистывать) .

1. Ограничьте количество шрифтов на сайте.

Чтобы сохранить визуальное единство контента, используйте на своем веб-сайте не более двух разных шрифтов. Многие веб-сайты прекрасно справляются с одним шрифтом, особенно если они применяют разные шрифты внутри шрифта для разных целей (например, заголовки, основной текст, текст кнопки и т. д.). Например:

Источник изображения

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

2. Используйте шрифт без засечек для основного текста.

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

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

3. Сначала придерживайтесь стандартных шрифтов.

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

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

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

В-третьих, веб-безопасные шрифты, как правило, лишены некоторых неудобных недостатков дизайна, наблюдаемых в других шрифтах. Стандартный шрифт, например, не будет содержать никаких странных кернингов, из-за которых две буквы выглядят слипшимися. Они также сводят к минимуму случаи, когда два разных символа трудно различить, например, «I» из «L» или «r» из «n».

Если вы предпочитаете нестандартную гарнитуру или шрифт, всегда есть шанс, что некоторые браузеры не распознают стиль и вместо этого отобразят что-то вроде обычного Times New Roman. В старом добром Times нет ничего плохого, но опять же, шрифты без засечек лучше подходят для основного текста.

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

4. Подберите размер текста.

Веб-дизайнеры указывают размер шрифта в пикселях (px), а не в точках (pt). Это связано с тем, что пиксель является стандартизированной единицей в сети, а шрифт — нет — два человека, читающие текст размером 12 пунктов на одном и том же веб-сайте, могут видеть разные вещи в зависимости от их устройств или веб-браузеров.

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

Что касается иерархии, заголовки всегда должны быть больше основного текста и уменьшаться в размере на h2, h3, h4 и т. д. Это помогает читателям просматривать ваши страницы в поисках целевого контента. Вы также можете добавить разный вес заголовкам для большего контраста с основным текстом.

5. Не используйте все заглавные буквы.

Это более простое правило — «все прописные» не нужны почти во всех контекстах, за исключением декоративного текста, брендинга и случайного набора заголовков.

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

6. Используйте цвета осторожно и осознанно.

Распространенной проблемой для веб-пользователей является плохое сочетание цвета текста и цвета фона, в котором они недостаточно контрастны для обеспечения читаемости. Воздержитесь от наложения текста на фон с похожими цветами и будьте очень осторожны при размещении текста поверх изображений.

Точнее, Руководство по доступности веб-контента (WCAG) рекомендует коэффициент контрастности не менее 4,5:1 для большей части текста и 3:1 для крупного текста, выделенного полужирным шрифтом. Используйте бесплатный инструмент, подобный этому, чтобы проверить контраст между шрифтом и цветом фона. Кроме того, вы не ошибетесь с черным или темным текстом на белом фоне, по крайней мере, с точки зрения разборчивости.

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

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

7. Оставьте от 40 до 80 символов в строке.

Люди разборчивы в чтении — мы предпочитаем строки текста длиной от 40 до 80 символов. Все, что меньше, заставляет наши глаза слишком часто переходить на следующую строку, что отвлекает нас. С другой стороны, любая большая длина строки утомляет читателей, вызывает дискомфорт и требует больше усилий, чтобы найти начало новой строки, когда взгляд возвращается к левой стороне текстового блока.

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

8. Обеспечьте достаточное расстояние между строками.

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

Для основного текста начните с интервала 1,5, что означает, что интерлиньяж составляет 50 % высоты текстовой строки. Для заголовков это расстояние должно быть немного больше. Между абзацами начните с интервала 2,5 и увеличивайте или уменьшайте его.

9. Исключите текстовую анимацию.

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

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

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

Тестирование текста

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

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