设计中选择正确字体的6种方法

今天我想谈谈微妙的方法来证明你的字体决定。对于非设计师来说,这些事情并不一定是显而易见的。如果您认为排版是主观的,请阅读本文。如果您仍然认为这是主观的,请再次阅读。(我的观点并不是你可以构建某些字体最佳的密封证明,但是字体选择背后的理由远远超出了眼睛)。

让我们潜入。

1 /它是当前设计的更好版本

我想在这里设置基线。一个非微妙的字体决定是:“我的网站很有趣,所以我会使用一个有趣的字体作为徽标 – 就像Comic Sans!”

(对不起,很简单的例子,但这提出了一个问题:为什么设计师如此讨厌Comic Sans?正是因为它被频繁使用,因为这是一个直言不讳的槌 – 这是一个有趣的 – 你是 – 你有 – FUN-YET,并没有人喜欢被击中头部。所以这并不是因为字体形式美观不足。这是因为使用率膨胀。我怀疑我甚至会注意到字体被用在漫画书中!)

所以这里有一个神秘的茶店,里面有Comic Sans标志:

假碳河茶公司标志 - 之前

因为它是一家茶店,而不是漫画书,所以我们遇到了问题。但我们不需要废弃一切。这里有一小部分品牌我们可以打捞。为什么这家茶店和Comic Sans一起去?是因为他们想要一种手绘,随意,个性化的感觉?温暖和舒适,但臀部和低调?喜欢喝茶?!?!

是的,可能。聆听,远远不是来自设计师做出假设,而是来吧。我和客户一直在这个街区。我知道这个废话是怎么回事。

负责任的设计师可能会想到这样的事情。

“好的,手绘。嗯……这给了我一些字体的想法。幸运的是,我一直在对过去十年中看到的每一个漂亮的手绘字体的截图/链接/字体文件进行分类,所以让我来看看这些50,看看是否有任何可能适合茶店的品牌。 ”

而且,噗,我们得到:

假碳河茶公司标志 - 之后

凉。花了差不多5分钟。

我想指出关于这个小转变的三件事:

  • 可以用最好的理由做出糟糕的设计决策。我们的想法是做出更好的决定,通常使用完全相同的 – 或更好的_defined_ – 理由。
  • 它有助于了解TON字体。为此,请下载WhatFont Chrome扩展程序,并使用它来开始识别您访问的任何网站上您喜欢的每种字体。下载新字体时,请将其分类为FontBook或Windows等效字体。

顺便说一句,上面的字体是美妙的Wild Type铸造厂的 Espa 。可用于完全免费的低价,低价!

考虑到这个例子,还有更多内容,让我们谈谈其他方法来证明你的字体选择。

2 /它符合你的品牌形容词

我上面用的一个漂亮的设计师伎俩是用形容词描述我想要的品牌。这是关键。总是值得在项目开始时写下描述你的品牌的形容词。您希望用户感受到什么?您希望他们想到您的公司或项目?如果你认为这是一个不值得你的傻瓜运动……坚韧的饼干。

你不必是这个人 ……

来自硅谷秀的设计师

……但你需要与大脑中使用文字来描述事物的一面取得联系。我希望不要求太多。

让我们看一些字体,看看形容词是什么意思。

Crimson Text类型样本
Crimson Text,可在Google字体上找到
Abril Fatface型样品
Abril Fatface,可在Google字体上找到
Omnes型样品
Omnes,可在Typekit获得
DIN 2014型样品
DIN 2014,适用于Typekit

为什么Omnes感觉柔软?这是因为角落几乎都是圆形的。与DIN相比,它具有平方的一切。即使是“D”的圆角看起来足够弯曲,使得“D”可以与矩形区分开来。

你不需要知道很多关于字体来提出这些形容词。当你开始玩它们时,它应该是第一个突然出现的东西。

现在我喜欢这些例子的是他们中没有一个是疯狂的过度字体。没有Comic Sans / Papyrus /等。在一堆。他们都非常沉稳和正常,但他们说的是截然不同的事情。

如果你有一个强硬而权威的品牌,比如像Palantir这样以安全为中心的软件公司,那么DIN就很有意义。

Palantir截图

设计事实有一点点书呆子的氛围。书呆子,清脆。对他们来说,Crimson Text很棒。

设计事实截图

你明白了。我想继续前进,所以我们称之为。

3 /它的历史或灵感与您的品牌相匹配

在上一节中,我说你不需要知道一个字体开始用品牌形容词标记它。现在改变了。我们正在进入的国土,它确实有助于对如何字体已被用于更多的知识。

