提问者:小点点

特定屏幕宽度的建议字体大小


我正在设计一个网页,使用font-size:calc(26px-((26-16)*(1600px-100vw)/(1600-300)));进行字体大小插值,但问题是,我对所选字体大小和视图端口宽度的最大值(26px,1600px)和最小值(16px,300px)并不满意。 对于不同的屏幕宽度,建议的字体大小是什么?


共2个答案

匿名用户

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

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

当心:这些函数相对较新(特别是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()夹紧(优秀的youtube视频)

匿名用户

其实,关于最大字体大小并没有什么‘规则’。 这取决于上下文和字数的性质。 你也可以玩弄一下,把第一段做得更大一些,甚至更大胆一些,来介绍到课文中,使之成为一个小的摘要。

主要关注的是最小值。 iOS倾向于将网页内容的任何段落缩放到16像素以下。 这是本文的主要内容。 Google Material Design 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/