Матчасть

Типографский калькулятор

Это веб-приложение привнесит в веб те возможности, которыми уже 500 лет пользуются в полиграфии и печатном деле.
— Джефри Зельдман (JEFFREY ZELDMAN), блог A List Apart

Ampersand NYC 2013 web type design conference

2 ноября на конференции Ampersand NY, посвященной типографике в вебе, Ник Шерман (NICK SHERMAN) представил свой калькулятор (SIZE CALCULATOR) для расчета реального размера шрифта в зависимости от дистанции чтения и визуально воспринимаемых габаритов текста.

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

Например,

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

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

Пусть экран смартфона находится на расстоянии 20 см от лица читателя. Фиксируем замочком третий параметр (воспринимаемый размер) и указываем в качестве дистанции новое значение.

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

По сути это веб-приложение является аналогом трюка с книгой, который был описан в статье Оливера Райхенштайна «Основы адаптивной типографики».

Реклама
Стандартный
Видео, Матчасть

Человеко-ориентированное проектирование: Теория и практика

Выступление Дмитрия Сатина для стартапов в API.Moscow.

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

Стандартный
Статьи

Основы адаптивной типографики

Автор: Оливер Райхенштайн (OLIVER REICHENSTEIN), 1 июня 2012
Оригинал: http://ia.net/blog/responsive-typography-the-basics/
Адаптированный перевод: Егор Стремоусов, 1 ноября 2013

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

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

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

  1. Адаптивный макет: пошаговое изменение макета под ограниченное число размеров экрана.

  2. Резиновый макет: когда макет использует всю доступную ширину экрана.

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

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

Выбор шрифта

Правильный характер

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

Мы разработали свой собственный шрифт для нашего сайта с целью проведения адаптационных экспериментов. Мы выбрали шрифт с засечками, поскольку это соответствует нашему характеру и отражает изысканность наших материалов (по крайней мере, нам так кажется). Для iA Writer мы использовали моноширинный шрифт. Поскольку главной целью этого приложения является помощь в написании черновика, мы умышленно взяли Nitti — шрифт, который делает текст сильным и, в тоже время, аккуратным. Решение использовать моноширинный шрифт было продиктовано еще и тем фактом, что операционная система первого iPad не имела автоматического кернинга для пропорциональных шрифтов. Вместо того, чтобы использовать пропорциональный шрифт, который будет плохо смотреться, мы решили запустить приложение в жизнь с моноширинным шрифтом.

С засечками или без?

Обычно жребий падает между шрифтом с засечками и шрифтом без засечек. Сам по себе это сложный вопрос, но есть одно правило, которое может вам помочь: «Шрифт с засечками — это священник, а без засечек — хакер». Это не значит, что один лучше другого. Нет, просто по ряду причин антиква лучше передает авторитарные ощущения, а гротеск более демокартичен. Учтите, что пять тысяч лет типографского дела уместились в одно это кривое определение, поэтому не стоит относится к нему слишком серьезно.

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

Какой размер?

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

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

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

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

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

Мы пропагандируем эти размеры, «пропорциональные перспективе», с 2006 года. Изначально, наше утверждение, что шрифт Georgia размером 16 пикселей превосходно подходит для базового шрифта, вызвало волну агрессии и усмешек. Однако, теперь это более или менее устоявшийся стандарт. С ростом разрешений экранов этот стандарт медленно устаревает, но об этом позже.

Высота строки и контраст

Если размер текста может быть найден при помощи трюка с книгой, то высота строки тоже требует определения. Учитывая более длинную дистанцию чтения и так называемую «пиксельную грязь», разумно задать высоту строки экранному тексту больше, чем печатному. 140% — это хороший ориентир, но, естественно, конкретное значение зависит от используемого шрифта.

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

iPhone vs iPad

Все, что мы узнали про адаптивную типографику, пришло из процесса поиска идеальной типографики в нашем приложении. Когда мы разрабатывали iA Writer для iPad, мы потратили несколько недель на разработку правильных параметров текста. Тогда высокое разрешение экрана iPad стало для нас испытанием, которое потребовало определенного времени на преодоление. Когда Apple встроила retina-дисплеи в iPad и iPhone, все началось заново. Мы могли бы написать целую книгу о том, как получили канонический вид шрифта в iA Writer, но пока есть так много, что нужно рассказать о более общих вещах, я попридержу коней.

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

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

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

  2. Экран iPhone меньше, и приходится учитывать это ограничение.

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

Поскольку iPhone преподносится к лицу ближе, а размер экрана у него меньше, то высота строки также уменьшается:

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

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