历史可以为使用字体提供一大堆借口。

例如,某些字体仅仅是一段时间内的IMPLY。本质上不是普遍的,但足以使其成为一种表面上的对话。

例如,Futura是60年代的非官方字体。

以Futura为特色的月球上的牌匾
Futura在月球上,在有史以来的60年代时刻之一
以Futura为特色的Vintage Volkswagon广告
Futura是60年代最具代表性的广告之一
2001年:以Futura为特色的Space Odyssey海报
而60年代最着名的电影之一。

因此,如果你想要做一些复古改造,这是一个很好的选择。

Moonrise Kingdom电影仍以Futura为特色
你有权得到你的意见,但事实是,Moonrise Kingdom是最伟大的Wes Anderson电影。

Wes Anderson使用Futura – 以及复古服装和着色 – 来传达他的电影时间段(IMO,这是一种非特定的复古时代)。

在Futura的情况下,该字体实际上在60年代大量使用。所以它不是那个时代排版的参考,因为它是一个精确的提升。但你也可以对此狡猾。一些较新的字体引用旧字体的启发,但不是全面的回归。

看看Brandon Grotesque。现在超级流行。这绝对是一个咆哮的二十年代的氛围。

Brandon Grotesque字体样本

但同样,这不是HIT-YOU-THE-HEAD 1920年代的回归。它更加微妙。这是微妙的,有些网站将使用字体,没有一点点复古的氛围。这是始终在线的Mixpanel:

Mixpanel.com截图
不相关的排版法则:大多数字体的大写字母较少。这也许可以解释为什么这里所有布兰登怪诞都是大写的 – 少于那种咆哮二十几岁的角色。

无论如何,这些联想中的一些是如此微妙,以至于当你开始时,它真的有助于阅读你喜欢的任何你喜欢的字体。事实上,如果我们查看Fonts.com的Brandon Grotesque的“字体故事”,他们会在第二句中提到20和30 。

好的,还有一个例子。前两个例子–Futura和Brandon Grotesque–正在引用实际的时间段。但你也可以参考用法

例如,我在学习用户界面设计中提到了这个例子,但是在报纸上出现的一堆早期无衬线字体被称为“怪诞” – 是的,这意味着丑陋,看起来好像他们剥去了所有那些漂亮的衬线。Atlas Grotesk是这一领域的现代版本(2012年发布),但您可以通过了解它是经典选择的现代转折来证明其在头条新闻中的使用。

而这正是FiveThirtyEight的作用:

FiveThirtyEight屏幕盖,配有Atlas Grotesk
这么多Atlas Grotesk。精彩。

因此,请在各种网站的“关于此字体”部分进行讨论。Typewolf和Fonts.com这里有很大的选择; 其他网站的选择更有限。这有很多工作吗?是啊,就是。但如果你要在未来几年内进行设计,那么与字体建立工作关系是值得投入的时间。

4 /它具有正确的功能

您可能不会认为字体具有“功能”,但谁知道 – 您可能也错过了许多其他事情!

字体具有功能,最基本的功能是WEIGHTS。我们说的是“大胆”,“斜体”等等。

Cooper Hewitt字体的重量
Cooper Hewitt的“四大”重量
  • 任何正文字体都需要正常,斜体,粗体和粗体斜体 – 如果它没有这四个权重,请不要将它用作正文字体。
  • 任何用作品牌中唯一字体的字体都应该有更多权重:轻,薄,重,黑,极等等。名称不同,但要点是:如果从网站到网站的所有内容都需要灵活性公司schwag的名片上印有相同的字母。
  • 较小的字体您的使用情况,在不太重要的权重。字体使用oooonly为标题或oooonly用于物品或任何署名?凉。即使是单一的重量也可以。但是重量并不是唯一的特征。以下是选择字体时要考虑的其他几个问题:

表格数字

在等宽字体中,每个字符的宽度相同(根据定义)。所以对于其他所有人来说,角色不一定是垂直排列的。当你阅读一个段落时,这是好的,但如果你有一个表,并且一行中的数字可以直接与下面一行中的数字相比,那该怎么办呢?哎呀,如果数字排成一列肯定会膨胀。

这就是表格数字出现的地方。

表格数字

有些字体在门外有表格图。这些数字都是等宽的,如果您输入“11110000”,您就会知道这是否属实。但是,其他字体将表格图形作为OpenType功能。至少在网络上,使用它们只是一个鲜为人知的CSS属性。

小帽子

