为长篇文章设计

设计一篇漂亮的“文章”需要考虑很多因素。 与主页不同，一篇长篇文章与其说是设计界面，不如说是以一种创造轻松舒适的阅读体验的方式设计文本。

这是因为文章处理的是长篇内容，反过来，这些内容往往会受到与用户的“页面停留时间”交互的重视。 我们希望有人阅读完整的叙述。 在某人登陆一篇文章和阅读所有单词之间有一个自然的空间。 希望这个空间足够身临其境，不仅可以容纳用户，还可以激发思想、想法，甚至可能引发行动。 至少这是我所希望的，因为我会引起您的注意，并且您正在阅读您正在阅读的文章。

有一个平衡。 一方面，我们听说 “没有人阅读互联网。” 另一方面，长篇文章需要仔细注意。 考虑到内容营销的当前价值和用户日益增长的不耐烦，尽可能长时间地吸引读者应该是一个关键问题。 让我们看一些令人难以置信的文章页面的最佳实践和示例，以更好地了解是什么使长篇文章具有视觉吸引力的阅读体验（不牺牲用户体验），以及我们如何复制效果。

快速获胜

让我快速列出我认为对你们许多人来说可能已经很明显但对内容易读性有效的东西：

• 增加字体大小： 我们知道， 16px 是默认设置，在许多设计中都很好，但是更大的字体很吸引人，因为它意味着用户可以自由地向后倾斜并安顿下来，而不必将屏幕向前倾斜来阅读。
• 针对每行字符： 我认识的很少有人喜欢比他们需要的更努力地工作，阅读也是如此。 与其使用完整的视口宽度，不如尝试缩小范围并与更大的字体大小平衡以获得 少 每行文本上的字符。 您的最佳位置可能会有所不同，尽管许多人建议每行 45-75 个字符以帮助限制读者的眼睛从左到右必须工作多远。 克里斯有一个 帮助计数字符的小书签, 但我们也有 ch CSS 中的单元以获得可预测的结果。
• 提高行高： 默认的行高会让人感觉很糟糕。 这很有趣，但是线条之间的更多空间（当然，在一定程度上）对眼睛的工作更少，这似乎与我们通常希望眼睛移动更短距离的每行字符建议相反。 之间的线高 1.2 和 1.5 似乎是长篇内容的一个非常典型的范围。

如果你以前没有看过， Pierrick Calvez 有一个伟大的 “五分钟” 排版指南 包装在一堆像这样的低挂水果中。

额外呼吸空间的设计

您可能习惯于在房地产是主要商品的情况下进行“首屏”设计。 这有点像网络世界中的海滨物业，因为这是我们习惯于打包高价值物品的地方，比如英雄横幅、号召性用语以及任何其他有助于销售物品的东西。 褶皱之上可能很像人口稠密的市区，交通繁忙，高层建筑。

文章不一样。 它们可以让你伸展一下。 如果我们想把城市发展类比得更远一点，文章有足够的面积来倾向于“少即是多”的设计方法。 这就是使看似很小的设计选择（例如类型）对整体体验如此重要的原因。

看看下面的例子。 链接下划线有更多的呼吸空间（具体来说，它们出现在下降线下方）。 这实际上是您可以在站点范围内启用的功能，但在文章页面上看起来特别好，因为它增加了可读性。 这是一种微妙的设计选择，有助于增加呼吸空间。

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 相比，这是为了保持图像的大小更小。

像这样“伪造”透明背景的缺点是它需要额外的技巧（和维护）来支持 深色模式界面 如果您的网站恰好提供一个。 如果插图非常扁平和简单，那么 SVG 可能是替代方法，因为它体积小、可扩展，并且能够融入任何背景。

但是，如果您一定要使用光栅图像并且宁愿使用 PNG 文件来提高透明度，那么您需要考虑使用 响应图像 和 loading="lazy" 属性 更快的加载时间。

把重点放在类型和语义上

你可能没什么发言权 形成一种 or 哪里 这些天有人在网上阅读内容。 无论用户是通过 RSS 提要接收它、通过电子邮件发送它、看到它是从同事那里复制和粘贴的、在抓取的网站上找到它，还是诸如此类，你的内容可能看起来 不同 比你更喜欢。 你可以设计出你认为是全世界最华丽的文章，而用户仍然可能 粉碎那个阅读器模式按钮 令你沮丧。

没关系！ 内容的可发现性与它的设计一样重要，许多用户有自己的发现内容的方式和偏好，以获得良好的阅读体验。

但是有人想要阅读器模式是有原因的。 一方面，这就像“根本看不到任何 CSS”。 我的意思是 Safari 的阅读器模式 or 勇敢的速读器，它使用机器学习来检测文章。 不会获取或执行 CSS、JavaScript 或非文章图像，这会提高性能并阻止广告和跟踪。

这种 “蛮横的 极简主义” 将重点放在内容而不是样式上。 所以，你可能实际上 想 专门为此目的采用浏览器自以为是的阅读风格。

做到这一点的方法不是使用 CSS，而是更加关注您的 HTML。 阅读器模式最适合使用简单的、语义的、与文章相关的 HTML 的标记。 你要做的不仅仅是打耳光文章周围的标签以充分利用它。

您可能会发现，强调易读性而不是流畅性的最小设计实际上是在您的网站设计中使用的好策略。 我强烈建议阅读 Robin 在 “最小的 CSS” 提供可靠的阅读体验.

长篇文章综述！

我已经分享了很多我认为可以为网络上的长篇文章带来出色阅读体验的内容。 但眼见为实，我收集了一堆例子来展示我们所涵盖的内容。