А что с настольными компьютерами?

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

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

Вы можете спросить: «Почему вы не позволили пользователю самому определять размер шрифта?». Потому что размер шрифта не зависит от вкусовых предпочтений человека, а определяется дистанцией чтения. Поскольку большинство сайтов и приложений используют небольшой размер шрифта, новые пользователи с самого начала будут устанавливать привычный им маленький размер и никогда не смогут испытать настоящее удовольствие от работы с нашим приложением. Наша цель не в том, чтобы добиться одинакового отображения у всех пользователей, а в том, чтобы iA Writer работал без настроек и без лишних заморочек, позволяя сосредоточится лишь на написании текстов. Такой подход является ключом к успеху этой программы и, если его поменять, пропадет сама суть приложения. (Что действительно стоит улучшить, так это доступность для людей с ограничениями по зрению).

Хорошо, но почему бы тогда не подстраиваться под разрешение экрана автоматически? Не будет ли это действительно адаптивной типографикой? Все верно, и мы уже работаем в этом направлении. Но сейчас, помимо адаптации к разрешению экрана необходимо также выбирать правильный оптический вес текста, чтобы быть уверенным, что шрифт работает именно так, как и задумывалось, во всех размерах и разрешениях. С изменением размера шрифта поменяется также и оптическое восприятие текста. Вот почему версии iA Writer для Mac, iPad 1/2 и iPad3 отличаются друг от друга. Чтобы объяснить логику адаптации шрифтов полностью, а также наши соображения, которыми мы руководствовались при разработке нового сайта, мне потребуется немного больше времени и пространства. Так что ждите продолжение!

Отзывы

Несмотря на отсутствие социальных кнопок на странице, эта статья получила большое количество ретвитов и очень мало критических замечаний (в основном по вопросу разницы между адаптивностью и резиновостью, который я хочу рассмотреть позднее). Я был удивлен когда Джошуа Портер (JOSHUA PORTER) спросил:

«@iA Дочитал до фразы „проектирование взаимодействия — это инженерная деятельность“. Что это значит?» @bokardo

На случай, если кому-то еще будет интересно… Полная цитата звучит так:

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

Обычно я говорю:

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

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

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

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

Резюмируя, можно сказать, что в процессе проектирования сайтов и приложений, большую часть времен мы думаем о компромиссах и выбираем из всех зол наименьшую. Это то, что выбивает большинство графических дизайнеров из колеи, поскольку они привыкли к тотальному контролю. Больше информации об этом вы можете почерпнуть в великолепной презентации Чои Вина (KHOI VINH) «Разница между графическим и экранным дизайном» (2007).

Стандартный
Видео, Матчасть

Человеко-ориентированное проектирование сайтов

1 октября 2013 года состоялась кейс-конференция «Как мы делаем такие сайты», организованная аналитическим порталом рынка веб-разаработок CMSMagazine.

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

human centered design

Согласно этому подходу, проектировать следует в таком порядке:

  1. Стратегия дизайна
  2. Портрет потребителя (персонаж)
  3. Сценарий взаимодействия
  4. Прототип (макет)
  5. Проверка (тестирование) прототипа

При этом в стратегии дизайна следует рассмотреть, четко прояснить и зафиксировать следующие вещи:

  1. Цели
    Для чего это все делается?
  2. Целевая аудитория
    Для кого это делается?
  3. Маркетинг (откуда они узнают?)
    Какие каналы и способы привлечения внимания будут использоваться?
  4. KPI (показатели успеха)
    Количественные и качественные, отслеживаемые результаты работы сайта

Портрет потребителя формируется из:

  1. Профиль
    Возраст, пол, место проживания и т.д.
  2. Потребности (мотивы)
    Какие у него проблемы?
    К чему стремимся?
    Жизненная ситуация
  3. Цели (образ результата)
    Что ему нужно, чтобы решить проблему?
  4. Поведение
    Как он решает проблему без нас?
    Как выглядит его день (жизнь)?

Для разработке сценария взаимодействия необходимо

  1. Выписать шаги решения задачи при помощи сайта
    Что спрашивает потребитель?
    Что отвечает сервис (поставщик)?
  2. Думать о людях, а не сайтах!

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

Какие проблемы ждут потребителя?
Что может не хватать потребителю для получения услуги?

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

Любой жаждущий более подробных нюансов процесса человеко-ориентированного проектирования может углубится в ГОСТ Р ИСО 9241-210—2012 «ЭРГОНОМИКА ВЗАИМОДЕЙСТВИЯ ЧЕЛОВЕК—СИСТЕМА. Часть 210: Человеко-ориентированное проектирование интерактивных систем» (ISO 9241-210:2010 Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems (IDT)).

