我本来只是打算更新之前写的一篇文文章来介绍 Google 新加入的网络字体,哪知道 Google 一下子加了这么多,我就只好重新写一篇了。
这一次,我打算利用一些实实在在的例子来说明这些问题。主要是 Google 自家的字体预览做的让人不忍直视(就是不能做的漂亮一点)。
(快速导航:在我们的新侧边栏里,我每天都会给出 5 个关于设计的链接。你应该去看看它们。)
(提示:有一些字体我已经在之前的那篇文章中提到了,但是我在这里再提一下,是怕一些人没有看过之前的文章)
(提示2:非常感谢那些给我建议的人,以及对这篇文章有其他贡献的人。如果你想要了解更多关于排版的知识,可以在 Twitter 上关注他。)
用户界面
首先,我们得先承认一件事情,那就是 Google 网络字体的用户界面很糟糕。而且奇丑无比,难用至极,而且风格和 Google 的 Gmail 和 Reader 的新界面都差很多。【*本文写于 2012 年 8 月,那个时候 Google 的设计确实有点那啥,但是现在已经好多了。】
(还有,Google 网络字体的网页前端代码是在太乱,各种绝对定位和内联的 CSS 样式。算了,另写文章再说这个吧。)
本来很好看的字体,就用这么无可救药的排版和拥挤的间距,整个文本几乎没有任何可读性,这简直是毁了这个字体。各位请看!

