Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

初学者如何搭配字体

by
Length:LongLanguages:
This post is part of a series called A-Z of Web Typography.
Getting the Hang of Hanging Punctuation
Start Using Quotation Marks the “Correct” Way

Chinese (Simplified) (中文(简体)) translation by Yimin Zhou (you can also view the original English article)

搭配字体不是一件容易的事情。搭配两种以上的字体是一个难题,选择两种字体达到想要的效果足够让你头痛。本文将探讨如何解决这个难题和帮助初学者入门网页设计中的字体搭配。

幸运的是,字体排版已经存在很久了,有许多规范准则和大量的资料可以参考。唯一的问题是如果你在互联网上搜索,你会发现成千上万互相矛盾的观点。下面看看如何辨证这些观点。

本文将涉及到以下几块内容:

  • 你的目标
  • 应该使用多少种字体?
  • 是否购买字体?
  • 内容的性质是什么?
  • 如何搭配成功?
  • 搭配1:协调
  • 搭配2:对比
  • 搭配3:反差

你的目标

要记住基本的准则,当你在搭配多种字体的时候,保持一致性多样性十分重要。

应该使用多少种字体?

要加入多少种字体完全取决于你,但要记住你想达到什么整体目标。字体就像人,各有性格。而字体的性格就像人的一样,有时候互相矛盾。想象一下你的字体就像婚礼接待的座上客,一个接待者就已经足够了,因为多种性格会让气氛变得尴尬,就像《老大哥》一样。

要保证字体群带有主题,八个人但没什么话说会显得沉闷。

虽然不再存在了,但Fusion Ads 2011是一个成功的字体堆叠的例子。

并没有规定你应该或者不应该在一个页面布局上使用多少种字体。使用多种字体并取得协调的效果是一种挑战,但如果成功的效果会很显著。使用较少的字体比较简单。尝试通过选取有多种差异和偏重的字体来结合这两种方法。这样你可以在使用一系列的字体时恰到好处,互补的字体时不错的选择。

是否购买字体?

你可以通过@font-face使用很多免费的网络资源,比如google fontsfonts.comfontsquirrel's font kit generator,但如果项目许可可以选择购买字体。单一域名许可各不相同,但有许多好处。

质量。商业字体的质量比较有保障。这并不是说免费字体就不好,但级别不同。商业字体有更细致的细节,表现在线条的粗细、形态、留白和字距上。

对比以下相似的两种字体

QuicksandMuseo Sans Rounded

Museo的字距细致出色,而Quicksand如果不加修整就显得不完美(比如看“o”和“i”),在网页上修正字距并不明智。像kern.js这样的工具可以让你设置每个字符的字距,但用在大篇文字上就显得不实际。

你可能会觉得这种细节太小了根本察觉不出来,但是细节是魔鬼。

原创。另一个优势是原创性。既然买了字体,你的作品的原创性就很可能会增加。

社区。购买字体可以刺激行业增长。健康的市场促进产品制作。我们常常寻找机会增加成本获取利益。

内容的性质是什么?

在选择字体的时候,重要的是考虑内容布局的性质。仅仅是正文,还是多层标题、副标题?或者是像杂志排版里的decks,引语?在使用多种字体的时候确保角色分明,比如副标题的字体应该保持一致。明确字体的用途。

因为篇幅有限,我们会直接看几对字体。我们将探讨哪种字体在某种情况下能够搭配在一起和其中的原因。

如何搭配成功?

你可能曾经听过:成功的字体搭配运用到协调或者对比,而非反差。意思是你选择的字体能够用到一起是因为有某些共同的特点,或者是完全不同的特点。然而,字体也可以因为相似或者差异而形成反差。

一起来看看这些成功的搭配准则。

搭配1:协调

当说到两者字体搭配协调的时候意味着拥有相同的特质。或者是字距相似,或者是比例,抑或高度。通过Kerry Scott Jenkins的这些例子可以清楚地看出相似性。

搭配协调的字体的其中一种方法是选择两个来自同一个体系的字体。来自同一个体系意味着存在相似性。Steve Matteson设计了用于安卓设备的Droid体系字体,包含各种粗细和风格、衬线和非衬线字体。或许过于理想,下面的字体搭配起来很好看。一种作为标题,另一种作为正文。

Droid SerifDroid Sans

反过来也很不错。

Droid SansDroid Serif

两种字体都很干净而且具有现代感,另外你能想像到,因为x字高较大都非常适合用于网页和小屏幕设备。

x字高是指字体基线到小写字母最上方的高,就像小写x字母的高度。在比例上较大的x字高可读性更高。 这两种字体都带有这种特点。

同样地,出自同一个设计师的字体通常都带有某些共同的特性,放在一起显得协调。这两种字体维持的比例有惊人的相似处,比如看小写o字母。

