Полный гайд по типографике веб-дизайна для каждого сайта

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

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

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

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

Когда кто-то говорит об изменении шрифта (Times New Roman, Arial и т. д.), он имеет в виду гарнитуру. Гарнитуры можно разделить на категории с учетом различных характеристик шрифта.

Наиболее известные типы шрифта :

а) засечками (так называемые засечки) – буквы имеют сглаженные окончания (например, Times New Roman).

б) без засечек – простые буквы без окончаний (например, Arial).

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

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

Отслеживание (также известное как изменение плотности композиции ) может применяться к большей текстовой области, например ко всему абзацу.

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

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

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

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

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

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

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

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

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

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

✍ Разборчивость против удобочитаемости

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

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

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

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

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

Это еще один пример неорганизованности текста. Как и деталь, она может полностью затуманить сообщение контента или свидетельствовать об отсутствии изобретательности.

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

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

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

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

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

а) First Aid in Typography (Friedrich Forssman, Hans Peter Willberg) — типографский инструментарий, который поможет многим начинающим дизайнерам, попавшим в беду.

б) Shady Characters (Кит Хьюстон) — знание истории типографики и практические описания типографских символов.

в) «Основы стиля в типографике» (Роберт Брингхерст) — книга, обязательная к прочтению для типографов и не только. Вы найдете немного теории и знаний о создании целых типографских аранжировок.

г) Глоссарий Google Fonts — онлайновая база данных терминов и их определений, связанных с типографикой.

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

Читайте также: