我们向我们敬佩的网页构建者提出了同样的问题:今年关于构建网站,什么让你感兴趣? 以下是他们的回答

 

我们想感谢我们的❥赞助商Automattic 使这个网站成为可能。他们制作了许多我们使用的优秀软件产品,比如JetpackWooCommerceWordPress.com

主题的变化:在网络上重新发明字体

如果有人了解我,通常是两件事之一:我有两只极其毛茸茸的狗,或者我喜欢字体和排版。就像,真的真的很喜欢它们。所以,虽然我对Tristan 在水疗方面做得如何 非常兴奋——我们现在步行距离比几个月前增加了 50%,而且不用中途休息——我更激动的是可变字体。

Image of Tristan and Tillie explaining variable fonts

我知道,你们可能都非常震惊。

自从三年前它们被引入以来,我一直对它们非常专注,我认为它们将成为一件大事。但它还没有达到那个临界点——至少还没有。但有一些事情正在融合在一起,让我觉得今年可能就是突破年。让我退一步解释一下。

查看 Pen
可变字体,带轮廓
by Jason Pamental (@jpamental)
on CodePen.

Plex Sans Variable,带轮廓显示单个文件可能实现的各种粗细和宽度

未来是可变的

可变字体是 OpenType 字体规范的演变,它允许单个文件包含字体设计者想要公开的宽度、粗细、倾斜、斜体以及几乎任何其他字体变体的所有变体——所有这些都在单个文件中。该文件非常高效,因此它比所有单独的文件都要小得多。对于网络来说,这意味着在许多情况下,我们可以节省相当多的数据下载量,减少 HTTP 请求的数量,并且总体上大大提高我们可用的设计灵活性。与我们过去 10 年一直在使用的那些普通的静态网络字体相比,这是一个相当大的变化。关于它们有很多好东西(我已经写了一些这里这里这里 以及这里),但你也可以浏览标签就在 CSS Tricks 上。

此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及其更高版本上支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
66621711

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712711.0-11.2
根据 caniuse.com,可变字体可在网络上 87% 的设备上查看。

现在浏览器支持已经非常完善(大部分情况下除了 IE11 和一些 Android 浏览器,比如百度和 UC),可变字体的可用性正在提高(查看v-fonts.com),并且 Google 正在通过他们的新 API 推出对它们的 支持——感觉这可能最终成为它们的突破之年。

最让我兴奋的是我们将会看到人们创造的东西。我确信起初它会是大量的“剥离和替换”,类似于我们在 Nielson/Norman 集团网站上看到的那样,他们在去年将 Source Sans Variable 添加到他们的网站上,或者Google 在过去几个月里每天在网站上测试了 1.48 亿次 Oswald Variable。基本上只是使用它来代替几个静态实例,以获得更快页面加载和更少代码的好处。

这很棒,但这仅仅是一个开始。

我期待看到的是人们拥抱这些字体可以实现的所有功能。从超轻到超重,从超紧凑到特宽。任何字体支持的内容都可以在那里供我们探索。我希望看到设计师深入研究并探索优秀排版的强大功能。能够更多地发言,并以不同的音量来帮助我们在网站和应用程序中进行引导的字体。能够引导我们从这里到那里的运动中的字体。

查看 Pen
布局变化,第二部分
by Jason Pamental (@jpamental)
on CodePen.

这是我为我的时事通讯和演讲进行的一次探索,探索了可读性和快速阅读和慢速阅读之间的张力。

它会很糟糕吗?

可能吧。但是早期的响应式网站也是如此。以及许多刚推出时使用静态网络字体的网站。或者基于 Flash 的网站。所有这些都是我们在网络上可以设计和制作的内容的演变。我们有责任做得更好而不是更糟。我很高兴能一起学习。

毕竟,如果字体是我们话语的声音——使用可变字体——这个声音已经变成了合唱团。