重新构想流动 Web 排版 (Reimagining Fluid Web Typography)

Reimagining Fluid Web Typography

Source | HN Comments

文章探讨了流动 Web 排版的重新构想。作者认为，传统的基于 `em` 和 `rem` 的字体大小设置，以及使用 `clamp()` 函数的流动排版，存在依赖像素转换和假设用户默认字体大小的问题。文章建议不要设置根字体大小，而是直接使用用户在浏览器中设置的默认字体大小。此外，文章提倡响应式排版，并探讨了通过 CSS 实现更灵活的字体大小调整，以适应不同设备和用户偏好。

原文跳转到主要内容

OddBird 与黑人社区站在一起，要求变革。

浅色/深色颜色模式 light dark auto Themeoddbird,complement,adjacent,triad,monochrome,contrast oddbird complement adjacent triad monochrome contrast 色调饱和度亮度对比度

Article A case of letterpress type with arrows pointing outward and a cursor hand overlaid

Reimagining Fluid Typography (重新构想流动排版)

我们是否响应了正确的输入？ 作者： Miriam Suzanne 发布于 2025年2月12日

多年来，使用相对单位（特别是 em 和 rem）来设置文本大小一直是“最佳实践”。这很棒！但是在玩转我的用户首选项后，我认为我们可以改进常见的做法。

注意： 我们在上个月与 CSS Working Group 联合主席 Alan Stearns 一起进行的 Winging It 直播中讨论了其中一些想法。查看该直播以获取有关排版和 CSS 单位的更多讨论！

浏览器根据用户首选项提供默认文本大小，并且我们的文本应该_相对于该首选项_。使用 em 值建立我们的根 font-size 有助于保持这种关系不变。

类似地，字体“比例”旨在在各种不同的字体大小之间保持一些_内部和谐_。通过以 em 和 rem 等相对单位建立我们的整个比例，我们保持了大小之间的一致关系，同时允许整个系统相对于用户默认值或浏览器 (页面) 缩放进行放大或缩小。

最近，“流动排版”促使我们将视口或容器相对单位也纳入我们的字体大小调整中——通常使用 clamp() 函数来集成 em/rem 和 vi/cqi 输入，以响应式算法设置下限和上限。请参阅 utopia.fyi 以获取最常见的方法：

:root {
 font-size: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
}

这些数字看起来有点神奇，因为它们确实是。 Utopia 要求我们从以 px 值定义的字体大小范围开始，然后通过假设 1rem == 16px 来将其转换为 rem。只要该假设成立，上面的数学运算就会将我们的字体从 18px 最小值缩放到 20px 最大值。

这是开发人员经常依赖的假设，即使我们没有进行流动数学运算。这不是一个完全可靠的假设，但它与大多数浏览器中的默认值匹配，并且如果我们不进行_某种形式的_像素转换，事情会感觉非常不稳定。我们如何使用完全与显示器无关的单位来选择字体大小？没有转换，1rem 是什么？

这是一种可靠的方法，但是当我玩的越多，我的问题就越多。因此，让我们深入研究一下，看看是否可以进行改进。

注意： 如果我们不小心，使用视口单位的流动计算可能会导致可访问性问题。因此，请密切关注 Utopia 提供的警告，或跳转到 fluid.style 以测试任何流动计算的页面缩放功能。

字体大小首选项的目的是什么？

Copy permalink to “What’s the purpose of a font-size preference?”

我一直在摆弄我的浏览器设置，从字体和默认字体大小开始。这些是大多数浏览器提供的设置。由于我通常更喜欢 24px 左右的 Web 文本，因此这似乎是一个明显的首选项设置，对吗？

但是我已经将我的站点设计为具有_相对于_用户默认值的大文本。暂时忽略流动部分，我将根 font-size 设置为大约 1.5em ——是用户设置大小的一半。当我的首选项设置为默认的 16px 时，我的站点已经以 24px 显示文本。现在我说我_想要_ 24px 字体大小，我的站点已增加到 36px！

Two screenshots from my site, one with 16px preference and 24px rendered text - the other with much larger 24px preference and 36px rendered

我可以使文本更大，但它永远无法与我的首选项匹配

似乎 Chromium 浏览器现在有一种从默认 medium 或更大和更小选项列表中进行选择的方法：

Very small
Small
Medium (recommended)
Large
Very large

您仍然可以获得精确的字体大小设置，但是它被隐藏起来了。这种改变对我来说有些道理，并且更好地反映了正在发生的事情。我可以使整个 Web 上的字体大小通常更大或更小（至少在站点使用相对大小调整的情况下）——但是我实际上无法建立一个站点将直接遵守的单个字体大小。

