Идеальная ширина столбца для абзацев онлайн

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

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

Я думаю, это сводится к словам в строке. Являются ли правила, применимые к печатным СМИ, одинаковыми для экранных носителей?

Существуют ли какие-либо рекомендации, которые помогут мне определить ширину абзацев на экране?

Я хочу принять во внимание:

  • Основные шрифты веб-шрифтов (т. е. Arial, Вердана, Джорджия, Таймс)
  • Размер шрифта диапазона (т. е. 8px-24px)
  • Пробел между столбцами
91 голос | спросил theorise 17 FebruaryEurope/MoscowbThu, 17 Feb 2011 20:18:42 +0300000000pmThu, 17 Feb 2011 20:18:42 +030011 2011, 20:18:42

2 ответа


83

Идеальная длина линии достаточно короткая или достаточно длинная; что вообще эстетически приятно читать, как правило, является хорошим показателем.

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


Некоторые краткие справочные данные и цифры,
  

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

     

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

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

Общие правила большого пальца

Возьмите их с солью, это всего лишь рекомендации; не стесняйтесь их разорвать. Повторяю, они не «одно правило для всех», которое нужно принять; просто нажатие /ключ в правильном направлении.

  • 12 слов в строке
  • 39 символов, независимо от размера шрифта (по алфавиту с половиной)
  • умножьте размер точки на 2 и интерпретируйте его как picas (points-times-two)
  • около 50-60 до не более 75 символов (включая пробелы) - это обычно правило, заимствованное у наших друзей в типографии.

«Элементы типографического стиля» Роберта Бринхерста упоминает следующие более конкретные измерения

  • Длина строки от 45 до 75 символов (мера); в частности 66, включая пробелы; Единая колонка
  • от 40 до 50 символов; мульти-колонки литий>
  • от 85 до 90 символов; прерывистый текст; щедрое лидерство
  • 40 символов (минимум); оправданная
  • от 12 до 15 символов; маргинальные записи; Английский

Переменные в читаемости:

  • размер шрифта
    • больше = я пробовал, (некоторые) люди находят это раздражающим. Просто нацелитесь на счастливый «средний размер».
    • medium /standard = большая ширина
    • меньше = меньшая ширина
  • высота строки
    • large (1.9+) = легче сканировать строки, более длинные строки становятся более приемлемыми
    • normal = более короткие строки
    • less = очень короткие строки
  • длина содержимого
    • big blob = длинные строки + большая линия-высота
    • короткое сообщение = короткие строки + разумная линейная высота

Пока вы придерживаетесь «здравого смысла в юзабилити», никакая настройка не будет неправильной, как таковая. В отличие от большинства аспектов дизайна, вы можете также протестировать его на себе, просто поместите в элемент некоторый читаемый контент (не обязательно, что, возможно, стоит туда и, возможно, свежий!) И посмотрите, можете ли вы с комфортом его прочитать. Если можно, отлично; в противном случае настройте его до тех пор, пока настройка не будет соответствовать вашему контенту (проверьте его с помощью нескольких шрифтов, а не только вашего основного).

ответил srcspider 17 FebruaryEurope/MoscowbThu, 17 Feb 2011 22:17:49 +0300000000pmThu, 17 Feb 2011 22:17:49 +030011 2011, 22:17:49
7

Также ознакомьтесь с этой ссылкой: http://www.informationarchitects.jp/en/100e2r/.

  

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

A

  

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

A

  

Высота строки HTML по умолчанию слишком мала. Если вы увеличиваете высоту строки, текст становится более читаемым. Для типа на экране, 140% ведущих является хорошим эталоном.

Они предлагают иметь 100% размер шрифта (по умолчанию для браузера), 10 - 15 слов в строке (обычно 50% окна браузера с шрифтом по умолчанию), 140% высоты строки - это звучит довольно разумный для меня.

ответил Nikita Prokopov 18 FebruaryEurope/MoscowbFri, 18 Feb 2011 13:35:06 +0300000000pmFri, 18 Feb 2011 13:35:06 +030011 2011, 13:35:06

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

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

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