vlambda博客
学习文章列表

用可变字体做响应式设计

在其他的文章中,我们探讨了可变字体是什么,为什么他们会改变数字设计的规则。但是可变字体对响应式设计有什么影响呢?

In other articles we have discussed what variable fonts are, and why they are such game-changers for digital design. But what can variable fonts do for responsive design?



现在,大多数网络浏览器都支持可变字体,这为精细排版提供了前所未有的可能性(可查看Nick Sherman"可变字体"网站的最新讯息)。我们选取了Literata和Portada这两种可变字体案例,它们有字重和视觉大小的轴,从而可以为响应式设计如何从这一新技术中获得设计收益提供概念证明。

Most Web browsers now support variable fonts, which opens possibilities for fine typesetting that were simply not there before (check Nick Sherman's Variable Fonts site for updated information). We selected Literata and Portada, two typefaces with design variation tables that support the weight and the optical size axes, to create a proof of concept for how responsive design benefits from this new technology.

CSS已经允许开发人员根据用户的设备和屏幕分辨率来微调线宽,行距和字号,甚至可以更改字体。但是,对于可变字体,他们也做了小的优化,可以依据文本改善字体性能。现在,当切换到深色模式时,字体可以稍粗一些,或者调整视觉大小来提供特定于每个像素尺寸的设计方案。

CSS had already allowed developers to fine-tune the line width, leading, and text size based on the user's device and screen resolution. They could even change the font. But with variable fonts they can also introduce small variations that improve font performance based on the context. Now fonts can be just a bit bolder when switching to dark mode or they can adjust the optical size value to deliver designs that are specific for each pixel size.

这个目的很简单:在设备之间提供最佳的易读性体验。

The goal is simple: deliver the best legibility experience across devices. 

翻译 陈月
校对 杨翕丞
Translator:Yue Chen
Reviewer:Xicheng Yang