但是和设计的许多方面一样，排版也有一些规则来帮助找到完美的字体搭配。我们将向你展示你需要知道的关于字体的组合，并给你一些伟大的字体组合，你可以在你的工作中使用。

在网页设计中组合字体的技巧

1.使用不同色调的字体

写作可以表达情感。我们用来显示单词的字母形式也会影响我们的感知。有些字体是严肃和商务的，而另一些则是乐观和非正式的。字体具有独特的特性，可以为它们所显示的单词添加意义。当选择网页字体时，将不同色调的字体组合在一起可以增加视觉上令人愉悦的对比。

在挑选最佳的字体搭配时，首先要考虑网站所代表的人物或内容。泡泡字体可能适合玩具公司，但在律师事务所的网站上就不合适了。另一方面，一个轻松的网页设计会被最严重的衬线所阻碍。

最需要考虑的是标题和正文的版式。标题由于其更大的尺寸，在使用程式化字体方面提供了更多的自由。对于正文复制，您需要一种字体，在较小的文本大小上容易看到。

这个模板是通过Webflow因为一个虚构的糖果公司使用字体Lovelace和幻想的现代字体Erotique作为标题。支持正文内容使用更传统的Megabyte字体。字体有不同的个性，但在一起工作很和谐。

不要害怕在你的网页设计中使用色调相反的排版——有时并置可以让你的内容更流行。

2.用字体对创造对比——但不要有太多的对比

字体对应该明显不同——例如，不要在标题中使用与正文副本中使用的无衬线字体惊人相似的无衬线字体。你需要不同的字体组合，在视觉上不同，但仍然相互补充。

如果我们采用像Great Vibes这样的书法字体，并将其与像Merriweather这样的衬线字体结合在一起，会发生什么?我们最终得到的是一种不太赏心悦目的对比感。

Great Vibes的繁复和循环有一种柔和和复杂的感觉，而Merriweather是一种严肃的字体，通过衬线字体表达了一种正式。在这里，对比太大了，组合不起作用。

让我们转向一种更令人满意的字体组合。在header中，我们使用Vollkorn这是一种巧妙有趣的衬线字体。我们把它和开放无，更加中性和朴素的无衬线字体。这种搭配效果很好，因为尽管有对比，但这两种字体的微妙之处使它们在视觉上互补。

3.将不同的字体限制在三种或更少

在大多数设计中，你会使用一种网页字体作为标题，另一种作为正文。在布局中也可能有一些地方，出于装饰目的，使用手写字体或更风格化的字体。不管你有多喜欢那些免费的字体，一个网站都不需要三种以上的字体。

许多设计师选择在他们的工作中使用字体超级家族。超族是一组相互关联的字体。它可能包含风格的变化，如斜体，轻到重，衬线和无衬线版本，以及其他变化。超级家族最好的一点是，他们不用费力去寻找互补字体，因为他们在设计时考虑到了兼容性。

超族使得以多种方式使用单一字体成为可能。来看看这些来自Roboto超级家族的选择吧。Thin 100斜体的微妙和Regular 400的强烈宣言有着巨大的区别。

字体超级家族为您提供了大量的字体选项，同时仍然坚持单一的字体样式。

4.通过字体配对传达视觉层次

的Equitist，这是一个用Webflow，通过不同的字体样式、大小和颜色传达其层次结构。

您可以使用排版来发送关于内容不同部分重要性的视觉信号。标题应该是视觉冲击力最大的，其次是副标题，然后是正文。使用你的字体组合给你的内容一个明显的结构感。

使用字体大小来表示顺序

这是一个简单的问题。最大的字体代表优先级，大小递减代表内容的层次。使用全大写也能很好地突出像呼吁行动这样的重要元素。但是要确保使用所有的大写字母——没有人希望网站对他们大吼大叫。

对于大多数初学设计的人来说，整合不同尺寸的字体是首选，但也有其他方法来表示视觉层次。

尝试不同的重量

建立与Webflow，这是该机构的网站巴别塔混合了较轻和较重的字体重量。

