fonts - 网页上文本的最大宽度是多少?

标签 fonts width font-size css

<分区>

我有一个流畅的布局,但如果浏览器窗口被拉得太长,文本会变得很宽,以至于在 1 行上阅读这么长的句子是很奇怪的。文本的最大宽度是多少?我想这取决于字体大小。有某种公式或启发式吗?

目前我的特定情况下的字体是 serif 16px,但我很想知道不同字体和大小的最佳做法是什么。

最佳答案

Smashing Magazine 做了 a design study of popular blogs仅包含此类信息。您要查找的信息位于下面引用的第 2.2 节中。

2.2. How many characters per line?

To ensure best readability one needs to ensure comfortable reading. While some research results claim that an optimal line length is 52 – 68 characters per line (including punctuation marks and empty spaces), other studies show that even if the lines are getting longer it does not significantly affect usability. Since no rules of thumbs are provided, designers experiment with a variety of different line lengths.

To compute the max. number of characters per line we have used default setting of the browser as well as default typographic settings provided by the style sheets.

  • 10% used 65-74 characters per line (PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped)
  • 18% used 75-84 characters per line (Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm)
  • 34% used 85-94 characters per line (Lifehacker, Huffington Post, Kottke, Ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger)
  • 18% used 95-104 characters per line (Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, Search Engine Land)
  • 16% used over 105 characters per line (Engadget, TechCrunch, GigaOM, Wired, TMZ)

Based upon our findings we feel confident to suggest that the most usual (not necessarily most user-friendly) line length lies between 80 and 100 characters.

It is interesting to remark that not a single blog used justified text-alignment — 100% of the blogs used left text-alignment.

所以宽度并不重要,影响可读性的是字符数。

关于fonts - 网页上文本的最大宽度是多少?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7460041/

相关文章:

html - html和每个元素通常使用什么字体大小?

html - 为什么 `font-size` 不等于 `height` ?所以在右边,如果 <span> 是 2rem,在右边我可以有 2 个小的 <span>,每个 1rem

Javascript/jQuery 获取 float 受影响元素的真实宽度和位置?

objective-c - UILabel字体大小?

android - 在缩放的 Canvas 上测量文本

html - 使用带有嵌套文本的 HTML <i> 标记来呈现图标

ios - iPad 上的 Google 网络字体

ios - 使用 Helvetica Neue Light - Html5 IOS 应用程序

html - 如何为调整窗口大小设置固定的最小宽度大小?

PHP:测试换行的行长