*Google 说,只有 Adobe Source Sans 看着才这么丑*去看看[ Jesse Dodd 的个人网站](http://jessedodds.com/),人也用的是相同的字体,但人的排版可明智多了:

*啊~,好多了嘛!*这就说明了 Google 自家网络字体的 UI 是几乎不可用的。好在还有一些替代方案。
首先是 Google 文档。你可知你可以在其中使用多数 Google 网络字体的?其实很简单,在字体菜单里选择“添加更多”,你会看到这个:

*为啥 Google 网络字体页面就不能这么好看?*在 Google 文档里,默认的排版就比较理智,关键是你还能自己改!
最重要的事我发现直接将字体在写作中就呈现出来,对于评估其可读性有着很大的帮助。
还有一个不错的小工具 FontFriend ,是一个浏览器书签,可以快速的将 Google 的网络字体应用在你当前正在浏览的页面中(感谢 Ali 的提醒)。
当然,我知道你看这篇文章是因为这些新字体,那我就不再卖萌了,现在开始:
[hr style=”dotted”]
Open Sans
在网页中,我们还是有一些非常好的无衬线字体可以使用的。一开始人们使用 Verdana,后来使用 Arial,再后来就成了 Helvetica(估计是 iOS 和 Bootstrap 的原因,这两者的默认字体都是 Helvetica)。
然后人们开始陷入了僵局。Proxima Nova 是个非常受欢迎的字体,可惜是收费的,对于很多人来说这还是有点困难的。

*Open Sans 被使用在 Folyo 的博客中*接着 [Open Sans](http://www.google.com/webfonts/specimen/Open+Sans) 就开始流行了。我不是什么字体专家,所以别和我讨论什么 X-字高、什么 X-字翼。我只想说,Open Sans 真的很漂亮。
[hr style=”dotted”]
Source Sans
Adobe 上个礼拜刚刚发布了 Source Sans,Google 就把它收录了。我感觉 Source Sans 正在挑战 Open Sans 的霸主地位。
[hr style=”dotted”]
PT Sans
[PT Sans](http://www.google.com/webfonts/specimen/PT+Sans) 对于企业网站来说是一个非常合适的字体(看上去有点严肃)。它不仅有[大写版](http://www.google.com/webfonts/specimen/PT+Sans+Caption)和[窄版](http://www.google.com/webfonts/specimen/PT+Sans+Narrow),甚至还有[衬线版](http://www.google.com/webfonts/specimen/PT+Serif)。
[hr style=”dotted”]
Droid Sans

*被 Rob Turlinckx 用在 Dribbble 上的 Droid Sans*[Droid Sans](http://www.google.com/webfonts/specimen/Droid+Sans) 是 [Steve Matteson](https://profiles.google.com/107777320916704234605/about) (也是 Open Sans 的设计师)设计的。
[hr style=”dotted”]
Lato
[Lato](http://www.google.com/webfonts/specimen/Lato) 是一个值得收藏的细字体。当字号很大的时候它看起来非常漂亮,特别是在暗色或者彩色的背景上(但千万别把它用作正文!)。
[hr style=”dotted”]
Cabin
我不知道 Cabin 是不是 Pablo Impallari 尝试去弥补之前 Lobster 的不足,但无论在何种情况下,它都是一款很不错的无衬线字体,并且还有 Condensed(细长) 和 Sketch(手绘) 版哦。
[hr style=”dotted”]
Gudea

*被 Mathieu Strabach 用在 Dribbble 上的 Gudea*[Gudea](http://www.google.com/webfonts/specimen/Gudea) 是一个看起来很有科技感的无衬线字体,完美的粗体非常适用于 LOGO 和 标题。
[hr style=”dotted”]
Droid Serif
Droid Serif 是 Droid Sans 的衬线版,同样也是一个不错的选择。
[hr style=”dotted”]
Lora
Lora 是一个非常适用于正文的衬线字体。
[hr style=”dotted”]
Poly
Poly 是一个替换 Lora 的最佳之选。
[hr style=”dotted”]
Alegreya
[Alegreya](http://www.google.com/webfonts/specimen/Alegreya) 不仅提供了粗体,还提供了超粗体,无论是用作标题还是正文都非常合适。
[hr style=”dotted”]
Noticia Text
Noticia Text 也是一款可供选择的衬线字体。
[hr style=”dotted”]
Rokkitt

*Dave Ruiz 为 Captions 所做的一款精美的主题,使用的就是 Rokkitt*[Rokkitt](http://www.google.com/webfonts/specimen/Rokkitt) 是一个非常时尚的衬线字体,有着很强的个性。
[hr style=”dotted”]
Glegoo
Glegoo (谁起的这名字?!)是一个有着高 X-字高 的衬线字体,一眼看上去很像 Kulturista。
[hr style=”dotted”]
Pacifico
Pacifico 极有可能会取代 Lobster(虽然我曾一度以为会是 Wisdom Script),但是目前为止看来,Pacifico 依旧是一个非常不错的字体。
事实上,我在一些个人的项目中已经使用了 Pacifico,比如我的电子书以及 The Toolbox。

*Pacifico 被用作图片标题的(红色部分)*更新于 8月20日:新增了更多不错的字体。
[hr style=”dotted”]
Asap

*Asap 被用在 ReelSurfer 导航栏上*[Asap](http://www.google.com/webfonts/specimen/Asap) 是一个特征显著的无衬线字体,特别是他的斜体,也相当不错。
[hr style=”dotted”]
Amaranth

*Amaranth 被用作 Duet 主题的标题*[Amaranth](http://www.google.com/webfonts/specimen/Amaranth) 作为一款无衬线字体,虽然有点古怪(但其实很可爱)。
[hr style=”dotted”]
Armata

*Armata 被用在 Nodize 的网站上*[Armata](http://www.google.com/webfonts/specimen/Armata) 是一个科技感比较强的无衬线字体,每次看到总会让我想起 [Stratum](http://processtypefoundry.com/fonts/stratum-1-and-2/)。
[hr style=”dotted”]
Cutive

*Cutive 被用在 iStockSlogan 中*[Cutive](http://www.google.com/webfonts/specimen/Cutive) 是一个很可爱的打字机字体,让人不禁想起美国人的打字机。
[hr style=”dotted”] 更新于 9月13日
Abel

*Talended Glaudiu Cioba 将 Abel 发挥到了极致*[Abel](http://www.google.com/webfonts/specimen/Abel) 是一款比较窄的无衬线字体,让标题略带个性。
[hr style=”dotted”]
Dosis

*Patrick Haney 将 Dosis 的美表现的淋漓尽致*[Dosis](http://www.google.com/webfonts/specimen/Dosis) 是 Pablo Impallari 的另一款作品。这是一款圆形并且窄的无衬线字体,而且不低于 7磅。
[hr style=”dotted”]
Varela
Varela 相对于 Proxima Nova 来说也是一个不错的替换方案,而且他还有一个非常出名的圆角版(Rounded Version)。用在像 Threadlife 这样的网站非常漂亮。
[hr style=”dotted”]
Imprima
Imprima 是一款很漂亮的字体,但总是让人想起 Bree,Ronan Berder 在他的博客上就是用了这种字体。
[hr style=”dotted”]
Ropa Sans
Ropa Sans 也是一款看上去科技感十足的字体,用做标题非常合适。
[hr style=”dotted”]
Playfair Display
Playfair Display 是一款非常漂亮的衬线字体【*是我最喜欢的衬线字体】,非常适合搭配 Lato,就像你在 The Rise of the Artist 中看到的这样。
[hr style=”striped”] 毫无疑问,Google 网络字体已经成为了网页设计中一个巨大的资源库,你不需要仍旧使用老旧的 Georgia(可怜的 Georgia,我依然爱你!)或者 Arial 了。现在你可以使用这么多的字体去让你那可悲的网站变得漂亮。
不管怎么说,可能仍然会有一些漂亮的字体被我忽略,也非常欢迎你的推荐和评论。
(你也可以照旧在 Hacker News 中评论或者点赞)
[hr style=”dotted”] **作者:**Sacha Greif
**翻译:**Max Cheung
原文链接:More Google Webfonts that Don’t Suck