优先设计内容排版（以及 Type Nugget 的介绍）

你见过多少个“完成”的网站，其角落里仍然潜伏着lorem ipsum文本？虽然我们经常努力追求设计和代码的完美，但我每次偶然发现lorem ipsum的乱码时都会被提醒，并非所有网页开发流程的方面都得到了应有的关注。

开发一套完整且详细的排版元素，往往是流程中被忽视的一环。虽然排版不像其他图形元素那样突出或令人兴奋，但它是每个网站必不可少的一部分，并且承担着完成每个页面目的的大部分工作：传递信息。

虽然我无法解决懒惰的lorem ipsum使用问题，但我一直在开发一个工具，帮助开发美观且强大的在线排版。

我为什么如此重视排版

关于我的一些信息将有助于设定场景。我是一名前端开发者，在一家数字代理机构与设计师一起工作。在转向开发之前，我学习过平面设计，因此我了解版式和排版。虽然我最初从事设计工作，但我还是要强调，我不认为自己是设计师。因此，这篇文章不会解释如何设计类型系统。我将讨论如何在开发中实现一个类型系统。

在我作为开发人员的职业生涯中，我经常注意到一些网站忽略了排版的细节。虽然不是明显的问题，但这些小错误会削弱整体的用户体验。

我不确定为什么排版错误会如此频繁地发生。也许是由于时间限制、开发过程中的疏忽，或者完全不同的原因。

我一直致力于解决这个问题，这促使我撰写了这篇文章，也促使了我目前的一个副项目：Type Nugget。这是一个我希望用户能够轻松创建强大的类型系统的工具。

你为什么也应该关心排版

拥有一个强大的类型系统的好处很多。它确保了项目的一致性，并允许你编写更少的代码。但最重要的是，强大的类型系统确保内容传达了它应该传达的信息。

一位同事最近给我发送了一篇文章，该文章发布在Pitchfork上。当我进入页面时，我立刻爱上了他们的类型系统和结构。阅读内容非常流畅，是一种绝对的享受。他们的排版系统简单而美观。在继续讨论类型系统时，我将参考这个网站！

（看看那个首行缩进 💕）

在当今的网页环境中，类型系统最重要的要求之一是它能够完美地适用于所有现有的视口。我们永远不知道设备领域接下来会发生什么！这是可行的，但首先，让我们进入响应式单位的世界。

用爱慕的眼神看待响应式单位 😍

在我看来，除非你理解响应式单位，否则你无法掌握网页排版。理解响应式单位需要一点数学知识，但一旦你掌握了它，它就会真正改变你的世界。很快，看到px就会让你感到不适！

关于这个特定主题的文章已经有很多了，所以我不会深入探讨，但这里简要解释一下我倾向于与字体一起使用的单位

• em: 相对于当前（继承的）font-size。如果我在本文中的某个元素设置font-size:2em，它将是本文其余部分font-size的两倍。
• rem: 相对于根元素的font-size（这是一种花哨的说法，指的是html元素）。如果我在上一个示例中使用的元素内部添加另一个元素，然后将其设置为font-size:1rem，它现在将恢复到原始大小，无论其父元素是否设置为em（我设置了一个笔在这里显示em和rem如何协同工作）。
• vw & vh: 分别相对于视口宽度和高度的 1%。因此，5vw表示font-size是浏览器宽度的 5%，5vh是浏览器高度的 5%。

我倾向于在文档的根元素上设置一个px font-size，并使用em设置其余排版元素的font-size，以及使用rem设置边距以保持一致的字体网格。我经常喜欢将标题设置为vw（或者偶尔使用vh），并使用媒体查询在达到某个视口max-width后将其转换为em大小。这避免了即使在最小的移动设备上标题也过大的问题。Eduardo Bouças 这里有一个很棒的 Sass 混合宏，用于创建具有最小和最大尺寸的视口相对文本。

响应式单位的实际应用

让我们看看 Pitchfork 如何使用响应式单位。

他们html和body元素上的font-size设置为10px。然后他们有一个.contents div 包裹了所有文章内容。它设置为1.8rem，并且在视口宽度小于992px时更改为1.6rem（我本应该先做移动端再做桌面端，但我认为这只是一个偏好的问题）。这意味着主内容font-size在桌面端是18px，在较小的设备上是16px（10px * 1.8 = 18px，10px * 1.6 = 16px），这两种字体大小对于给定的视口来说都非常舒适。

标题样式会根据您阅读的文章类型而有所不同，但似乎以类似的方式进行缩放。在功能页面上的h1从4.8rem开始，当视口宽度小于992px时缩放到4rem，然后在视口宽度小于767px时缩放到3rem（分别为48px、40px和30px）。.contents div 也始终防止文本超出文本的最佳版面（行长），根据一般排版规则，版面长度在 40 到 80 个字符之间，具体取决于上下文。

Pitchfork 做得很好，但这确实是强大的类型系统蓬勃发展所需的最低要求。

在此基础上，重要的是要认识到排版不仅仅是文本。有一整套元素（h1-h6、p、span、em、strong、a、ul、ol、li、blockquote、caption，以及更多其他元素）有助于内容的排版流程和外观。尤其是在处理内容丰富的网站（如博客或新闻网站）时，不要忘记它们的重要性。使用像Normalize.css这样的 CSS 重置或 Bootstrap 这样的框架通常意味着你已经涵盖了这一点。但是，稍微偏离默认设置总是一种不错的选择。我经常发现，在内容上下文中为所有这些元素设置全局边距等于主line-height非常有用。这可以保持一个漂亮的、一致的网格。例如，如果我的.content中的主要文本是 1em，line-height是1.6em，那么.content中所有标题、段落和其他元素的顶部和底部边距也设置为1.6em。这不是一个严格的规则，只是一个良好的起点。

顺便说一句，虽然上述元素对于决定网站的视觉外观非常棒，但它们对于确保网站的可访问性也极其重要。使用语义 HTML 元素可以确保你的网站对机器有意义，例如视障人士使用的屏幕阅读器或像 Google 这样的网络爬虫。

我浏览了 Pitchfork，试图找到其中一些元素的示例。当我找不到列表的示例时，出于好奇，我通过开发者工具在页面中输入了一个列表。果然，即使我找不到他们在网站上使用它们的示例或位置，它们的样式也很漂亮。👏🏾

虽然从技术上讲，状态和过渡并不直接属于排版的范畴，但我认为它们对于网站的整体感觉非常重要。不幸的是，它们也经常被遗忘。我假设当我说“状态和过渡”时，许多开发人员首先想到的是链接样式。但它并不仅限于此，也不仅限于悬停样式。悬停样式确实对链接很重要，但焦点也很重要。

你有没有尝试过使用 Tab 和 Shift+Tab 浏览网站？我当然试过，在一些网站上几乎不可能做到。浏览器有一种默认的显示方式，但我经常看到它被移除，因为它不美观。请注意，如果你要移除它，请用更漂亮的东西替换它！

表单输入也可以通过:focus样式得到极大的增强，并为你的网站增添额外的亮点。我在这方面注意到的另一件事是，要么缺少过渡，要么过渡时间很奇怪，这两种情况都会让状态之间的切换感觉非常生硬或不自然。根据我的经验，我发现 1.5s-2.5s 的过渡时间就足够了。超过这个时间就会让我感到不舒服（这同样是一个可以根据需要打破的一般规则）。

在谈论过渡动画时，尽量避免对元素的所有属性进行过渡。这可能会在性能方面或者以后尝试为子元素设置样式时给你带来麻烦。

架构方面的额外阅读

以下是我学到的一些东西，它们让我的开发生活变得轻松了许多

• 避免由于特异性问题导致的冲突，避免在元素上直接添加不必要的样式，例如，当你可以为.nav__item设置样式时，不要为.nav a设置样式。我发现这在设置标题样式时最为关键。我过去直接为h1-h6标签设置样式，直到我意识到h1-h6是语义元素，它们标记了文档的不同阶段。并不是所有的h1标签都需要看起来一样！我现在使用诸如.heading--xl、.heading--sm之类的类来设置标题样式。
• 使用全局文本修饰符类，而不是添加随机CSS来更改项目中的小部分内容。例如，我使用.text--xl、.text--sm之类的类。
• 避免不必要的嵌套选择器，例如，当你可以为.nav__item设置样式时，不要使用.nav > .nav__item。这可以避免特异性问题，还可以提高性能，因为浏览器不必对元素进行太多查找。查看这篇关于模块化CSS的文章，了解更多关于避免此问题的原因。
• 采用CSS“架构”。它不需要是现有的架构。如果你愿意，可以自己创建一个。只要有一个就行。我使用与BEM非常相似的东西，并结合上面链接的模块化CSS文章中的方法论。这里有一个很棒的列表，列出了一些不同的架构（以及其他各种很棒的东西）。最近也有一篇很棒的CSS-Tricks文章写了关于这个主题的内容。如果你感兴趣，可以去看看！

查看Type Nugget

我工作的公司有一个创新项目，它给我们时间来开发我们自己的产品和想法。我组建了一个小型团队，他们和我一样对这些主题充满热情。在过去的几个月里，我们一直在构建Type Nugget。

Type Nugget是一个工具，它使开发人员更容易根据我讨论过的原则构建一个可靠的类型系统。它距离我想要的样子还有很长的路要走，但我们希望它能成为设置Web类型系统的首选应用，并为Web类型爱好者构建一个很棒的社区。

我们非常兴奋地将它变成现实，所以请查看它，并告诉我们您希望看到哪些功能！

总结

互联网都是关于内容的。作为Web开发人员，我们的工作是确保用户能够理解这些内容。对我来说，这足以成为任何Web开发人员深入了解类型系统的理由。当响应式单位添加到组合中时，情况变得更加重要。因此，花一个或两个小时来复习这些Web开发的必要元素。或者，走捷径使用Type Nugget 😉