***

Для всего мира отличным примером присутствия правительства в интернете являются госсайты Великобритании.

Благодаря специально созданной структуре Government Digital Service, в этой стране формируется и культивируется правильное взаимодействия человека и государства в цифровой среде. Чего только стоят разработанные этой командой принципы дизайна!

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

UPDATE: Сайт Минкомсвязи о планах по повышению качества жизни на 2012-2018 годы.

***

P.S. Бонус для самых терпеливых, для тех, кто смог осилить пост до конца. Собственно, само видео выступления Дмитрия Сатина, а также еще 11 докладов из секции Как мы делаем государственные сайты 🙂

Стандартный
Матчасть

Дизайн и юзабилити интернет-магазина

Предлагаю вашему вниманию скромную презентацию, по которой я с горем пополам выступил год назад на конференции про интернет-магазины.

И хоть она и называется «Дизайн и юзабилити интернет-магазина», но про конкретно интернет-магазины там ничего нет. В ней вообще про дизайн, юзабилити и вот это всё.

Стандартный
Статьи

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

Автор: Крис Пирсон (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 пикселям.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Стандартный
Статьи

О верстке вертикального ритма

Ритм в теории музыки — соотношения длительностей
звуков (нот) в их последовательности.

— Википедия

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

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

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

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

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

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

Расчет интересующей нас высоты линейного блока происходит по следующему алгоритму:

  1. Определяется высота каждого строчного блока в линейном блоке.

  2. В соответствии со свойством vertical-align строчные блоки выстраиваются по вертикали.

  3. Определяется высота линейного блока как расстояние от верхней границы самого верхнего строчного блока до нижней границы самого нижнего блока.

Следует помнить, что пустые строчные блоки так же влияют на расчет высоты линейного блока, поскольку, несмотря на отсутствие содержимого, имеют внутренние и внешние отступы (padding и margin), границу (border), высоту строки (line-height), а также заданные размеры (width и height).

Таким образом, значимыми CSS-свойствами для расчета высоты линейного блока являются:

  • padding-top, padding-bottom

  • margin-top, margin-bottom

  • border-top, border-bottom

  • height

  • font-size

  • line-height

  • vertical-align

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

Padding, margin, border

Свойства padding-top, padding-bottom, margin-top, margin-bottom, border-top и border-bottom не увеличивают высоту строчного блока на собственное значение, однако учитываются при расчете высоты линейного блока.

Height

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

Line-height и font-size

При прочих отсутствующих значениях, высота строчного блока равна значению line-height. Свойство font-size напрямую не влияет на расчет высоты строчного блока, но может делать это косвенно в ситуации, когда значение line-height задается относительным.

Важно понимать, что свойства line-height и font-size связаны между собой понятием интерлиньяжа.

В CSS, интерлиньяж — это разница между размером шрифта и вычисляемым значением line-height. Эта разница в виде свободного пространства распределяется сверху и снизу от отображаемых глифов поровну (дробные значения округляются до целых). Образованные части называются половинным интерлиньяжем.

Если значение line-height меньше, чем значение font-size, то образуется отрицательный интерлиньяж, что может приводить к наложению текста в соседних линейных блоках друг на друга.

Vertical-align

Свойство vertical-align смещает строчные блоки внутри линейного блока по вертикали, «растягивая» его высоту

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

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

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

Пример из жизни

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

Для определения требуемых стилевых правил воспользуемся упомянутым выше (или любым другим) генератором вертикального ритма.

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

Причина проблемы в выравнивании по базовой линии (навязано набором правил из reset css) и фиксированном line-height (определен генератором). Уменьшение размера шрифта ведет к увеличению половинного интерлиньяжа и к смещению второго строчного блока вниз, что, в свою очередь, приводит к увеличению высоты линейного блока.

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

Ссылки по теме

Генераторы вертикального ритма:

http://topfunky.com/baseline-rhythm-calculator/
http://drewish.com/tools/vertical-rhythm
http://toki-woki.net/p/Boks/
http://baselinecss.com/

Рекомендуемые к прочтению статьи о верстке вертикального ритма:

http://www.alistapart.com/articles/settingtypeontheweb
http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.1/
http://24ways.org/2006/compose-to-a-vertical-rhythm
http://thegrids.ru/literature/31
http://habrahabr.ru/blogs/typography/78322/

Стандартный