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

发布于 2024-12-05 07:26:51 字数 1459 浏览 0 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

没有伤那来痛 2024-12-12 07:26:51

Smashing 杂志对流行博客进行了一项设计研究 就包含此类信息。您要查找的信息位于下面引用的第 2.2 节中。

2.2。每行多少个字符?

为了确保最佳的可读性,需要确保舒适的阅读体验。
虽然一些研究结果声称最佳线路长度是 52 –
每行 68 个字符(包括标点符号和空格),
其他研究表明,即使队伍变长,它也会
不会显着影响可用性。由于没有经验法则
前提是,设计师尝试了各种不同的生产线
长度。

计算最大值。我们使用默认的每行字符数
浏览器设置以及默认排版设置
由样式表提供。

  • 10% 每行使用 65-74 个字符(PostSecret、Beppegrillo、Perez Hilton、Scobleizer、Blogscoped)
  • 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、A List Apart、Search Engine Land)
  • 16% 每行使用超过 105 个字符(Engadget、TechCrunch、GigaOM、Wired、TMZ)

根据我们的发现,我们有信心建议最常见(不一定是最用户友好)的行长度在 80 到 100 个字符之间

有趣的是,没有一个博客使用合理的文本对齐方式 — 100% 的博客使用左文本对齐方式。

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

Smashing Magazine did a design study of popular blogs that contains just this kind of information. The information you're looking for is located in section 2.2 quoted below.

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.

So the width is not really important, it's the number of characters that influence the readability.

吻风 2024-12-12 07:26:51

我认为您可以使用 960 网格作为指导,并为您的流体布局设置最大宽度(我将我的设置为 960px),因为如果布局适应屏幕的宽度,没有人愿意在宽屏显示器上阅读文本。视口。

因此,对于您的问题,我认为您应该根据字体的整体间距(行高和内容的填充/边距)设置宽度,并确保它在设计中很好地融合。字体的行高应介于 20 像素和 26 像素之间,而填充/边距取决于设计风格。

希望它有帮助:)

I think you can use the 960 grid as a guide and set a max-width for your fluid layout (I set mine at 960px) because nobody would like to read text across a wide-screen monitor if the layout adapts to the width of the viewport.

So, for your question, I think you should set the width according to your overall spacing for the font (line-height and padding/margin of the contents) and make sure it blends well within the design. The line height for your font should be somewhere between 20px and 26px, while the padding/margin depends on the style of your design.

Hope it helps :)

痴情 2024-12-12 07:26:51

这取决于

  1. 字体大小、
  2. 列宽度、
  3. 平均访问者屏幕分辨率
  4. 您支持的

设备。我想说,您应该检查分析中的平均屏幕分辨率并迎合该人群。

也就是说,如果您有一列实心文本,您可能希望通过添加

a) 更多列或
来缩短行长度
b) 图形或图片

This depends on

  1. font size
  2. column width
  3. average visitor screen resolution
  4. devices you are supporting.

I would say that you should check the average screen resolution in your analytics and pander to that demographic.

That said, if you have one solid column of text, you may wish to shorten the line length by adding

a) more columns or
b) graphics or pics

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文