记录生活
简单不先于复杂

15种最佳Google字体及使用技巧

8f41849bc150e68

有1052种不同的Google字体系列可免费使用(在撰写本文时)。这是很多选择!因此,难怪您需要帮助在大海捞针中找到最好的Google字体列表。

选择一种字体不仅仅是一种审美选择——它可以对您网站的跳出率和转化率产生重大影响,尤其是当您选择一种难以阅读的字体时。因此,花一点时间为您的网站选择完美的Google字体系列是值得的,而不是使用您遇到的第一种字体。

  1. 为什么要使用Google字体?
  2. 在Google字体中寻找什么
  3. 10款最佳Google字体
  4. 更多字体 + 后起之秀
  5. 如何创建最佳的 Google 字体组合
  6. 在WordPress上使用Google字体的最佳实践
  7. 如何将Google字体添加到WordPress

为什么要使用Google字体?

互联网上有数以千计的字体库,究竟是什么让Google Fonts如此特别?

0a15dfbc006c7ac

谷歌字体目录

首先,它是免费的!最重要的是,谷歌字体由谷歌维护和交付,这意味着它们是安全的。当然,有很多狡猾的网站可以下载免费字体,但谁知道你还能从这些文件中获得什么?

此类网站上的字体质量有时也会受到质疑。谷歌精选了一千多种优质字体。如果您不是对排版有完美眼光的平面设计师,那么它是一个更安全的选择。

其次,没有复杂的许可限制。 Google Fonts目录中的所有字体都是开源的,可免费用于商业项目。

您可以将它们下载或嵌入到您的站点中,您甚至可以在打印项目中使用它们。尽管没有统一的许可证,但存储库中的大多数字体都使用Open Font License 。

cae42d0468c40b6

Open Font许可证

其他“免费字体”很少是免费的,并且带有一大堆令人困惑的许可限制,如果您犯了错误,可能会让您陷入困境。不幸的是,谷歌字体没有同样的包袱。

最后,使用Google Fonts API可以毫不费力地将Google Fonts添加到您的网站。或者,您可以单独下载它们并通过FTP/SFTP将它们上传到您的网络服务器。

虽然谷歌字体往往很简单,而且可能不像一些付费字体那么华丽,但它肯定胜过预装在主要操作系统中的网络安全字体,这些字体每个人都见过数千次。

在Google字体中寻找什么

如果您在设计网站时应该学习一件事,那就是如何选择适合您项目的Google字体。好的排版将成就或破坏您的网站。

这似乎是一个不重要的细节,但它可能是某人提前离开您的网站或留下来成为忠实读者或客户之间的区别。

选择正确的字体是图形设计师花费数年时间掌握的东西,但请记住一些原则,您可以为您的网站选择一种漂亮的字体。

  • 适合您的品牌:这可能是最关键的方面。最好的网站都有一种字体,可以展示他们的个性,同时仍然具有可读性并适合当前的设计。例如,Apple和Iron Maiden使用截然不同的字体,但它们都适合自己的品牌。
  • 可读性:第二个最重要的原则是可读性。滑稽的幻想或蹩脚的字体当然可能适合您的品牌,但如果您的访问者无法阅读,他们会很快离开。因此,您的字体必须专业且清晰。
  • 字体分类:虽然有数百种对字体进行分类的方法,但主要有五种类型:衬线字体、无衬线字体、脚本字体、等宽字体和装饰字体。脚本或衬线字体传达优雅,而等宽字体在科技网站上很受欢迎。了解这些分类将为您的搜索提供更好的起点。
  • 显示或正文字体:显示字体适用于大尺寸、标题或打印项目。为了独特的设计,它们可以承受得不那么清晰。正文字体的主要指令是可读性,因为它们将构成您网站的大部分内容。
  • 情绪和意图:就像任何艺术作品一样,艺术家为特定的情绪和设置设计字体。大多数字体都会附有关于它们是如何设计的以及如何使用它们的注释。使用它们来决定字体是否适合您的项目。

10款最佳Google字体

那么,当其中很多都是主观的时,您如何制定最佳Google字体列表?我们不希望整个列表有偏见,因此我们将使用数据来构建最流行的Google字体列表。

我们将使用Google Fonts分析来相信大众的智慧。拥有超过50万亿的总字体浏览量,谷歌只有一点点数据可供提取。

然后,我们将超越原始流行度数字,选择一些正在流行的新兴HTML字体。准备好?让我们潜入吧!

1.Roboto