Hannes von DöhrenCowboyslangSupria Sans Condensed

看看以下两种字条的线条。初看好像没有相似性,但两种线条干净的字体能够很好搭配在一起:

BevanArapey Italic

柔和的线条搭配起来也不错:

AnodynePoulaire

搭配2:对比

有对比效果的字体搭配在一起往往可以取得出众的效果,但应该如何产生对比?下面列出了一些适用的原则:

  • 风格: 字体资源站上都会有分类,比如哥特体、等宽字体、手写体、粗衬线体等。不同风格的字体可以形成对比。
  • 大小: 字体大小可以形成对比,这里不多说了。
  • 粗细: 不同的粗细长用于形成视觉上的层级关系,也是运用了对比来形成层级。
  • 形态: 考虑字体的比例。成转起合的不同可以形成对比。
  • 颜色: 这里不仔细展开,但颜色可以很容易地形成对比。

最简单地,可以先考虑搭配衬线和非衬线字体产生的对比。

这是最经典的搭配,选择装饰性的衬线字体作为标题,再选择一个非衬线字体作为正文,或者换过来。无论怎样都是成功的搭配。一起来看看一些常用系统字体的搭配。

GeorgiaArial

skeleton的示例重可以看到这种搭配。Georgia和Arial都没有过多的修饰,两种字体可以完美地搭配在一起。

加入一点细节:

PT SerifPT Sans

不要忘记字体的角色。在上面的例子中,我们通过字体大小来形成层级,标题比正文大。在众多建立层级的方法中,粗细最有效。

Lora BoldIstok Web

假设我们并不考虑字体排版,只考虑两个标题,例如正在建站的通知。我们可以做更多的尝试,因为不用考虑行高和大段的文字。只考虑h1和h2。

压缩字体常常能取得不错的效果,因为在垂直空间上占据较多的位置。

Bebas NeueAlex Brush

再来类似的搭配:

Gerren LamsonSimon Walker的巧妙搭配

有兴趣的话,可以看看都是什么字体:

再来,截然不同的特点,但通过颜色形成清晰的层次,互相衬托:

或者试试两种非衬线字体。下面的Conqueror就是特别设计为标题的字体。因为是大写字体,你可能需要加点字距,就像下面一样。

Inline是指字体里面带有留白框线 - fonts.com

但遗憾的是这还不能用于网页,所以需要通过象数设计。这是我目前最喜欢的字体。

AW Conqueror InlineGudea

在看以下的粗体衬线,简单但效果显著。

Alpha Slab OneMako

粗体衬线非常吸引眼球,但不注意的话可能会有点强势。就像牛闯进陶瓷店一样。上面的例子中搭配精细的字体,效果很好,因为富有对比但又不失共通性。两种字体看起来很不一样,但仔细看曲线,你会发现并非完全不同。

有些字体就是百搭,你几乎不会搭错。比如下面的Buttermilk,华丽而富有装饰效果。不管你搭配什么字体,只要不抢风头,效果会很好。下面跟Georgia搭配:

ButtermilkGeorgia

再跟Aller搭配:

Buttermilk and Aller

下面就显得有点冲突了,两者的个性都太强。但我还可以接受,看起来还挺不错的,有时候真说不准:

ButtermilkEccentric

搭配3:反差

这里不会讲什么字体不可以搭配在一起,但会讲讲两种有着惊人相似处的字体,放在一起却不成功。

AlmendraStoke

但为什么不能搭配在一起呢?这里符合搭配的原则,具有一致性而又有差异性。

首先不同的风格,一种是哥特体,另一种是罗马衬线字体

其次,有不同的比列,一种比较紧凑有较大的x字高,另一种较宽有较高的上行。

然而他们的粗细和大小相似,同时每个字母的结尾都带有奇怪的

问题就在这里。因为拥有三个类似的特征(粗细,大小和装饰),两种字体变得过分相似,扮演着非常类似的角色,但细小的差异形成反差,所以效果不理想。

比如,迹的弯曲程度完全相反:

两种字体的完全不同:

哥特体形成的方向稍微倾斜,但罗马字体的是垂直的:

这些差别当用于其他字体时,在乍看的时候并不是问题,但这里的两种字体看起来几乎一样。

很难定义什么字体可以或者不可以搭配在一起,这常常靠感觉。当你觉得某些字体搭配不当时,尝试找出原因会在将来帮你更快地做出决定。

最后的技巧

现在,如果你去Google Web Font的目录,你会发现许多字体配对。

结语

看完了本文希望你在字体搭配方面有所收获。最应该记住的是如果不尝试你永远不会知道!

多做尝试,作为网页设计师,应该有一个不断更新的字体库。考虑最基本的,然后开始尝试,你会为你发现的结果而感到惊讶。

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.