Моя последняя статья в этой серии содержала исчерпывающий взгляд на получение шрифта в Интернете , включая все аспекты технологии @ font-face. Теперь, когда мы можем получить шрифты, которые мы хотим отобразить в Интернете, давайте продолжим настраивать этот тип красиво. В отличие от предыдущей статьи, следующие статьи о более тонкой эстетике будут разбиты на более мелкие, более удобочитаемые сообщения.
Определение и цель
Поначалу типографика может показаться по своей сути скучной областью: она касается шрифтов и размеров, выделяет их жирным шрифтом и курсивом, что может показаться довольно произвольным или сложным: с чего начать?
Определения избегают путаницы, а цель дает нам свет в конце туннеля. Проще говоря, типография — это искусство создания и установки шрифта с целью почтения текста, который он устанавливает .
Вы уже приняли «типографское» решение, выбрав подходящий шрифт (цифровой, шрифт) для любого проекта, который вы имеете в виду. Следующим шагом является работа с заголовками, подзаголовками, абзацами, списками, таблицами, выдержками, цитатами и их многочисленными братьями и сестрами (микро), путем выбора порядка их организации на странице (макрос: сетки, столбцы и поля). ). Затем мы можем выделить, как они связаны друг с другом (типографская иерархия).
Типография существует везде, где есть установленный тип (то есть подвижный тип ): это касается финансовых отчетов, местной газеты, картонных коробок с хлопьями, романов на наших прикроватных тумбочках, религиозных писаний и, как следствие, «подвижного типа» в Интернете.
Почему? Пожинать плоды
Каждый из нас, вероятно, хорошо разбирается в том, что мы считаем хорошей типографикой. Глядя на местную газету, или коробку с хлопьями, или книги на книжной полке, вы, вероятно, сможете перечислить ряд свойств, которые делают его «хорошим».
Преимущества нашего типографского выбора очевидны сразу, и два наиболее важных из них — это удобочитаемость текста и его удобочитаемость.
разборчивость
Разборчивость относится к распознаваемости отдельных глифов (отдельные маркировки, которые обозначают семантический символ (ы)). На разборчивость глифа влияет ряд факторов: обводка, ширина, угол (обводки), стиль (например, роман, полные заглавные буквы), наклон (всего стиля), цвет (фактический цвет и типографский цвет, т.е. контраст), цвет фона и многое другое.
читабельность
Разборчивость отличается от читабельности. Читаемость относится к распознаваемости целых слов, предложений, абзацев, таблиц или чего-либо, что представляет собой массовый текст. Диапазон читаемости влияет на читаемость: мера (длина строки), начальное значение (высота строки или интервал), выравнивание или выравнивание, стиль шрифта, кернинг и отслеживание, размер шрифта и многое другое.
Конечно, оба взаимосвязаны; Изменения размера точки повлияют на разборчивость как отдельных глифов, так и слов, которые они составляют.
Выделите отношения и обеспечьте навигацию
Типография может навести эстетический порядок на информацию, помогая пользователям читать и ориентироваться.
Точно так же, как руководящие принципы доступности WCAG ( WCAG 2.0, § 2.4 ), обеспечивающие понимание гиперссылок вне контекста, типографская иерархия придает тексту определенную сжимаемость. Хорошая типографская иерархия позволяет легко перемещаться по тексту в целом, так что читатели могут снова найти свои места или пропустить лишнюю вводную информацию и сразу перейти к тому, что ищут.
Хорошая типографская иерархия будет предоставлять визуальные подсказки читателям: заголовки имеют размер и стиль таким образом, что их сразу можно идентифицировать как заголовки; абзацы одинаковы по стилю, а их начало и конец хорошо выделены; цитаты узнаваемы, отдельно от абзацев, к которым они приложены или окружены, и так далее.
Хорошие типографские иерархии также иллюстрируют внутренние связи между элементами на странице: метки размещаются в непосредственной близости от графиков, диаграмм и графиков, а благодаря их близости идентифицируются как описательные обозначения.
В другом примере представьте более сложный двухцветный дизайн. Таблица с квартальными показателями прибыли может иметь светло-синий фон, в то время как соседняя таблица с подробным описанием квартальных убытков может иметь мягкий красный фон, а совокупность этих двух значений, наложенных друг на друга на линейном графике, будет иметь линия прибыли в сильном синем, и линия, изображающая потери в жестком красном. Обозначения на графике должны содержать легенду, но цвет также может использоваться для обозначения отношений.
Цвет, стиль шрифта, интервал, положение, отступ и ряд других стилистических вариаций могут использоваться для обозначения взаимосвязи между элементами на странице или между страницами — и для всего сайта в целом.
Заработанные или незаработанные качества
Как отмечалось ранее, мы сознательно (и подсознательно) судим о типографии текстов. Вернитесь в газету или вытащите книгу с книжной полки и опишите, как выглядит текст. Газета может быть смелой и почти дешевой на вид, тогда как книга по социальной психологии может быть чистой и организованной, дополненной сносками и легко просматриваемыми ссылками.
Типография придает тексту качества или определенный интерес. Текст может показаться привлекательным, грациозным, безмятежным, карикатурным, хитрым, неуравновешенным и / или скучным, и, что важно, эти качества могут быть как заслуженными, так и незаработанными. Хороший типограф будет смиренно чтить текст, который они устанавливают, в честь значения этого текста. Плохая типография или недостаток заботы могут отпугнуть читателей чувством скуки, недоступности или дешевизны.
Индуцирование состояния интереса
Наконец, хорошая типография может вызвать интерес у потенциальных читателей. Просто украсьте текст уважением, которого он заслуживает; если текст хороший и предназначен для прочтения и понимания, уделите ему типографское уважение, на которое он имеет право. При этом вы будете вызывать состояние интереса к просмотру читателей.
В заключение
Роберт Брингхерст однажды сформулировал: «правильно подобранные слова заслуживают правильно подобранных букв». Хорошая веб-типография должна стремиться пригласить читателей, раскрывая смысл и смысл текста, а также подчеркивать взаимосвязи посредством единой иерархии для удобства навигации.
Другими словами, веб-опыт с хорошей типографикой проще и приятнее для чтения и использования.
Обращайте внимание на следующую статью, которая будет охватывать конкретные практические правила для достижения хорошей читаемости и читабельности.