87cd706bea45375

Roboto

作为长期运行的#1位置的字体, Roboto是Christian Robertson的无衬线产品,谷歌开发为Android的系统字体。它现在非常受欢迎,有12种不同的风格,并多次出现在Google Fonts的分析中。

例如,Roboto是最流行的字体。但是Roboto Condensed也是第六大流行字体,而Roboto Slab也出现在第12位!

2.Open Sans

7f9ce8d8a9192dd
Open Sans

Open Sans Condensed是一种高度易读的字体,受Google委托并受到其前身Droid Sans的启发。 Google在其某些网站及其印刷和网络广告上使用Open Sans。 Open Sans Condensed是它的姊妹字体,也是Google Fonts上第13位最受欢迎的字体。

3. Lato

0503172b14fb8e4
Lato

Lato是Łukasz Dziedzic的另一个受欢迎的选择。它的设计背后有很多故事,平衡了相互冲突的目标,从而产生了一种独特的、轻量级的sans-serif字体。

4. Montserrat

2978278e5d5f3ef

Montserrat

Montserrat是Julieta Ulanovsky的一种无衬线字体,她住在布宜诺斯艾利斯的同名Montserrat社区。从细线到粗体的18种不同风格,您有相当多的选择。

5. Oswald

34838b55bd06340

Oswald

Oswald是一种无衬线字体,最初由Vernon Adams开发。它的设计考虑到了独特的另类哥特式风格,其大胆的笔触体现了这一点。

6. Source Sans Pro

d1e3508e996070a

Source Sans Pro

Source Sans Pro是一种为Adobe创建的无衬线字体,也是Adobe的第一个开源字体。由Paul Hunt制造,其浅色字体使其干净易读。

7. Slabo 27px/13px

f96b6fae61a79be

Slabo

Slabo是由Tiro Typeworks的John Hudson开发的衬线字体。此字体专为某些尺寸而设计 – 27像素或13像素,具体取决于您的需要。

8. Raleway

44ff8fec268969d

Raleway

Raleway有18种不同的样式,是另一种大系列的无衬线字体,最初由Matt McInerney创建。如果您喜欢Raleway并且正在寻找独特的东西, Raleway Dots提供类似的样式,并采用点状方法,适用于大标题。

9. PT Sans

b6c36abaf677b50

PT Sans

PT Sans是为俄罗斯联邦的公共类型开发的,因此包括拉丁字符和西里尔字符。 PT系列中还有其他几种字体,包括一些衬线选项。

10. Merriweather

fc6389d2fa2917e

Merriweather

Merriweather的名字唤起了令人愉悦的设计理念,而这正是其设计师的意图。虽然不是很受欢迎,但Merriweather Sans是一个姊妹项目,与它搭配得非常好。

更多字体 + 后起之秀

从数字上看,上面的十种字体是最受欢迎的谷歌字体。但是,只显示最流行的选项会损害尚未出现在分析中的新兴字体。以下是我们的一些最爱,但没有出现在分析的顶部。

11. Noto Sans / Serif

c5d208026619146

Noto Sans / Serif

Noto是谷歌委托的字体,有衬线和无衬线两种版本。它会定期更新,现在有超过100种Noto字体,而且还会不断更新! Noto的目标是涵盖来自各种语言的所有字母和字符,同时其独特的设计在数百种不同的字体系列中保持和谐。这些衍生产品包括流行的Noto Sans KR和Noto Sans JP 。

12. Nunito Sans

1a1d429a0c4f49b

Nunito Sans

Nunito Sans是一种无衬线字体,并且正在迅速普及。它的使用量在2018年至2019年间增加了两倍,而且每年都变得越来越流行。

13. Concert One

7e7773ae0f3a95d

Concert One

Concert One是一种圆形怪诞字体,是标题字体的绝佳选择。其非传统的设计肯定会吸引眼球。

14. Prompt

5f33eaa55c629dd-1

Prompt

Prompt是来自泰国通信设计公司Cadson Demak的无衬线字体。它是无环的(泰语相当于sans-serif)并且包括泰语和拉丁字符。

15. Work Sans

86ccbcea0b3006f

Work Sans

Work Sans是一种为在屏幕上使用而优化的无衬线字体。设计师建议为14px-48px的任何东西使用中量级样式。

如何创建最佳的Google字体组合

如果您认为尝试从Google Fonts中选择一种字体很困难,请等到您尝试在您的网站上将它们配对!值得庆幸的是,这不是您必须解决的问题(除非您愿意)。您可以使用多种方法来获得最佳的Google字体组合。