较重的权重表示重要性，而较轻的权重表示内容层次结构中的较低级别。你可以通过改变字体的重量来做很多事情，就像我们在Roboto超级家族中看到的那样。

改变字体颜色

虽然你不想让你的设计充满冲突的色调，但改变文本的深浅可以帮助某些词脱颖而出。浅色和深色的变化创造了一种很好的对比感，深色表示应该先读这篇文章。在尝试字体颜色时，要确保它们不会消失在背景中。

在考虑字体组合时需要考虑的字体

现在我们已经介绍了您应该记住的字体设计原则，让我们看看字体的主要类别和一些您可以在设计工作中使用的组合。

衬线

衬线字体是为了印刷时的可读性而开发的，其历史可以追溯到18世纪末。

衬线是加在字母上的小线条或笔画。衬线提供视觉线索，使人们的眼睛更容易跟上。衬线字体使扫描文本更加有效，特别是当涉及到大块的写作时，比如在书籍的页面中。

在早期的计算中，原始显示器分辨率不能很好地与基于衬线的字体一起工作。但如今的高分辨率显示器为平面设计师提供了丰富的衬线。

当使用衬线字体时，总是使用无衬线字体。衬线字体通常太相似了，使得字体配对很尴尬。

衬线提供了很大的灵活性。它们的大小字体都很容易阅读，因此非常适合用于正文和标题。

字体配对方案:EB Garamond和Montserrat

在这里，我们已经采取了serif EB Garamond在一个较小的尺寸在主体副本，并结合它在一个更大的规模在标题蒙特塞拉特。衬线字体在字体较小的情况下更适合大段文字。

字体配对理念:Libre Baskerville和Raleway

更明显的衬线和棱角自由泳中找到与纤细的线条形成鲜明对比Raleway．

无衬线

这很简单——san衬线缺少装饰衬线的额外行。无衬线可以在较小的范围内用于段落或正文文本，也可以在标题中与衬线结合使用。

字体配对思路:开放式Sans和Lato

有些设计师可能会因为Open Sans和Helvetica字体的过度使用而嘲笑它们，但它们受欢迎是有原因的。开放无是一种简单但受欢迎的字体，这意味着它与许多其他字体结合得很好。把它想象成香草冰淇淋——它是一个坚实的基础。

这里我们在标题处使用了Open SansLato正文副本中，另一种无衬线字体。

显示字体

当你需要吸引人们的注意力时，显示字体很有效。他们通常有复杂的字体，从大的和粗体到稀疏的和稀疏的。显示字体提供了大量的风格化，这使它们最适合标题和设计中需要用少量文本给人留下深刻印象的其他地方。

字体配对的想法:泡泡糖Sans和开放Sans

泡泡糖无有快乐的风格化的信件，使一个伟大的搭档的中立开放无．

字体搭配理念:Poiret One和Lato

波一个”S微妙的装饰艺术灵感的文字和纤细的线条使它成为一个优秀的现代字体如果你想要更复杂一点的话。将这种字体与更微妙的字体搭配，比如Lato创造了一种对比感，并且仍然很好地配合在一起。

等宽字体

等间距字体中的每个字符都具有相同的宽度。这种固定的水平测量将它们与宽度可变的字体区分开来，赋予它们强烈的一致性。在计算的早期，等宽字体由于其简单性和在早期低分辨率显示器上的良好效果而被广泛使用。

字体配对的想法:IBM Plex Mono和PT Sans

为了向IBM致敬，IBM丛Mono是一种具有视觉识别的现代字体，非常适合初创公司和其他技术领域的公司。将此等间距字体与PT无——具有更清晰的几何图形——创造了良好的对比感和视觉层次感。

字体配对的想法:Roboto Mono和Roboto

我们爱Roboto因为它高度易读。此字体组合，其中配对Roboto Mono带标准版，很养眼。

排版对于网页设计来说是必不可少的

有效的网页设计有很多方面。在选择字体搭配时，要与选择调色板时考虑的程度相同。你选择的字体的色调，你的风格，以及它们的易读性都是网页设计用户体验的重要组成部分。找到那些很酷的字体这体现了你所创造的内容的个性，并为你的访问者提供了体验内容的最佳方式。