字体配对指南:为您的网站选择最佳字体组合

已发表: 2020-11-02

作为网页设计师,您要为构建的每个网站做出许多重大决定。 调色板、UI 交互、导航布局、为您的网站选择最佳字体等等。

然而,您可能没有花足够时间考虑的网页设计领域之一是字体配对。

选择一种好看的字体是一回事。 一旦您对品牌的声音和风格有了很好的了解,识别传达类似氛围的字体就会变得容易得多。

目录

  • 为什么需要字体配对?
  • 配对字体时要考虑的事项
  • 网页设计中字体配对的 4 条规则
  • 规则 #1:在您的网站上使用的字体不超过三种
  • 规则#2:协调和对比是好的; 冲突是坏的
  • 规则 #3:不要害怕在字体超家族中配对
  • 规则 #4:确保您的字体大小和形状正确
  • 网页设计的 30 种最佳字体组合

为什么需要字体配对?

网站需要不止一种字体——建立层次结构,让访问者与大量文本保持互动,并在潜意识中告诉访问者更多关于品牌个性和方法的信息。

当您在混合中添加这一额外的复杂层时,事情会变得棘手。 您不仅将字体相互配对; 您也将它们与您的网页设计配对。

我相信您在浏览网络的过程中遇到过这样的场景:

  • 两种无聊的字体使一篇冗长的博客文章很难阅读,你最终会浏览标题,看看你是否可以用这种方式把故事拼凑起来。
  • 一种有趣而独特的草书字体向访客介绍了该业务,只是因为太小且超级简单的正文字体与第一印象相矛盾。
  • 该网站声称该公司采取了一种年轻和创新的经营方式,这就是为什么复古字体看起来如此格格不入的原因。

如果您不花时间了解字体是如何组合在一起的,那么在字体配对中就会出现太多问题。

了解如何向 WordPress 添加自定义字体

配对字体时应考虑的事项

在我们的网站最佳字体指南中,我们总结了要寻找的关键特征:

1. 易读性

衬线字体在文学和报纸中备受青睐的原因之一是因为其易读性。 字符顶部和底部的衬线(脚)使读者更容易区分外观相似的字符,例如大写的“I”和小写的“l”,因此不会因理解问题而变慢。

如果您正在设计一个超过 600 个单词的页面,出于这个原因,在正文中使用衬线并不是一个坏主意。

也就是说,如果您发现具有不同字体的无衬线字体(即使没有衬线字体),请不要害怕尝试。 我们有一些示例说明如何在下面的正文和标题位置中使用无衬线字体。

2. 可读性

长期以来,人们认为 san serif 比在线文本的 serif 更好的原因之一是因为它们的可读性高。 然而,研究表明,人们阅读 serif 与 san serif 文本的速度或容易程度几乎没有区别——至少在较小的尺寸下。

多年来,随着屏幕分辨率的大幅提高,印刷师已经能够创建两种风格的字体,并且具有同样的可读性。 正如 NNG 解释的那样:

“在线排版的旧可用性指南很简单:坚持使用无衬线字体。 由于计算机屏幕太糟糕而无法正确呈现衬线,因此尝试以正文大小使用衬线字体会导致字母形状模糊。”

虽然其他字体类型——比如过度装饰的字体——可能在大标题文本之外难以阅读,但设计师在如何使用衬线和无衬线字体设置页面上的文本样式方面有很多选择。

那么,您应该更清楚的是字符的大小和间距,因为这确实会影响可读性和易读性。

3. 舒适度

有一些网页设计师不愿意使用像 Helvetica 或 Times New Roman 这样的字体,因为它们被过度使用了。 但是,字体选择和配对与您对网站排版的感觉无关,而与访问者阅读时的舒适度有关。

所以,如果他们完成了工作,选择经典并没有什么可耻的。

4. 风格

选择字体类型和样式与您的品牌非常吻合的字体。 例如,衬线字体感觉更传统和严肃,而不是草书字体,后者往往更古怪和有趣。

您可以通过选择正确的字体类型来向访问者介绍您的品牌。

当您进入下一步的排版设计时,请不要忽视这些规则: