我正在设计使用font-size: calc(26px - ((26 - 16) * (1600px - 100vw) / (1600 - 300)));
进行字体大小插值的网页,但是问题是,我对分别选择的字体大小和查看端口宽度的最大值(26px, 1600px)
和最小值(16px, 300px)
感到不满意。对于不同的屏幕宽度,推荐的字体大小是多少?
嗯,关于最大字体大小并没有真正的“规则”。这取决于上下文和字数统计的性质。您也可以通过使第一段更大或更粗一些来介绍该文本,并使其成为一个小的摘要,从而发挥作用。
主要关注的是最小值。 iOS倾向于将网页内容的任何段落放大到16px标记以下。这算为主体内容。 Google Material Design用户界面还建议使用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/
字体大小绝不能低于16像素。这将使老年人和有眼疾的人的生活更加艰难。
您不需要使用那些复杂的计算。相反,您可以使用min()
,max()
或clamp()
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 */
了解更多: