特定屏幕宽度的推荐字体大小

Recommended font size for certain screen width

我正在设计一个使用 font-size: calc(26px - ((26 - 16) * (1600px - 100vw) / (1600 - 300))); 进行字体大小插值的网页,但问题是,我对最大 (26px, 1600px) 和最小 (16px, 300px) 的分别选择字体大小和视图端口宽度。不同屏幕宽度的推荐字体大小是多少?

字体大小不应低于 16px。 这会让老年人和有眼疾的人的生活更加艰难。


您不需要使用那些复杂的计算。相反,您可以使用 min()max()clamp()

注意:这些函数比较新(尤其是clamp())。检查 this link out 以查看浏览器支持。

min() 让您选择最小和推荐的字体大小:

min(18px, 2vw) /* It will use minimum of those two */

max() 在两个值之间进行选择并使用较大的值:

max(18px, 2vw) /* If 2wv becomes smaller than 18px, it will not use it */

clamp() 是这两者的组合。您可以选择最小、常规和最大字体值:

clamp(18px, 2vw, 50px) /* If 2wv becomes smaller than 18px, it will not use it. If 2vw gets bigger than 50px, it will stay at 50px */

了解更多:

min(), max() and clamp (Excellent youtube video)

嗯,关于最大字体大小并没有真正的 'rule'。这取决于上下文的性质和字数。您还可以通过将第一段变大甚至加粗来介绍文本并使其成为一个小摘要。

主要关注的是最小值。 iOS 倾向于放大任何低于 16px 标记的网页内容段落。这算作主体内容。 Google Material 设计 UI 还建议使用 16px 作为最小正文文本大小。 16px 模仿书页的正常大小。

桌面最小可以在 16-18px 之间,看起来最适合样式。

一些资源:

https://material.io/design/typography/the-type-system.html#type-scale

https://w3-lab.com/web-design/how-big-should-a-font-be-on-a-site-rules-of-typography/