问题在于，这实际上不是我_想要_从设置字体大小首选项中获得的东西。我的目标不是使每个网站上的文本都比以前更大——无论现有设计如何。我真的希望站点_通常_只给我 24px 左右（或“大”）的文本，因为这_对我来说是一个相当不错的默认值_。文本较小的站点最好增加其字体大小，但是具有相同大小或更大文本的站点肯定不应该_更大_。

不仅仅是我的站点——这已成为整个行业的常见做法。这意味着当我设置浏览器首选项时，一些我最喜欢的已经使用大型字体的站点变得_太大_。因此，我不得不删除该首选项。

我看到这种情况在 Web 上一次又一次地发生。我们经常学到的教训是_用户不设置首选项_，而现实是_我们错误地应用了他们的首选项_。当首选项没有做我想做的事情时，我当然必须停止使用该首选项。

这导致我们假设浏览器首选项始终为 16px。我们将其与 24px 字体的模型进行比较，进行一些基本算术，然后将我们的基本字体大小设置为 1.5em。 足够好。

TL;DR – 永远不要使用 em 和 rem 单位进行像素数学运算。这是我们出错的地方，假设 16px == 1em 是一个可靠的事实。

在这种情况下，有一个快速简便的解决方案，可以使字体大小首选项在所有方面都有效。有一个单一的根字体大小设置，可以保证与用户字体大小匹配。它通常被保密，但是 Adrian Roselli 打破了魔术师的代码，为我们带来了好消息：

没有。 —Adrian Roselli, The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet

不要设置根字体大小。 Adrian 的文章非常出色，我认为他可能在这方面是对的。最佳基本字体大小是用户在浏览器中设置的默认字体大小。

html {
 /* 没有大小就是最好的大小 */
}

为什么类型应该具有响应性？

Copy permalink to “Why should type be responsive at all?”

但是我仍然有一个问题，因为_浏览器_没有为我提供很多设置首选项的选项。并且（毫不奇怪）一种尺寸并不适合所有站点或情况。

我喜欢阅读大文本，但是“大”是一个相对的概念。 72px 的字体大小在我的手机上几乎无法阅读，但是在我的外部 20 英寸显示器上看起来很适合标题。类似地，常见的默认 16px 字体大小在手机上对我来说感觉很好，行长有限，但是当我有 20 英寸要填充时，它比我想要的要小。

当然，我可以为不同的设备设置不同的默认值，但这在我调整窗口大小时没有帮助。即使浏览器不断以全屏模式运行，我的笔记本电脑也只有时会插入外部显示器。当我拔下它时，我可用的空间就会减少。

再次，我听到一个常见的说法，“用户不调整他们窗口的大小”——但我发现这完全令人难以置信。实际上，我敢打赌我属于一个非常小的少数群体，他们主要使用全屏应用程序。当我观察其他人计算时，我希望看到一个由随机大小的窗口组成的散布，这些窗口在单个桌面上相互重叠。这是默认设置。因此，必须拖动和调整这些重叠窗口的大小，以便浏览不同的任务。普通用户不会像我们一样坐下来上下调整窗口的大小来获得乐趣，但是他们绝对会调整窗口的大小以适应不同的任务。我设置了一个投票，以了解 Mastodon 上的人们如何管理浏览器窗口。

作为 Web 冲浪者，我希望我的默认字体大小响应这些更改。作为 Web 作者，我也希望我的站点具有响应性。我们设计的布局可以从最小的屏幕平滑响应到最大的屏幕——在这种整个响应过程中将基本字体大小锁定到位似乎很荒谬。

因此，我想要响应式排版，并且浏览器（通常）不会在用户设置中提供该功能。有些浏览器（例如 Safari）接受任意 CSS 首选项，但这很少见——并且仅对编写 CSS 的人有用。

我可以想象几种方法来解决这个问题。也许我们只是在用户默认值中添加一个小的比例因子：

html {
 font-size: calc(1em + 1vw);
}

但是这总是比用户要求的要大。因此，我们可以稍微向下调整它，并提供钳位：

html {
 font-size: clamp(1em, 0.9em + 1vw, 1.5em);
}

这在结构上看起来很像常见的方法，但是它有一些明显的差异。我们并不是试图通过假设用户具有 16px 默认值来实现特定的字体大小（或大小范围）。没有针对我们设计师脑海中的某些目标值的_计算魔法_，并且钳位与我期望的结果范围无关。相反，我们只是在用户值中添加了轻微的响应性，并使用钳位使我们的流动值保持在用户意图的范围内。

诸如 em 和 rem 之类的相对单位非常适合_内部关系_——例如，保持正文文本和标题之间比例的一致性。但是，当我们尝试将 em 视为 px 的别名时，事情总是会出错，并且会基于它们假定的默认关系进行心理转换。在这一点上，我们保留了_缩放_，但放弃了有关用户首选项的所有其他信息。

每当您开始使用 16px == 1em 进行心理数学运算时，请停下来并询问该数学运算是否适用于整个用户首选项范围。

（不是的，不要这样做。）