网页设计领先的最佳计算

平面设计 网站设计 字体 网络字体
2022-02-11 11:13:27

这是我在网站设计过程中一直不喜欢的领域。话虽如此,我正在努力提高效率,并且我想知道何时使用无衬线或衬线字体,您如何确定每个浏览器的前导并相应地进行设计?有没有人在使用 14px 字体高度来确定前导时使用或看到计算?

3个回答

排版是相当主观的,所以我不确定是否有一种算法可以line-height根据font-face, font-size,来确定“正确” font-weight

最佳实践是相对于字体大小 ( em) 而不是固定值进行所有测量,因为用户可以在其设备上更改其默认字体大小。这允许用户更改字体大小而不会弄乱您的布局。

以下将给出默认的前导17.5px

body {
  font-size: 14px;
}
p {
  line-height: 1.25; /* The same as (14px times 1.25) for a value of 17.5px */
}

如果字体分别更改为 12 像素或 16 像素,15px也会自动给出前导。20px

这里有一些关于网页排版和垂直节奏的资源,我发现它们很有帮助:

应用于 Web 的排版样式元素

创作垂直节奏

正如 thgaskell 所说,一般来说,没有“公式”:

行长越长,您应该使用的行距/行距越多。

关于。“有没有人使用或看过计算……”:不会有一个好的通用计算(见下文)。可能最接近的是:Adobe 应用程序的默认行距/行高比率为每 1 个字体大小单位 1.2 个行距单位(14 为 16.8)。

这是一个通用的包罗万象,在大多数地方看起来都不错,但除非偶然,否则在任何地方看起来都很棒。

它可能只是基于 80 年代的某个 Adob​​e 工程师说“Bob,将 1.2 作为默认的前导字体大小比怎么样?我觉得还可以”,而 Bob 说“当然,去吧”。


至于计算的依据:请参阅 Alan G 对Optimum line height in relative to font size的出色回答。

以下是根据 Alan G 的回答和我的经验,对影响理想领先的一些事情进行大量解释的总结:

  • 它是什么类型的文本。标题、标签、标题等将比主体段落文本具有更紧密的前导——它们是构成页面流的一个单元的东西,而段落是页面的主要流。
  • 度量(文本块)的宽度和段落的行数。眼睛需要水平移动的距离越远,附近的段落中断等视觉提示越少,读者需要越多地帮助读者回到正确的行,形式是从更宽的前导获得额外的空白。
  • 本意的语气一般来说,更宽的行距使文本具有更浅的印刷颜色和更通透、更平易近人的感觉。更紧的领先,一般来说,看起来更密集和严重。它的意义远不止于此——页面的整体基调和节奏是所有事物结合在一起的整体结果。
  • 字体的特点。一般来说:
    • x 高度字体在使用垂直空间时已经更加贪婪,因此通常(并非总是)需要更多的领先。
    • 较高的上升字体往往天生就有更多的呼吸空间,所以如果需要的话,在它看起来很糟糕之前(并非总是如此),如果需要的话,往往可以进一步挤压前导。
    • 粗笔画的粗字体具有较深的印刷颜色,因此在紧密的前导使这些字体中设置的文本块看起来压迫之前,挤压前导的空间可能会更小(并非总是如此)

并不是说我——或者我想,任何设计师——都会有意识地机械地思考任何这样的清单。这些只是对影响文本感觉的因素的观察。重要的是它本能地感觉正确并且有效。

不过,对于直觉失败的情况,这样的事情可能是一个方便的后备或健全性检查。