Равносторонний треугольник идеального абзаца

«Читатель должен иметь возможность читать текст легко и комфортно. В немалой степени это зависит от размера шрифта, длины и высоты строк»  — Josef Mueller-Brockmann

М

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

Изображение 1: Саккады, движения глаз, иллюстрации (Источник: A List Apart).

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

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

Размер и цвет шрифта

Одна из популярных ошибок на веб-сайтах — устанавливать слишком маленький размер основного текста. В ранних 2000-х было общепринято устанавливать размер основного текста около 11 пикселей. Но тогда были меньше экраны и их разрешение. 11 пикселей тогда были больше, чем сейчас.

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

Изображение 2: Размер шрифта на экране совпадает с размером текста в книге на расстоянии руки. Саккады, движения глаз, иллюстрации (Источник: iA).

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

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

Изображение 3: Один и тот же текст в гарнитуре Merriweather выглядит больше и тяжелее, чем в Georgia.

Ширина строки

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

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

Изображение 4: Рекомендуемая ширина линии в Google’s Material Design Guidelines (Источник: material.io)

Высота строк

Высота строк — основная опора ритма в типографике. Мы рассмотрим это позже в ходе 6 урока «Ритм в веб-типографике».  А пока давайте посмотрим, что на что влияет высота строки.

Изображение 5: Высота строки работает иначе в вебе. Она равномерно распределяется ниже и выше строки текста.

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

Ширина линий влияет на высоту строки. Чем длиннее строки, тем больше пространства между ними. Размер шрифта влияет на высоту строки. Чем больше шрифт, тем больше должна быть высота строки. Цвет шрифта тоже влияет. Более темный и тяжелый шрифт требует большего пространства между строками. И, в конце концов, сама гарнитура может повлиять на пространство. Мы рассмотрим их позже, но я уже упоминал, что некоторые гарнитуры могут казаться больше, чем другие. Некоторые шрифты с засечками будут казаться более тяжелыми. Для них потребуется больше пространства между линиями.

Теперь, когда вы знаете, что высота строки очень важна и она никогда не должна рассматриваться как изолированное свойство, давайте посмотрим на лучшие общие практики. Для параграфов, идеальная высота строки обычно между 1,3 и 1,6. Соответственно, если размер основного текста 16 пикселей, то высота строки должна быть от 21 до 26 пикселей. Это зависит от одного из параметров, которые мы упомянули ранее: оформление гарнитуры, размер шрифта, вес и т.п.

Изображение 6: Одинаковая гарнитура, размер шрифта, разный цвет. Тёмный текст имеет большую высоту строки.  
Изображение 7: Одинаковая гарнитура, цвет, разный размер шрифта. Больший текст имеет большую высоту строки.
Изображение 8: Одинаковая гарнитура, размер шрифта, цвет, разная ширина строки. Чем длиннее строка, тем больше должна быть высота строки.
Изображение 9: Разные гарнитуры, одинаковый размер шрифта и цвет. Гарнитура, которая выглядит больше, требует большей высоты строк.

Заголовки обычно значительно короче, поэтому у них должны быть меньше пространства между строками, чтобы они не выглядели так, как будто они дрейфуют друг от друга. Рекомендуемая высота строк для заголовков от 1 до 1,2. Если размер заголовка 24 пикселя, то высота строки будет от 24 до 29 пикселей. Это может показаться немного нелепым, но сначала попробуйте. Когда вы поймете разницу, вы не сможете забыть про это.

Изображение 10: Заголовки (особенно большие) требуют меньшую высоту строки, чем у основного текста.

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

Равносторонний треугольник

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

Теперь, мы подходим к теме, которую я называю «Равносторонний треугольник идеального параграфа». Мы рассмотрели размеры шрифтов, ширину и высоту строк в изоляции (насколько это возможно). Делая это, мы уже узнали, что эти свойства взаимосвязаны. Их нельзя рассматривать изолированно, и они никогда не должны быть такими. Вот почему равносторонний треугольник — это идеальное представление хорошо составленного абзаца текста. Для этого нам нужен хороший размер шрифта, который соответствует ширине и высоте строки. Если выбрать один из параметров неправильно, ваш треугольник будет искажен.   

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

Изображение 11: Идеально сбалансированный параграф, представленный равносторонним треугольником.
Изображение 12: Строки текста в этом параграфе слишком широкие. Треугольник больше не равносторонний. Чтобы это исправить, нам нужно либо сделать больше размер шрифта и высоту строки, либо уменьшить ширину линии.  
Изображение 13: В этом параграфе слишком большая высота строки. Строки текста начинают распадаться на части. Этот пример можно улучшить, если мы увеличим ширину строк текста. Чтобы сохранить пропорции, нам также придется немного увеличить размер шрифта.
Изображение 14: Размер шрифта кажется слишком огромным в этом параграфе.  Это сокращает ширину строки до 30 знаков и полностью искажает треугольник. Строки текста слишком близко друг к другу.  Чтобы это исправить, нам нужно либо уменьшить размер текста, или увеличить высоту и ширину строк текста.

Смотрите также

Статья: How we read

Chrome-плагин: Measure

Статья: Readability: the optimal line length

Изображение: Type Leading

Уроки

Предыдущий: Введение в типографику 

Следующий: Анатомия гарнитуры

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

По материалам https://betterwebtype.com/