Какова максимальная ширина текста на веб-странице? [закрытый]

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

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

9
css font-size fonts width

3 ответов

Smashing Magazine сделал исследование дизайна популярных блогов, который содержит только такую информацию. Информацию, которую вы ищете находится в разделе 2.2 приводится ниже.

2.2. Сколько символов в строке?

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

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

  • 10% использовали 65-74 символа в строке (PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped)
  • 18% использовало 75-84 символа в строке (Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm)
  • 34% использовали 85-94 символа в строке (Lifehacker, Huffington Post, Kottke, Ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger)
  • 18% использовали 95-104 символов в строке (Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, список отдельно, поисковая система Land)
  • 16% используется более 105 символов в строке (Engadget, TechCrunch, GigaOM, Wired, TMZ)

основываясь на наших выводах, мы уверены, что самая обычная (не обязательно самая удобная) длина линии лежит от 80 до 100 символов.

интересно отметить, что ни один блог не использовал оправданное выравнивание текста-100% блогов использовали левое выравнивание текста.

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

вы также можете взглянуть на то, что читабельности делает.

10

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

Итак, для вашего вопроса, я думаю, вы должны установить ширину в соответствии с вашим общим интервалом для шрифта (высота строки и заполнение/маржа содержимого) и убедитесь, что он хорошо сочетается в дизайне. Высота строки для шрифта должна быть где-то между 20px и 26px, в то время как заполнение/маржа зависит от стиля вашего дизайна.

надеюсь, что это помогает :)

1

Это зависит от того

  1. размер шрифта
  2. ширина столбца
  3. среднее разрешение экрана посетителя
  4. устройства вы поддерживаете.

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

тем не менее, если у вас есть один сплошной столбец текста, вы можете сократить длину строки, добавив

a) больше столбцов или
си) графика или фото

0