Типографика является важным аспектом дизайна вашего сайта. Выбрать стиль шрифта легко — с большинством современные конструкторы сайтов, переключение стиля шрифта осуществляется всего в три клика. Однако выбор *правильного* стиля шрифта для веб-сайта никогда не бывает легкой задачей. Веб-сайт с правильной типографикой производит профессиональное впечатление и позволяет посетителям легко читать.
В этой статье мы рассмотрим различные элементы типографики и поделимся советами по выбору правильной типографики для вашего веб-сайта.
Что такое Типография?
Типографика — это искусство и техника размещения шрифта, чтобы сделать письменный язык разборчивым, читабельным и привлекательным при отображении.
Некоторые важные элементы типографики, с которыми вам нужно ознакомиться, прежде чем мы углубимся в них, включают:
Гарнитура и шрифт
Шрифт — это дизайн определенного набора символов. Например, Times New Roman, Arial или Helvetica — это некоторые распространенные шрифты, с которыми вы, вероятно, сталкивались в прошлом.
Шрифт — это конкретный вес, ширина и стиль шрифта, например, Arial Bold или Times New Roman Italic.
Размер шрифта
Размер шрифта измеряется в пунктах. В веб-дизайне размер шрифта измеряется в пикселях (px), ems (em), rems (rem) и процентах (%). Пиксели (px) — это абсолютная единица измерения, которая определяет размер шрифта в фиксированном количестве пикселей. Ems (em), Rems (rem) и Percentages (%), с другой стороны, являются относительными единицами измерения, которые основаны на различных элементах веб-страницы. Правильный размер шрифта зависит от размера экрана и расстояния между ридерами и экраном.
Как правило, для настольных компьютеров рекомендуется 16–20 пикселей, а для мобильных устройств — 14–18 пикселей. Размер шрифта этого сайта, который вы читаете, составляет 18 пикселей как для настольных компьютеров, так и для мобильных устройств.
Интервал между строками
Межстрочный интервал — это расстояние по вертикали между строками текста, также известное как интерлиньяж.
иерархия
Иерархия типографики относится к расположению различных уровней текста на странице. Большинство веб-дизайнеров разбивают контент на разделы по темам и используют иерархию типографики, чтобы упростить навигацию по контенту и его усвоение.
Например, это сообщение в блоге начинается с текста заголовка (также известного как Заголовок 1 или H1), за которым следуют различные заголовки разделов (H2) и подзаголовки (H3, H4, полужирный шрифт), основной текст (блоки контента, которые вы сейчас читаете). ) и подтекст (мелкий шрифт, который появляется в разделе нижнего колонтитула).
Используя различные уровни заголовков, подзаголовков, размеров шрифта, толщины шрифта, цветов и пустого пространства, вы можете создать четкую визуальную иерархию, которая направляет внимание пользователя на самую важную информацию и упрощает просмотр и усвоение содержимого.
Советы по типографике для начинающих
Теперь, когда мы разобрались с основами, давайте рассмотрим несколько практических советов, которые вы можете применить к дизайну своего сайта.
1. Выберите шрифты, которые отражают индивидуальность бренда вашего веб-сайта.
У разных шрифтов разные личности. Важно выбрать те, которые соответствуют идентичности и ценностям бренда вашего веб-сайта. Как правило, шрифт без засечек может быть более современным и гладким, а шрифт с засечками может быть более традиционным и элегантным.
Для начинающих лучше всего начинать с обычных шрифтов, таких как Arial, Helvetica, Roboto, Open Sans, Lato, Montserrat или даже Verdana. Мало того, что эти типы шрифтов легко вписываются в большинство дизайнов макетов, они также широко доступны на большинстве устройств и браузеров. что делает их «веб-безопасными».
Примеры типографики
При выборе шрифта учитывайте такие факторы, как разборчивость, удобочитаемость и тон голоса, и убедитесь, что он соответствует общему стилю и фирменному стилю вашего веб-сайта. Ниже приведены некоторые примеры из реальной жизни, взятые из всемирной паутины.
2. Используйте не более трех шрифтов
Меньше - больше. Использование слишком большого количества шрифтов часто приводит к загромождению и запутанности дизайна. Общее правило — использовать не более 2–3 разных шрифтов. В WHSR мы используем только один тип шрифта на нашем сайте.
3. Обратите внимание на сочетание шрифтов
Шрифты должны дополнять друг друга, а не конкурировать друг с другом. Используйте инструмент сопряжения шрифтов, чтобы найти шрифты, которые хорошо сочетаются друг с другом.
4. Используйте достаточный интервал (высота строки) между строками, чтобы улучшить читаемость
Для основного текста рекомендуется высота строки не менее 1.5. Высота строки может быть изменена в зависимости от размера и типа шрифта. Правильная высота строки может помочь предотвратить появление сжатого или загроможденного текста, что значительно облегчает читателям сканирование и быстрое понимание вашего контента.
5. Избегайте анимированного текста
Мы уже не в 90-х живем. Анимированные тексты — это не круто. Кроме того, они могут отвлекать и затруднять чтение вашего контента. Вместо этого используйте анимацию экономно и стратегически, чтобы привлечь внимание к важной информации.
Например, вы можете использовать анимацию, чтобы выделить кнопку призыва к действию или показать скрытый контент на странице.
Общее практическое правило при использовании анимации заключается в том, что она не влияет на удобочитаемость или доступность контента.
6. Минимизируйте использование всех заглавных букв
Все предложения с заглавными буквами — будь то в основном тексте или заголовках — могут быть сложными для чтения. Если вам нужно что-то подчеркнуть, рассмотрите возможность использования полужирного или курсивного шрифта или контрастного цветового фона.
7. Проверьте свою типографику на разных устройствах и размерах экрана
Тестирование вашей типографики на разных устройствах помогает выявить любые проблемы с UX или несоответствия дизайна. Убедитесь, что размеры шрифта, высота строк и другие элементы дизайна соответствующим образом настроены как для маленьких, так и для больших экранов, чтобы на вашем веб-сайте было легко ориентироваться и его было легко понять.
Не бойтесь экспериментировать с разными шрифтами, размерами и макетами. Протестируйте дизайн с пользователями и повторите на основе данных веб-аналитики (время на странице, показатель отказов и т. д.) и их отзывов.
Полезные инструменты и ресурсы для типографики
Вот несколько полезных веб-сайтов и инструментов, которые помогут вам выбрать типографику для ваших веб-сайтов:
- Google FoNTS: бесплатная коллекция веб-шрифтов, которые можно легко интегрировать на ваш веб-сайт.
- FontPair.co: Галерея бесплатных шрифтов и сочетаний шрифтов для всех типов дизайна.
- Fonts.com: веб-сайт, предлагающий большой выбор профессионально разработанных шрифтов как для использования в Интернете, так и для печати.
- Font Squirrel: бесплатный ресурс шрифтов, предлагающий широкий выбор высококачественных шрифтов для коммерческого и личного использования.
- Сопоставитель шрифтов Sprint: бесплатный инструмент для поиска шрифтов, который помогает определить типы шрифтов из загруженных изображений.
- DaFont: популярный веб-сайт, предлагающий широкий выбор бесплатных шрифтов, которые можно использовать в личных и коммерческих проектах.
- ШрифтПространство: еще одна бесплатная коллекция шрифтов, предлагающая широкий выбор высококачественных шрифтов для личного и коммерческого использования.
- Fontanello: расширение для браузера, которое позволяет отображать основные типографские стили текста, щелкнув его правой кнопкой мыши.
Заворачивать
Типографика — это крuciЭто другой аспект веб-дизайна, который может сильно повлиять на удобочитаемость, удобочитаемость и общий пользовательский опыт вашего веб-сайта. Понимая основы типографики, вы можете создавать более эффективные и привлекательные веб-сайты.
