Золотое сечение в типографике
В течение нескольких последних дней я прокручивал в своей голове вопрос “какова же идеальная высота строки для размера шрифта в 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