首先,如果您向下滚动页面,Google Fonts网站本身会建议流行的配对:

04f5298ff36e9bd

查找流行的Google字体配对

除此之外,您还可以使用像Font Pair这样的网站来获得更多建议。

在WordPress上使用Google字体的最佳实践

为您的项目找到完美的字体后,这里有一些在WordPress上使用Google字体的最佳实践。

限制您使用的字体粗细数

其中一些字体(如 Montserrat 和 Raleway)具有18种不同的字体粗细。虽然这有利于为您提供选择,但您不想在WordPress网站上加载所有18个字体粗细,因为它会减慢您的加载时间。

遵循此准则非常重要!

对于大多数字体,一个好的经验法则是最多使用三个粗细:

  • 常规
  • 斜体
  • 加粗

我们现在看到的许多WordPress网站甚至跳过斜体,只使用两种不同的字体粗细。

如果您自己嵌入Google字体,则可以准确选择要包含的粗细。首先,访问字体页面,然后单击所需样式旁边的选择此样式。

af4c1bc98edef13

在Google Fonts中选择一种字体

今天的大多数WordPress主题都包括选择要使用的Google字体和粗细的简单方法。但并非所有主题开发人员都专注于性能。因此,在某些情况下,最好在主题中禁用Google字体并自行添加。

Variable fonts也开始流行,并得到所有现代浏览器的支持。这些很棒,因为它允许一个字体文件转换为不同的属性。 Google Fonts有很多可变字体可供选择,您甚至可以将搜索范围缩小到特定的字体。

4f64accc5e6ed62

考虑在本地托管Google字体

作为从Google服务器提供字体的替代方法,您还可以在本地托管字体,从而提供性能优势。但是,请记住,大多数Google字体可能已经缓存在人们的浏览器中。因此,我们建议您进行性能测试。

如果您使用Google字体以外的高级字体,例如“Brandon”字体,则在本地托管它们(并从您的 CDN 提供它们)是最佳途径。

选择将获得更新的字体

字体就像WordPress插件和主题——随着时间的推移,它们会收到更新和改进,以使其变得更好。虽然风险远不及WordPress插件那么可怕,但选择一种接收定期更新的字体仍然是有益的。例如,Google的Noto系列自2014年以来定期更新。

由于此列表中的大多数字体都很受欢迎,因此可以肯定此列表中的任何字体都会定期更新和改进。如果你决定不在名单上,确保你选择的任何字体都足够流行以引起注意绝不是一个坏主意。

不要忘记可访问性

据世界卫生组织统计,根据2015年收集的数据,估计有2.53亿人患有视力障碍:3600万人失明,2.17亿人患有中度至重度视力障碍。此外,截至2021年,患有某种形式障碍的人数已增至22亿。

使用Google字体时,您可以通过CSS控制其外观,例如颜色和大小。所以不要忘记遵循Web 内容可访问性指南 (WCAG) 2.0 。这将确保每个人都可以轻松访问您的内容。

遵循这些准则将使更广泛的残疾人可以访问内容,包括失明和低视力、耳聋和听力损失、学习障碍、认知限制、运动受限、语言障碍、光敏性以及这些的组合。 – Web 内容可访问性指南 (WCAG) 2.0

一项重要的指南是颜色对比度。您最不想做的就是发布令人惊叹的内容,结果却让人们的眼睛感到疲劳!您可以使用WebAIM 的 Color Contrast Checker等工具来查看您的字体颜色是否符合官方建议。

0da9b2881e72c9f

颜色对比度检查工具

如何将Google字体添加到WordPress

选择一两种字体后,最后一步是将其添加到您的网站。多亏了谷歌字体,这项任务比平时更容易。

假设您想在您的网站上添加一种字体。在这种情况下,您有三个选择:安装插件,例如Easy Google Fonts或Google Fonts Typography ,使用Google Fonts API将字体上传到您的网站,或手动下载并将其托管在您的网站上。

小结

谷歌字体非常棒,被数以百万计的网站使用。它们通过可靠的排版和图像设计原则使网络更加愉快、开放、快捷和易于访问。

为了确保您的访问者获得更好的整体体验,我们建议您遵循最佳字体实践,例如限制字体粗细、在本地托管字体(如果需要)以及遵守可访问性指南。

赞(0)
未经允许不得转载:爱安普 » 15种最佳Google字体及使用技巧