网络排版的标准比例是多少?

平面设计 网站设计 排版 排版 字体大小 线高
2022-01-04 08:00:01

在布局网页设计时,我经常尝试确保我的排版是成比例的和一致的。但是,我还没有找到任何关于应该使用什么比例和大小的权威文章或资源。具体来说,推荐或标准做法是什么:

  • 字体大小
  • 线高
  • 行宽
  • 行间距

请在您的答案中同时考虑段落和标题文本。此外,任何关于各种比率或指标有效性的研究都将非常有用。

2个回答

Robert Bringhurst 的Elements of Typographic Style是对此类事物的全面而精彩的参考。它很长,但很有价值。

许多设计师建议使用标准的线网格,以便线条+填充始终适合 16 像素。因此,任何小于该值的线高为 16,高于该值的所有线高为 32。

一些人认为阅读文本的理想行长是 45 个字符,而其他来源认为是 55-75 个字符。

这里有一些常见的网站平均值:Typographic Design Patterns and Best Practices

我会说从 16px 的段落开始,然后使用斐波那契数列来计算其余部分。看起来主流浏览器都在使用这种逻辑。多年来(对于未来的研究,使用 Robert Bringhurst、Hartley 和 Marks 的“印刷风格元素:4.0 版”),10pt 字体的领先设置为 12pt。

将 12pt 转换为像素,我们得到 16px 的基本字体。

大多数浏览器的默认样式表都使用 16 像素的段落文本,您可以自己检查 DOM 或阅读https://www.w3.org/TR/CSS21/sample.htmlhttp://lists。 w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

我们今天遇到的问题正是我们正在谈论一种新的排版。当前需要适应不同设备的网络排版与过去的概念完全不同,例如罗伯特·布林赫斯特的排版风格元素中描述的那些。尽管这是一本优秀的书,但现实是现代设计师需要代码。我通常通过创建具有基本 h1、h2、h3、h4、h5、h6、段落、页脚的 HTML 文件的骨架来考虑来自主要浏览器样式表的标准矩阵。我检查浏览器样式表以了解他们使用行高的标准像素大小的大小,以及标题上的层次结构。在网页字体大小由金属/木材可移动字体规定之前,但从 1985 年开始,随着 Adob​​e 和 Apple 之间的协议,情况开始发生变化。我认为今天,排版概念的主要监管者是 Apple、Safari、Windows,以及 Internet Explorer、Chrome、Firefox ......您将不得不查看他们的浏览器样式表以使您的排版适应实际呈现的内容和不同的设备。您仍然应该遵循 Robert Bringhurst 的 Elements of Typographic Style 中的做法,这是一本出色的书籍,或者遵循 Fibonacci 序列系统。我通常会及时了解浏览器样式表的变化,并在此处阅读 w3 规范:您仍然应该遵循 Robert Bringhurst 的 Elements of Typographic Style 中的做法,这是一本出色的书籍,或者遵循 Fibonacci 序列系统。我通常会及时了解浏览器样式表的变化,并在此处阅读 w3 规范:您仍然应该遵循 Robert Bringhurst 的 Elements of Typographic Style 中的做法,这是一本出色的书籍,或者遵循 Fibonacci 序列系统。我通常会及时了解浏览器样式表的变化,并在此处阅读 w3 规范:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5我认为,设计领域需要考虑到这一点,我发现实践教育没有更新当前的现实。您还可以在我的博客上阅读更多内容:https ://road-to-resilience.blog/2019/11/21/the-typographic-thing/