携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情。
原文地址：Designing for Long-Form Articles
原文作者：Daniel Schwarz
发布时间：2022年8月10日
设计一篇漂亮的“文章”需要考虑很多因素。和主页不同的是，长篇文章与其说是设计界面，不如说是设计文本，来创造轻松舒适的阅读体验。
这是因为文章处理的是长篇的内容，而这些内容往往是通过用户在页面上进行交互的时间来衡量。我们希望用户能够阅读完整的内容。在用户开始浏览文章和读完所有内容之间有一个自然的控件。比较理想化的是，这个空间是足够身临其境的，不仅 仅可以容纳用户们，还可以激发思考、想法，甚至有可能引发行动。至少这是我希望的，因为我获得了你们的关注，并且你们通读了你们正在阅读的这篇文章。
这里有一个平衡。一方面，我们会听到“没有人阅读互联网”的说法。另一方面，长篇的文章需要仔细地阅读。考虑到内容营销的价值和用户日渐失去耐心，尽可能长时间地吸引阅读者是一个关键的事情。让我们看一些非常好的文章页面的最佳实践和示例，来更好地了解是什么使长篇文章具有视觉吸引力的阅读体验（不用牺牲用户体验），以及我们如何重现这个效果。
快速获胜
让我快速列出我认为对你们许多人来说可能已经很明显的，但对内容易读性是有效的东西：
-
增加字体大小： 我们知道这
16px是默认的，并且在许多设计中是很好的，但是更大的字体是很有吸引力，因为它意味着用户可以自由地向后靠并稳定下来，而不必向前倾斜来阅读。 -
以每行字符为目标： 很少有我认识的人喜欢比他们需要的更努力地工作，这也适用于阅读。相比使用完整的视口宽度，尝试缩小范围，并将其与更大的字体相平衡来减少每行文本中的字符。您的最佳位置可能会有所不同，尽管许多人建议每行 45-75 个字符以帮助减少读者的眼睛从左到右的工作距离。Chris 有一个帮助计算字符的书签，但我们也可以用些 CSS 中的单元来获得可预测的结果。
-
提高行高： 默认的行高会让人感觉很糟糕。这很有趣，但是线条之间的更多空间（当然，在一定程度上）不利于眼睛的工作，这看上去和限制每行字符以便眼睛可以更少的移动的建议是相反的。在 1.2 到 1.5 之间的行高对于长篇内容来说是比较经典的范围。
如果你之前没有看过， Pierrick Calvez 的一篇文章 有一个很棒的“五分钟”排版指南 里有很多这样低调的成果。
设计额外的呼吸空间
你可能习惯于在房地产是主要商品的情况下设计“上层建筑”。这有点像网络世界中的海滨财产（beach-front property），因为我们习惯于在这里包装高价值的东西，如英雄横幅，行动呼吁，以及任何有助于销售的东西。在其上方，就像一个密集的市中心，有繁忙的交通和高层的建筑。
文章是不一样的，它们可以让你的设计伸展一下。如果我们想把城市发展类比得更远一点，文章有足够的面积来倾向于“少即是多”的设计方法。这就是使看似很小的设计选择（例如类型）对整体体验如此重要的原因。
看看下面的例子。链接下划线有更多的呼吸空间（具体来说，它们出现在下降线下方）。这实际上是你可以在站点中启用，而且在文章页面上看起来特别好的功能，因为它增加了可读性。这是一种微妙的设计选择，有助于增加呼吸空间。
text-underline-position: under; 是使其生效的 CSS 属性。当然，text-decoration 也必须设置为 none 以外的其他值（在这种情况下可以设置成 underline）。
上述示例还设置了 text-decoration-thickness，它改变了下划线（和其他线类型）的粗细。你可以使用这个 CSS 属性将线条的粗细与字体的大小和/或粗细相匹配。
这是一个完整的例子：
a {
text-decoration: underline;
text-decoration-thickness: 2px;
/* or */
text-decoration: underline 2px;
text-underline-position: under;
}
但在你使用 text-decoration 速记之前，Šime Vidas 在使用它时有一些值得回顾的 “陷阱” 。
进入内容
首字下沉是风格化的字母，可以放在文档或文档部分的开头。它们曾经用于拉丁文本，但今天它们主要用于装饰。
就个人而言，我认为首字下沉会妨碍可读性。但是，它们可以成为“引导”读者进入主要内容的好方法。只要你使用::first-letter伪元素，它们就不会引入任何严重的可访问性问题。还有其他（较旧的）方法涉及更多的 HTML 和 CSS ，以及使用 ARIA 属性来使内容保持可访问性。
使用::first-letter，CSS 看起来像这样：
/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
如果我们可以使用 initial-letter 属性肯定会很好，但在我写这篇文章的时候它还不怎么被支持。如果我们有它，所有关于字体大小和行高的数学都会为我们计算出来！
几年前，CodePen 挑战人们来展示他们的首字下沉造型技巧，你可以在这个集合中看到一大堆巧妙的例子。
跳到主要内容
屏幕阅读器允许用户跳到主要内容，只要它包含在一个 <main> 元素中。然而，那些通过标签浏览网站的人并没有从中受益。相反，我们必须创建一个“跳转到主要内容”的锚定链接。这个链接通常是隐藏的，但是一旦用户打开他们的第一个标签（即显示焦点）就会显示出来。
它看起来像这样：
<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>
<!-- target -->
<main class="main">
<!-- main content -->
</main>
#skip-link {
position: absolute; /* remove it from the flow */
transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
position: unset; /* insert it back into the flow */
transform: unset; /* move it back onto the screen */
}
.main {
scroll-margin: 1rem; /* adds breathing room above the scroll target */
}
当然，还有其他方法可以解决。这里有一些关于创建跳过链接的更深入的探讨。
无缝的视觉效果
我喜欢这篇文章中的插图。尽管它们看起来不可思议，但它们并不需要太多的认知关注。他们介绍了短暂的快乐时刻，但也表明文章本身有更重要的内容要说。部分原因在于透明度的使用，而矩形图像捕获更多的负空间，因此需要更多的关注（如果这是所需的效果并且图像对故事至关重要，这很好）。
但是，重要的是要知道图像实际上根本不是透明的，而是与内容具有相同背景颜色的不透明 JPEG。我假设这是为了和支持透明度的 PNG 相比，可以保证更小的图像的大小。
像这样“伪造”透明背景的缺点是，如果您的网站碰巧提供暗模式 UI ，则需要额外的技巧（和维护）来支持 暗模式 UI。如果插图非常扁平和简单，那么 SVG 可能是替代方法，因为它体积小、可扩展，并且能够融入任何背景。
但是，如果您一定要使用光栅图像并且宁愿使用 PNG 文件来提高透明度，那么您需要考虑使用响应式图像和loading="lazy"属性来加快加载时间。
把重点放在类型和语义上
如今，对于某人如何或在何处阅读网络内容，您可能几乎没有发言权 。无论用户是通过 RSS 提要接收它，还是通过电子邮件发送它，看到它是从同事那里复制粘贴的，还是在抓取的网站上找到它，或者诸如此类，你的内容可能看起来与你喜欢的不同。你可以设计出你认为是全世界最华丽的文章，而用户仍然可能会 破坏阅读器模式按钮 ，让你感到沮丧。
没关系！内容的可发现性与设计一样重要，许多用户都有自己的发现内容的方式和对什么是良好阅读体验的偏好。
但是有人想要阅读器模式是有原因的。一方面，这就像“根本看不到任何 CSS”。我的意思是 Safari 的 Reader Mode 或 Brave SpeedReader，它使用机器学习来检测文章。不会获取或执行 CSS、JavaScript 或非文章图像，这会提高性能并阻止广告和跟踪。
这种 “粗鲁的极简主义” 把重点放在内容上，而不是风格上。因此，您实际上可能想要为此来接受这种浏览器特有的阅读风格。
做到这一点的方法不是使用 CSS，而是更加关注您的 HTML。阅读器模式最适合使用简单的、语义的、与文章相关的 HTML 的标记。您必须做更多以充分利用它，而不仅是在文章周围添加
标记。您可能会发现，强调易读性而不是流畅性的最小设计实际上是在您的网站设计中使用的好策略。我强烈建议阅读 Robin 关于 “最小的CSS”的帖子以获得可靠的阅读体验。
综述
我已经分享了很多我认为可以为网络上的长篇文章带来出色阅读体验的内容。但眼见为实，我收集了一堆例子来展示我们所涵盖的内容。
（例子参见原文。）