这个很漂亮,但值得一提。这是问题所在。如果你想让一些文本看起来与周围的文本分开或不同,你有多种方法可以这样做 – 斜体,粗体,引号等。例如,你也可以在所有大写字母中写一些东西。 。这个问题虽然是这种感觉严重超过正常的文本更加激烈。所以打字设计师,他们是优秀的人,发明了小型帽子。所有的重点,没有压力。

小型大写与大写

我发现小型大写字母在“文学”设置中效果最好。他们肯定会为他们带来旧时光。

此外,如果你使用小型大写字母,但你的字体没有它们(绝大多数没有),你可以伪造它们。一部分大写,一部分字母间距,一部分使高度处于高于文本的x高度。唯一的问题?你的假小帽子字母会比周围的文字更薄。尴尬?好吧,也许不是,如果你有一个中等重量,你可以使用这只是比正常体重厚!

重音字符

如果你打算要与写外来任何规律性,检查,以确保您的字体包括一套好的重音符号的。这不是专业设计的正文字体的问题 – 当你开始使用来自网络上的奇怪网站的免费字体时,它就会出现问题。

重音字符
我宁愿不

那个字体是KB Planet Earth,我的首选手写字体之一。然而很明显,它远远不够强大,不能用于非重音拉丁字符的装饰。

我没有更多关于此的内容。

所以,把这一点包含在字体功能中:不要让你对特定字体的爱情导致你在哪里使用它的错误决定。有几次我会喜欢使用一种特定的字体,但最终选择的东西“较小”,因为我需要的功能(FWIW,斜体是我发现最常见的功能)。

5 /它很好

这是挑选特定字体的理由,这种字体可以打开另外一种蠕虫。“很好搭配!?很好地定义!我怎么能确定的是!?”

听着,这已经很长了。字体配对不是我们现在要做的太多,但我们可以在这里敲掉一些低调的果实。如果你想要更多,顺便说一下,我有一个50分钟长的关于配对Learn UI Design中字体的视频。

字体配对的一个简单例子就是它们是超级家族的一部分。也就是说,你已经在使用Alegreya了,那么Alegreya Sans基本上很好地配对。毕竟,命名方案并非巧合:它们是由同一个人设计的,可以一起使用

Alegreya和Alegreya Sans
Alegreya在上面。Alegreya Sans在底部。很好,是吗?

这同样适用于货运三世和运费文本。

货运文本和货运Sans
我只是假设你知道哪一个是’Sans’。

等等。

顺便说一句,你通常可以通过将字体叠加在一起来对字体进行配对,然后调整字母间距和字体大小,直到尽可能多的重叠为止。对于具有大量重叠的字体,它们的字体结构非常相似,并且这些字体通常会形成良好的对,只要它们与开始时的适当不同(“适当不同”的经典示例是:一个是sans serif,另一个serif)。

Alegreya和Alegreya Sans
如果你不相信我或什么…… Alegreya超家族,拿两个。

6 /这是一个主力

每隔一段时间,一位着名设计师会说他们在90%的项目中使用相同的5种字体。这让我觉得这是典型的“ 我草坪上的傻瓜!”来自狡猾的老设计师的评论,但无论如何。也许有一天我也会这样。

但重点在于:如果您可以为20%的项目使用1种字体,那么它就是一个主力

将字体称为“主力”是一种高度赞扬。这意味着单一字体可以播放清扫器。它在身体文字时清晰易读,但作为标题却很有趣; 在很小的时候可读,但在规模上很高雅。主力将包含您需要的所有功能。它永远不会让你失望或让你失望。

虽然许多工作人员在演讲中相当“中立”,但他们不必完全无聊。

在我的学习UI设计品牌中,我同时使用Avenir和Freight Text。这两种字体都是合法的工具,但它们却大不相同。

运费文本和Avenir下一个类型示例
运费文更正式,Avenir更中性。两个备受推崇的主力。

因此,当您看到一个名为“主力”的字体时,只需将其归档即可。这是一个令人难以置信的高质量指标,当你发现自己完全接受任何可能出现的字体时,重新审视其中的一些内容并不是一个坏主意。


好吧,这包含了这个大型帖子,证明你的字体决定是正确的。如果您想查看更多主力字体的示例,请查看下面的“ 用于UI设计的前5个免费字体”。在其中,我涵盖:

  • 我的免费字体可以在各种情况下使用
  • 深入分析各种权重可能有用的情况,以及每种字体的大写分析
  • 您应该避免使用最常见的免费字体

来源:https://learnui.design/blog/justifying-font-choices.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注