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


25

在进行网页设计时,我经常尝试确保我的字体是成比例且一致的。但是,我还没有找到有关应使用哪种比例和尺寸的权威文章或资源。具体而言,以下方面的建议或标准做法是什么?

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

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

Answers:


18

罗伯特·布林赫斯特(Robert Bringhurst)的《印刷风格元素》是对此类事情的详尽而精彩的参考。很长但是很有价值。

许多设计人员建议使用标准的网格线,以使line + padding始终适合于16像素以内。因此,任何小于此值的行高都将为16。

某些情况下,阅读文本的理想行长为45个字符,其他来源为55-75。

这里有一些网站的常见平均值:版式设计模式和最佳实践


1

我会说从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

我们今天遇到的问题恰恰是我们在谈论一种新的排版。当前需要适应不同设备的网络排版与过去的概念完全不同,例如罗伯特·布林赫斯特(Robert Bringhurst)的印刷风格元素中所描述的那些。尽管这是一本非常好的书,但现实是现代设计师需要代码。我通常会通过创建具有基本h1,h2,h3,h4,h5,h6,段落和页脚的HTML文件框架,来考虑主要浏览器样式表中的标准矩阵。我检查浏览器样式表,以了解他们使用行高和标题层次结构的标准像素大小。在Web字体大小受金属/木材可移动类型限制之前,但从1985年开始,随着Adobe和Apple之间的协议,事情开始发生变化。我认为今天,版式概念的主要监管者是Apple,Safari,Windows,Internet Explorer,Chrome,Firefox ...您将不得不查看其浏览器样式表,以将您的版式适应实际呈现的内容并在其中不同的设备。您仍然应该遵循罗伯特·布林赫斯特(Robert Bringhurst)的《印刷风格元素》(这是一本非常不错的书)中的方法,或者遵循斐波那契数列系统。我通常会及时了解浏览器样式表上的更改,并在此处阅读w3规范:您仍然应该遵循罗伯特·布林赫斯特(Robert Bringhurst)的《印刷风格元素》(这是一本非常不错的书)中的方法,或者遵循斐波那契数列系统。我通常会及时了解浏览器样式表上的更改,并在此处阅读w3规范:您仍然应该遵循罗伯特·布林赫斯特(Robert Bringhurst)的《印刷风格元素》(这是一本非常不错的书)中的方法,或者遵循斐波那契数列系统。我通常会及时了解浏览器样式表上的更改,并在此处阅读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/


嗨@EstelaG,欢迎来到GD.SE!我们对垃圾邮件和链接有严格的规定。我不希望看到您的回答被标记。您应该编辑问题以总结本文的要点。
好奇
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.