对于某些屏幕宽度推荐的字体大小

问题描述 投票:0回答:2

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

css accessibility font-size
2个回答
1
投票

嗯,关于最大字体大小并没有真正的“规则”。这取决于上下文和字数统计的性质。您也可以通过使第一段更大或更粗一些来介绍该文本,并使其成为一个小的摘要,从而发挥作用。

主要关注的是最小值。 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/


0
投票

字体大小绝不能低于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 */

了解更多:

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

© www.soinside.com 2019 - 2024. All rights reserved.