Размер шрифта, высота и длина строки по Золотому Сечению

09.02.2019

В течение нескольких последних дней я прокручивал в своей голове вопрос “какова же идеальная высота строки для размера шрифта в 14px на моем экране?”

Я просмотрел множество сайтов, чтобы определить, как же люди её вычисляют, и обнаружил несколько интересных цифр:

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

Фреймворк Twitter Bootstrap использует цифру (1.42857) как отношение между размером шрифта и высотой строки (line-height = font-size * 1.42857).

HTML5 boilerplate используе почти ту же цифру: (1.4).

Medium и zurb foundation фреймворк используют одно и то же значение для высоты строки, которое равно (1.5).

Возможно вам также будет интересно, что adobe topcoat остановился на цифре (1.313), а yahoo purecss использует (1.58). Так какое же отношение выбрать?

Помните, что отношение 1.5 – это то значение, которое является рекомендованным в классических типографических книгах.

Основы типографики для начинающих дизайнеров

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

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

“Какова же лучшая ширина строки для размера шрифта в 14px и высоты строки в 23px?”

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

Так как же определить взаимосвязь размера шрифта и ширины строки? Всё что я знаю – это то, что ширина строки значительно больше высоты. Для начала неплохо!

Прочитав несколько исследований о лучшем количестве символов в строке (СВС), я обнаружил, что более 60% всех людей читают быстрее с 70 СВС. Вот краткий вывод:

Текст с длиной строки в 55 СВС лучше и быстрее читается, а информация усваивается лучше, чем при длине строки в 25 или 100 символов.

Оптимальная ширина строки в одной колонке варируется от 45 до 75 СВС. Для нескольких колонок длина строки должна быть от 30 до 50 СВС.

Ширина строки должна быть примерно в 30 раз (от 20 до 40) больше размера шрифта.

Люди предпочитают короткие строки в 8-10 слов или от 45 до 60 символов.

Никакого фиксированного значения для ширины строки не существует, но идеальное значение находится где-то между (30-90 СВС) или (8-12 словами).

Давайте рассчитаем ширину строки:

ширина строки = средняя ширина символа * СВС

Средняя ширина символа = размер шрифта / константа (1.618)

В итоге имеем:

Размер шрифта = 14px

Высота строки = (14 * 1.618) = 23px

Ширина строки на 50 СВС = 50 * (14 / 1.618) = 433px

Ускорить процесс вычисления оптимальной высоты и ширины строки в вашем следующем проекте можно с помощью SASS операторов и переменных.

Демо

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


Перевод статьи: Font size, line height and line width the golden ratio way

  Подписаться  
Сообщать о: