Существует ли оптимальное соотношение размеров шрифта /линии?

При стилизации текста на веб-страницах можно установить размер шрифта и высоту строки. Например, текст этого сообщения будет отображаться с помощью font-size из 14px и line-height of about about 18px, установите значение 1.3em.

Глядя на другие веб-сайты, кажется, что соотношение около 1,2 - обычная практика.

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

71 голос | спросил Yannick Blondeau 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 15:46:46 +0400000000pmFri, 22 Feb 2013 15:46:46 +040013 2013, 15:46:46

9 ответов


32

Вы хотите посмотреть на сайты, такие как W3.org за советом по этому вопросу.

  

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

Руководства по доступности W3C 1.4.8 state (основное внимание):

  

Визуальная презентация: для визуального представления блоков текста доступен механизм для достижения следующего: (Уровень AAA)

     

Пользователь может выбрать цвета переднего плана и фона.

     

Ширина не более 80 символов или глифов (40, если CJK).

     

Текст не является оправданным (выравнивается как с левым, так и с правым краем).

     

Межстрочный интервал (ведущий) не менее чем в два раза в пределах абзацев, а интервал между абзацами по меньшей мере в 1,5 раза больше, чем расстояние между линиями.

     

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

ответил JonW 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 16:03:53 +0400000000pmFri, 22 Feb 2013 16:03:53 +040013 2013, 16:03:53
16

В статье Оптимальная высота линии говорится:

  

Элементы TypogArafy refÂerÂÂÂÂÂÂÂÂÂÂ Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â,

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

  

В конструкциях требуются длины линий (или meaÂsure), особенно длинные, чем те, которые были изменены в типографских рефлексах. Увеличенная длина линии требует увеличения высоты линии для отслеживания глаз.

Собственно, это субъективно, поэтому, например, Amazon Kindle позволяет выбрать высоту строки из нескольких вариантов (и увеличит пробелы между абзацами соответственно).

ответил alexeypegov 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 16:07:21 +0400000000pmFri, 22 Feb 2013 16:07:21 +040013 2013, 16:07:21
14

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

Лично мне нравится, что строка-строка должна быть 1.5em или 1.6em.

Это интерактивное руководство по типографии блогов имеет раздел о высоте строки , который также предлагает высоту строки 1.5em.

ответил Kristof Claes 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 16:03:31 +0400000000pmFri, 22 Feb 2013 16:03:31 +040013 2013, 16:03:31
10

Вот выдержка из очень удобной статьи об этом:

  

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

     

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

     

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

     

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

     

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

Это становится намного сложнее, поэтому здесь ссылка на калькулятор, который обрабатывает математику для вас. http://www.pearsonified.com/typography/

ответил Alex 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 19:54:47 +0400000000pmFri, 22 Feb 2013 19:54:47 +040013 2013, 19:54:47
10

Нет единого ответа

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

В отличной статье Трой Темплмана Основные правила Хорошая типография , он говорит (внимание мое):

  

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

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

Сравнение x-высот между шрифтами.

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

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

Статья Марка Боултона Пять простых шагов к лучшей типографии указывает:

  

Ваше лидерство должно увеличиваться пропорционально вашей Мера. Маленький   Мера, менее ведущая. Широкая мера, более высокая. Это просто, но   эффективное правило.

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

Как вы можете видеть, невозможно выбрать одну оптимальную высоту линии. Скорее, вы должны в первую очередь учитывать x-высоту шрифта и длину строк в тексте. Обязательно прочтите отличный ответ Алана Гилбертсона на очень похожий вопрос на сайте Q & Graphic Design.

ответил Chris Calo 1 MarpmFri, 01 Mar 2013 19:35:47 +04002013-03-01T19:35:47+04:0007 2013, 19:35:47
5

Пожалуйста, обратитесь к этой статье: http: //uxdesign.smashingmagazine .com /2011/11/29 /the-perfect-paragraph / - очень интересный, описывающий также некоторые другие аспекты текста на веб-сайтах.

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

ответил Dominik Oslizlo 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 16:02:18 +0400000000pmFri, 22 Feb 2013 16:02:18 +040013 2013, 16:02:18
3

Я нахожу эту статью от архитекторов информации вкл. очень интересно.

В соответствии с этим (см. раздел 3) 1.4em является хорошим значением для удобочитаемости.

ответил Daniele 22 FebruaryEurope/MoscowbFri, 22 Feb 2013 16:16:50 +0400000000pmFri, 22 Feb 2013 16:16:50 +040013 2013, 16:16:50
2

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

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

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

ответил AMG 16 TueEurope/Moscow2014-12-16T00:58:30+03:00Europe/Moscow12bEurope/MoscowTue, 16 Dec 2014 00:58:30 +0300 2014, 00:58:30
1

Здесь вы можете найти очень хорошие ресурсы по этому вопросу:

Лучший ресурс: https : //developer.mozilla.org/en-US/docs/Web/CSS/line-height

Очень хороший пример, чтобы увидеть разницу между всеми значениями и , почему предпочитается использовать числовое значение.
https://codepen.io/anon/pen/ObxKjJ

По-моему, я предпочитаю использовать от 1,5 до 2 , потому что промежуток между 1,5 и 2 позволяет им легко запускать новую строку, как только они закончили предыдущую.

ответил Artiom S. 29 22016vEurope/Moscow11bEurope/MoscowTue, 29 Nov 2016 21:51:36 +0300 2016, 21:51:36

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132