Веб-дизайн для детей: Типографика

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

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

Типографика везде. Это то, как мы видим написанные слова. А значит, везде, где мы видим слова, мы видим типографику. Слова могут быть как на экранах, газетах, так и на вывесках.

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

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

Typeface против Fonts

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

В нашем дизайне Tuts+Town применен шрифт «Open Sans». Мы используем разные размеры и насыщенность у typeface, а они в свою очередь подсказывают, какой шрифт грузить на странице.

Итак, пока мы используем определенные шрифты на нашем сайте, эти шрифты основаны на typeface (дизайне шрифта), на которые некоторые дизайнеры потратили много времени.

Serif против Sans-Serif

Typeface может быть serif (с засечками) или sans-serif (без засечек). Serif это шрифт с засечками на концах некоторых букв. Шрифт serif с засечками:

Наш шрифт Open Sans это шрифт без засечек; т.е. без serif. У sans-serif шрифтов нет этих засечек, как на букве ниже:

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

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

Части шрифта

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

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

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

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

Расстояние

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

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

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

Кернинг и Трекинг

Керинг это расстояние между каждым символом.

Каждый шрифт, который мы используем, имеет собственные значения кернинга, но мы можем изменить их с помощью CSS и свойства letter-spacing:

Трекинг это расстояние между каждой группой символом или слов.

Если в шрифте по умолчанию слишком маленькое расстояние между словами, мы можем изменить его с помощью свойства word-spacing:

Лидинг

Лидинг это межстрочное расстояние предложений.

Мы можем изменить межстрочное расстояние, установленное по умолчанию для шрифта, используя свойство line-height.

Значение 2 обеспечит нам двойное межстрочное расстояние от значения по умолчанию.

Висячие строки (Вдовы и сироты)

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

«Сиротой» называют слова, которые оказались на первой строке другой колонки. Обычно за ними следует новый абзац.

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

Выравнивание текста

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

Левое выравнивание

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

Выравнивание по центру

Выравнивание по центру часто используется для названий и заголовков. Такое выравнивание помогает выделить заголовки из основного текста. Мы можем выровнять текст по центру в CSS с помощью свойства text-align, к примеру:

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

Выравнивание по правому краю

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

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

Выравнивание по правому краю на изображении выше сделано с помощью CSS:

Общие советы

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

Font-size и визуальная иерархия

Размер шрифта (font-size) меньше чем 16px для основного текста на странице считается слишком маленьким и затруднительным для чтения на экранах.

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

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

Иерархия здесь показывается разным размером шрифта, цветом и расположением на странице.

Контраст

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

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

Количество шрифтов

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

Веб-шрифты

Не все шрифты отлично работают в интернете и одновременно хороши для печати. К счастью Шрифты Google, которые мы использовали для импортирования Open Sans в наш сайт Tuts+Town, предоставляют большой список шрифтов, подходящих к отображению в сети.

Заключение

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

Автор: Joni Trythall

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: