一致的、流畅缩放的字体和间距

当 Chris 首次将这个提示发给我时，我原本想写一篇关于渐进增强的文章，但这个主题过于广泛，无法作为 一件事 来写，而且对于那些已经熟悉我写作风格的人来说，这篇文章太容易预测了。也就是说，我将在本文中概述的内容也不仅仅是一件事，但我遇到一个能完全满足写作提示的日子将是猪飞起来的那一天。不过，这组东西会改变你编写 CSS 的方式。

我个人认为，这组东西让很多网站都失望了——尤其是在响应式设计方面。这组东西包括 **排版和间距**。我经常看到不一致的间距——尤其是在垂直方向——这使得内容难以浏览，并产生一种微妙的、不连贯的感觉。字体也一样：在小视窗上使用 巨大的 标题，或者标题层次结构在视觉上没有大小对比，这在视觉上使它们毫无用处。

使用一个尺寸比例和流畅的字体，可以很容易地解决所有这些问题，我保证这会让你的网站看起来和感觉好很多。让我们开始吧。

什么是尺寸比例？

一个 尺寸比例 是基于一个比例——或者更准确地说，是一个比率——的一组统一的尺寸。

在 type-scale.com 的屏幕截图中，我选择了一个 “完美四分之一” 比例，它使用 比率 1.333。这意味着每次你增加一个尺寸，你就将当前尺寸乘以 1.333，每次你减小一个尺寸，你就将它除以 1.333。

如果你有一个 16px 的基本字体大小，使用这个比例，下一个尺寸是 16 * 1.333，也就是 21.33px。下一个尺寸是 21.33 * 1.333，也就是 28.43px。当你沿着这个比例上下移动时，这会提供一个很好的 曲线。

CSS clamp() 和字体流畅性

多年来，如果你要说，“嘿，安迪，你最喜欢的 CSS 功能是什么？”我会毫不犹豫地说是 flexbox，但现在不是了。我是 clamp() 的超级粉丝。我在这里更详细地介绍了它，但 clamp() 的总结是它根据你给出的三个参数执行一些巧妙的操作

• 最小值
• 理想值
• 最大值

这使得它在流畅的排版和间距方面成为一个非常有用的工具，因为你可以这样编写 CSS

.my-element {
  font-size: clamp(1rem, calc(1rem * 3vw), 2rem);
}

这段微小的 CSS 代码为我们提供了基于视窗宽度的完全响应式文本大小，并带有方便的 锁定，以确保大小不会太大或太小。

在使用 clamp 时，非常重要 的是测试你的文本在你放大和缩小时是否清晰易读。它应该很明显地更大或更小。因为我们在流畅计算中使用 rem 单位，所以我们在这方面做得很好。

综合起来

好了，我们已经设置了尺寸比例和 CSS clamp()，那么它们是如何组合在一起的呢？Utopia 背后的聪明人提出了 最简单但最方便的方法。我使用 他们的字体工具 和 他们的间距工具 来创建小视窗和大视窗的尺寸比例。然后，使用 clamp()，我生成一个完全流畅的主尺寸比例，以及一个为 Gorko 的配置提供信息的 Sass 映射。

$gorko-size-scale: (
  '300': clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem),
  '400': clamp(0.88rem, 0.83rem + 0.24vw, 1rem),
  '500': clamp(1.09rem, 1rem + 0.47vw, 1.33rem),
  '600': clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem),
  '700': clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem),
  '800': clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem),
  '900': clamp(2.67rem, 2.07rem + 3vw, 4.21rem),
  '1000': clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem)
);

这段代码来自我的网站 piccalil.li，由于它的存在，排版非常容易使用。

你也可以将其转换为传统的 CSS 自定义属性

:root {
  --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
  --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
  --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
  --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
  --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
  --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
  --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
};

这种方法也适用于更大的网站。比如新的 web.dev 设计或这个 时髦的软件代理网站。后者针对大视窗有一个巨大的尺寸比例，而针对小视窗则有一个更小、更合理的比例，所有这些都完美地应用，并且没有使用媒体查询。

我一直主张 保持简单。这种方法将一个经典的设计实践——尺寸比例——和一个现代的 CSS 功能——clamp()——结合在一起，从而产生了更简单的 CSS 代码，并实现了很多功能。