尽管如此，仍有太多网页设计师忽视了网页排版的重要性。 到目前为止，我只遇到过少数真正理解排版并懂得如何将这些知识应用于其作品的设计师。 缺乏排版知识并非源于无知。 我了解到，网页设计师通常要么是自学成才，尚未掌握排版的重要性，要么是确实学习过设计，但排版只是他们必须上的课程之一。
我创建了 Better Web Type 课程来提高人们对排版在网页设计中重要作用的认识。 我认为，网页设计师和网页开发人员都应该学习基本知识——如果设计师在设计中使用连字，而开发人员甚至不知道什么是连字，我们如何期望他们将最精美设计的排版正确地转换为代码？ 如果这两个角色都了解基本知识，我们将能够通过制作更好的网页排版来开始为构建更好的网络做出贡献。 共同努力。
排版中最重要的内容之一是塑造无缝的阅读体验，吸引读者并以客观的方式呈现内容。 为此，我们需要能够塑造完美的段落。 20 世纪著名的排版师和视觉传播者约瑟夫·穆勒-布罗克曼 (Josef Mueller-Brockmann) 指出，实现这一目标需要三个关键因素
读者应该能够轻松舒适地阅读文本信息。 这在很大程度上取决于字体大小、行长和行距（行高）。
——约瑟夫·穆勒-布罗克曼 (Josef Mueller–Brockmann)
在为 Better Web Type 课程编写课程内容时，我试图思考一个简单的概念来准确地说明这一点：font-size、line-height 和行长需要完美平衡。 我苦苦挣扎了一段时间，但随后，毫无征兆地，灵感突现——等边三角形。 等边三角形的三条边相等，三个角也相等。 这是三个完美平衡的事物的一个绝佳体现。 事实证明，将这个想法应用于塑造完美段落的三个关键因素非常容易。 但首先，让我们单独看看它们。
字体大小和颜色
大多数网站犯的一个错误是，他们将主体文本设置得过小。 回到 2000 年代初期，将主体文本设置为大约 11px 的大小是一种普遍的做法。 但当时屏幕更小，屏幕分辨率更低。 当时的 11px 比现在的更大。
设置主体文本的一个常见规则是将其设置为与书本上与眼睛距离相当的文本大小相同的尺寸。
对于今天的屏幕，推荐的尺寸是：移动设备为 16px，桌面设备为 18 到 22px。 这也取决于字体。 一些设置为 16px 的字体可能看起来比其他字体更大，正如下面的图片所示。
排版中的“字体颜色”并不意味着实际的颜色，比如红色、蓝色或绿色。 字体颜色是指浅色背景上黑色字体的粗细程度。 相同大小和相同字重的字体可能看起来比另一种字体更粗。 上述示例中 Merriweather 字体的对比度较低（对比衬线和不同的笔划），而 Georgia 字体的对比度较高。 这使得它看起来更粗，字体颜色更深。
行长
阅读很长的文本行会让我们的眼睛感到疲劳。 我们的眼睛需要持续的停顿，而换行符会提供这种停顿。 在切换到下一行时，它们会得到短暂的停顿。 停顿时间很短，但足够长，可以让它们继续进行更长时间。 这就像一个并非始终以全功率运行的发动机，因此它可以在没有过热的情况下持续更长时间。
文本行的理想长度是 45 到 75 个字符——包括空格。 超过这个范围的任何内容都难以阅读。 当行过短时，换行次数过多；当行过长时，眼睛的停顿次数过少。
行高（行距）
行高，或者像印刷术中通常称为行距，是排版中垂直节奏的支柱。 了解它的工作原理是制作更好的网页排版的关键。
我遇到的许多设计师或网页开发人员都将line-height视为一个孤立的文本功能。 因此，他们倾向于根据看起来合适的方式设置它。 因此，line-height 是一个在没有太多考虑的情况下设置的东西。 但line-height 太重要了，不能如此盲目地设置。 行长会影响line-height。 行越长，它们之间的空间就越大。 字体大小会影响line-height。 字体越大，行高也应该越大。
字体颜色也会影响line-height。 较暗、较粗的字体需要行间距更大。 最后，字体本身也可能影响它。 正如我们之前看到的那样，一些字体看起来比其他字体更大。 一些，主要是衬线字体，看起来会更粗。 这些也需要更大的行间距。
既然您已经知道line-height 非常重要，并且它永远不应该被视为一个孤立的功能，那么让我们来看看一些通用的最佳实践。 对于段落，理想的line-height 通常在 1.3 到 1.7 之间。 因此，设置为 16px 的主体文本应该具有 21 到 26px 的行高。 这将取决于之前提到的因素：字体设计、字体大小、字重等。
font-size，不同的颜色。 较暗的文本应该有更大的line-height。
等边三角形
排版中有一些通用的最佳实践，但它们从来都不是绝对的。 正如我们在行高方面所看到的那样，我们通常会看到一些建议使用的范围。 从这些范围内选择什么需要时间去学习。 眼睛需要时间才能变得更加敏锐，才能注意到这些差异。
因此，我们谈到了我所说的完美段落的等边三角形。 我们已经单独研究了字体大小、行距和行高（尽我们所能）。 通过这样做，我们已经了解到这些属性是相互关联的。 它们不能被孤立地考虑，也不应该被孤立地考虑。 这就是为什么等边三角形是设计良好的文本段落的一个完美体现。 为了实现这一点，我们需要一个与行距相匹配的适当的字体大小，而行距又与行长相匹配。 如果其中任何一个出错，您的三角形就会倾斜。
不幸的是，我无法提供完美段落的精确数字，因为那里有数百万种组合。 但我可以提供一些示例来帮助您训练自己的眼睛。 尝试注意细节，比较字体大小、行长和行间距。
在上面的示例中，文本在 Merriweather 中设置——这是一种不同寻常的大而重的字体。 这就是为什么它设置为 14px。 因此，line-height 接近 1.3 到 1.7 的推荐范围的顶端。 上面的段落每行整齐地容纳 55 个字符（也在推荐范围内）。
在上面的示例中，行长的长度超出了推荐的 55-75 范围。 平均而言，它是 84，这意味着三角形的底部两侧都扩展了。 三角形不再是等边三角形。
line-height 太大了。 文本行开始彼此分离。 如果我们增加行长，可以改善此示例。 要彻底修复它，我们还需要增加字体大小以保持平衡。 修复它的一个更简单的方法是减小行高。上面的示例中line-height 明显过大。 它被设置为 2，远远超出了推荐范围。 文本行相距太远。 不幸的是，这种情况在网络上经常发生。 似乎有一种趋势是将字体设置为浅灰色，并在其上面应用较大的行高。 这是为了获得那种干净、极简主义的风格，但这错了。 这种文本，尤其是长文本，难以阅读。
font-size 太大了。 它迫使行长为 30 个字符，完全倾斜了三角形。 文本行靠得太近。 要修复此问题，我们需要要么减小文本大小，要么增加行高和行长。幸运的是，我在网上并没有经常遇到这种情况。不过我还是想把它包含进来，这样我们就涵盖了从这个概念中可能出现的各种选择。上面例子中的字体大小对于给定的行高和行长来说太大了。这样设置的文本非常难以阅读。
学习游戏
Better Web Type 课程的很多学员都要求我详细讲解这个概念。那么用什么方法才能最好地说明这个概念是如何在实际中发挥作用的呢？一个能够帮助你锻炼眼力的学习游戏。隆重推出“完美的段落等边三角形——网页排版学习游戏”。
游戏包含十个关卡，每一关都要求你设置三个属性中的一个：字体大小、行高或行长。最后，你会得到一个 100 分制的评分，并有机会参加即将出版的书籍《更好的网页排版，打造更出色的网站》的赠书活动。四位得分最高者将获得一本免费书籍，这本书是根据广受欢迎的 Better Web Type 课程改编的。
我希望尽可能多的人接触到这个游戏，并了解到行高、字体大小和行长始终需要综合考虑。努力争取最佳效果，并挑战你的朋友。了解的人越多，网页排版就会越好。
那么公式是什么？你并没有给我任何方法来评估给定的字体大小/行高/宽度集是否形成了“等边三角形”。
将“感觉不错”除以“看起来不错”，然后将结果乘以“对我来说还不错”。
没有公式……对于任何给定的情况都会有所不同——“不幸的是，我无法给你完美的段落的具体数字，因为有数百万种组合”。
这篇文章是关于训练你的眼睛，让你能够看到什么看起来“正确”（在一定程度上是主观的）。排版更像是一种艺术，而不是科学。
我怀疑有这样的“完美公式”。这在很大程度上取决于你使用的字体类型。另外，你的网页正在“推广”什么样的内容……
排版本身就是一门需要掌握的艺术……这可能是很多设计师不太重视它的原因。它有一套自己的规则。
试试这个游戏！文章中有一个很大的按钮，它会引导你一步步地完成这些值的匹配。
我确实玩了这个游戏。我想我只是没有这方面的天赋。我认为游戏可以作为一个训练工具进行改进，方法是将用户选择的文本布局与使用目标参数的文本布局并排显示。
我不理解“等边三角形”的类比，因为没有办法测量边长。
不过感谢这篇文章。
我认为我和 Ray 从这篇文章中得到了类似的感受：这是一篇关于排版的不错的信息；只是三角形的比喻似乎没什么用。我可以把文章中显示的等边三角形中的数字改成任何其他数字，它都不会有任何意义。
无论如何，感谢这篇文章！
抱歉 Ray，没有公式。三角形理论的目的是说明，在选择字体后，定义完美段落有三个方面，并且它们是相互关联的。就是这样。到目前为止，人们发现它很有帮助。
感谢你的回复 Martej。我不是有意过于批评，我真的很喜欢这篇文章。感谢你分享你的知识。
你可以试试这个工具，它可以根据一个或两个输入为你计算数字。
https://pearsonified.com/typography/
关于网页排版的有趣思考方式。如果游戏能更清楚地说明获得最高分的答案“应该”是什么，那么它将更有用。尤其是在行长练习中，我无法总是确定我是否将行长设置得太短或太长。
【当天晚些时候……】我尝试了链接中提供的游戏。第一次尝试就获得了完美的分数。我跟踪了我的分数和产生这些分数的测量值，并且逐渐变差了。我尝试了，不是用数学，而是用（承认是主观的）可读性。作为一种不同的观点来源，有时甚至是非常不同的观点，我强烈推荐 Matthew Butterick 的“书籍”/网站《实用排版》。但是阅读时，请仔细考虑 Matthew 的要求，即你需要为这本书付费！
不错的文章，但我感觉网页排版的教程应该真正使用无衬线字体。我觉得这有点讽刺。
为什么无衬线字体更适合？
无衬线字体更适合电子设备。衬线字体更适合真正的纸张/书籍。
这几乎是排版 101……我发现它也很讽刺……
小心点。
好吧，几年前确实是这样的。现在高分辨率屏幕很常见。此外，在大多数示例中，我使用的是 Georgia，它是一种专门为屏幕使用而设计的衬线字体，诞生于 90 年代，当时屏幕的分辨率非常差。
@Chris，如果我听起来很傲慢，我表示歉意……这不是我的本意。
@Matej，这条规则仍然相当适用。不仅是因为字体显示的方式，还因为在屏幕上，无衬线字体更容易阅读。如果你愿意，它们更“用户友好”。
……当然，你有科学证据来支持这种说法，即无衬线字体通常更容易在显示器上阅读吗？
如果你回顾历史，桌面使用无衬线的首要原因是缺少像素细节/对衬线和装饰元素进行像素对齐的努力。那是亚像素抗锯齿和抗锯齿总体上还没有出现的年代。
示例中使用的字体（Georgia）是一种经过大量提示的字体，因此与任何无衬线字体一样清晰。事实上，我相信如果你对 Georgia 和 Arial 进行客观分析，你会发现 Georgia 比 Arial 更清晰——即使是在屏幕上——。
等边三角形是看待这个问题的好方法——谢谢（而且这个游戏太棒了！顺便说一下，我表现得很糟糕！）。如果一个公式能够考虑到不同的字体，那将会非常有帮助。
查看这个工具：https://pearsonified.com/typography/
它没有考虑字体粗细，但能够计算基本高度和不同的块大小（标题、页眉、段落等）提供了一个很好的起点。
“而且，对排版的缺乏了解并非来自无知。我了解到，网页设计师通常要么是自学成才，要么还没有意识到排版的重要性。”
那就是无知……
冷静点，伙计们。
我认为这篇文章的主要目的是告诉我们，为了做好排版，我们需要关注字体大小、字体系列和行高。这三者之间的关系决定了你的网页外观，仅此而已。
在我看来，网页设计是一件相对主观的事情，没有一个公式能够满足所有人的胃口。
我的天哪（在这里插入“我的天哪”表情符号）！
“等边三角形”的概念是一个绝对完美的类比，它为一项极其主观的任务提供了一个物理描述。
Matej，这个游戏绝对棒极了，我已经玩了好几次了，每次我都能学到更多关于排版的知识。在结果页面，最好能更清楚地说明哪里做错了/不太好。但再次强调，玩这个游戏给我带来了很多乐趣，也学到了很多东西。
我建议读者了解一下 Matej Latin 先生，他懂得自己的专业，并且对排版知识进行了 100 多次的学习。
非常感谢你所做的一切，Matej
这里有很多有效的观点和示例。
文章中的观察
文章展示了一个旧的标准，将屏幕视图与打印视图进行比较。有数十个人为和物质因素使得这种比较变得很差。
文章中有一个断言暗示存在一个通用推荐或标准：“当今屏幕的推荐大小是移动设备 16 像素，桌面设备 18 到 22 像素。”我不会推荐这个标准。它也不存在于任何的人机交互指南中。它也没有考虑到屏幕和眼睛之间的姿势和距离。一般来说，浏览器遵循姿势标准，其中默认文本大小在典型桌面浏览环境中的用户代理中为 16，在移动环境中为 19。这是一个更以人为本的标准，而这个三角形模型看起来更美观、更主观。
评论中的观察
文章中提到没有公式，然而游戏中得分机制的存在表明使用了公式。
文章中提到没有公式，然而游戏中得分机制的存在表明使用了公式。—— 非常正确。而且这个公式实际上可以公开分享（），这将非常有用，并且是一个很好的参考点/起点。
我喜欢你想要做的事情——作为一名自学成才的网页开发者，我意识到排版是网站最重要的部分之一。这个三角形说明了这三个关键属性（宽度、大小、行高）之间的联系，这对于教学这些属性如何相互关联非常有帮助。
这个游戏很酷，但我希望有更深入的学习资料，因为感觉我在这些方面总是随机地“错误”，没有一种可靠的方法来找出什么是“正确”的。
这个游戏可能具有一定潜力，但我并不认为它是一个学习工具。例如，没有办法将所有三个（四个，包括字体）都插入我的网站，并获得一个结果三角形的图片。例如，三个数字：底部的像素宽度。左侧的行像素乘以猜测的行字符数。右侧的行像素乘以行高。对吗？（当然，我所有的都在我的 CSS 中以 em 为单位……一个最难的猜测！）那么，一个可怜的家伙该怎么办？我只按照让我的客户看起来和感觉良好的方式来做！
在第 6 个图表中，描述中写道：“相同的字体，相同的大小，相同的颜色，不同的行长度。文本行越长，需要的行高越大。”
然而，图像中的字体大小是不同的。
左侧：Georgia，18/26
右侧：Georgia，16/23
这是否是一个印刷错误？顺便说一句，这篇文章和游戏很棒。
@Matej
感谢你发布这篇非常有用的文章，它对我来说真是大开眼界。不过，我有一个问题，在一个网站上，正文有很多不同宽度的区域。这意味着字体大小和行高也必须在这些单独的区域中发生变化。这会导致一个网站具有各种“大小”的正文文本。你能告诉我应该如何解决这个问题吗？
谢谢
嗨，Fahim，这是一个非常好的问题。Mark Boulton 在他的期刊上通过写一篇关于“增量行高”的文章回答了这个问题。你可以在http://www.markboulton.co.uk/journal/incremental-leading找到它。
它仍然有很大的局限性，但它可以给你一些可以构建的东西。在排版中打破规则是可以的，但你需要知道如何打破它们。
希望这有帮助！