Статьи

Секретная симфония: подробное руководство по удобочитаемой типографике в вебе

Автор: Крис Пирсон (CHRIS PEARSON), декабрь 2011
Оригинал: http://www.pearsonified.com/2011/12/golden-ratio-typography.php
Перевод: Егор Стремоусов (28 декабря 2011)

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

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

Математическая симфония типографики

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

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

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

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

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

Вывод из этого:

Математические пропорции типографики — это жизненно важный фактор для восприятия сайта и его содержания.

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

Три фундаментальных типографских параметра

Каждый параграф текста, который вы видите, имеет 3 основных измеряемых параметра. Первые два, размер шрифта и высота строки — измеряются по вертикали.

Рисунок 1 — Как размер шрифта и высота строки представлены в браузерах.
Размер шрифта — это расстояние от верней точки заглавной буквы (S) до нижней границы нижних выносных элементов (y). Высота строки делится пополам и равномерно распределяется сверху и снизу от центра строки.

Третий параметр, длина строки, измеряется по горизонтали.

Рисунок 2 — Высота и длина строки — это вертикальная и горизонтальная метрики типографики.

Эти три параметра вместе определяют то, как вы воспринимаете текст.

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

Ниже, на рисунке 3, высота и длина строки зафиксированы, а размер шрифта изменяется от 13 до 16 пикселей.

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

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

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

Размер шрифта и высота строки имеют прямо пропорциональную зависимость.

В следующем примере размер шрифта и высота строки фиксированные, а длина строки варьируется от 233 до 466 пикселей.

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

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

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

Эти выводы подтверждают проведенные исследования. В 2004 году Мэри Дайсон (MARY C. DAYSON) из Института Чтения (какая ирония, да?) установила, что:

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

Что это значит для нас? Это означает, что высота и длина строки имеют определенную математическую зависимость, а конкретно:

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

Но каков математический смысл этого соотношения?

Гармоничные пропорции и золотое сечение

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

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

Что же это за удивительные пропорции, которые «склеивают осколки этого мира»?

Конечно же, я говорю о золотом сечении.

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

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

Так, может быть, золотое сечение применимо для решения этой задачи?

Математика золотого сечения типографики

Как вы уже, наверное, догадались, ответом является решительное «да»! И вот как это работает.

Во-первых, размер шрифта (f) и высота строки (l) соотносятся через коэффициент подобия (h). Базовое математическое уравнение выглядит следующим образом:

Согласно этому уравнению, оптимальная высота строки получится в том случае, если коэффициент подобия h будет равен золотому сечению φ. Это дает нам следующее уравнение:

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы понять, как выпоняется корректировка, давайте рассмотрим пример.

Для шрифта с размером 16 пикселей идеальная высота строки получается тогда, когда коэффициент h равен золотому сечению (≈1.61 — Прим. переводчика). Это дает оптимальное значение для высоты строки, равное 25.88854 пикселя. Используя это значение, вы можете вычислить, что соответствующее оптимальное значение для длины строки равно 670.21670 пикселя.

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

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

Но 26 пикселей — это больше, чем оптимальная высота строки, полученная из уравнения. А как мы уже знаем, нельзя изменять высоту строки (даже на чуть-чуть!) без изменения соответствующей длины строки (в противном случае конечные пропорции не будут «золотыми»).

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

Эту суть корректировки параметров типографики:

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

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

Рисунок 5 — Для сохранения геометрических пропорций и удобочитаемости вместе с увеличением длины строки должна увеличиваться ее высота. Серая линия на этом графике представляет золотое сечение (φ), а цветные — изменение высоты строки относительно этого значения для наиболее распространенных размеров шрифта.

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

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

  1. скорректированную высоту строки, зная размер шрифта и длину строки;

  2. или скорректированную длину строки, зная размер шрифта и высоту строки.

Вычисления проводим при помощи следующих уравнений:

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

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

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

  • Что, если вы захотите использовать шрифт в 16 пикселей для текста шириной 550 пикселей?

  • Какой должна быть высота строки в этом случае?

Вы можете решить эту задачу следующим образом:

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

Калькулятор золотого сечения типографики

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

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

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

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

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

Если вы укажите и размер шрифта, и длину строки, то получите целый набор:

  • Оптимизированные параметры типографики для вашего размера шрифта и длины строки.

  • Лучшие значения параметров типографики для длины строки, которую вы указали.

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

  • Оптимальные значения типографики для указанного размера шрифта.

Попробуйте поиграть с калькулятором золотого сечения и познайте невиданное качество типографики!

Особое значение золотого сечения типографики

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

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

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

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

Заключение

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

Запомнили математическую симфонию типографики?

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

Реклама
Стандартный

4 ответ. на "Секретная симфония: подробное руководство по удобочитаемой типографике в вебе"

  1. Шикарная статья! Для меня на данный момент — самое оно! Многие вопросы отпали, а многие — прояснились.

    Хорошо переводишь, молодец!

  2. Опечатка. Не 658, а 685 — «в этом случае будет равна 685.32505 пикселя. Для использования этого значения в вебе, оно должно быть округлено до 658 пикселей.»

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s