TYPEFACE OR FONT

如何区分TYPEFACE OR FONT,希望本指南将帮助您提高设计质量。



你能说出这个gif上绘制的字体吗?



Q:Hey, Jeremy, 你怎么看待这种Font呢?

A:你说的是Typeface,不是Font。

Typeface 代表一种概念。 而 Font 只是在这个概念体制下形成的一种格式。 比如 (Helvetica 是一款 typeface,而 Helvetica Regular 就是其中一个 font)


举个例子。 The Typeface 代表一首歌曲。 Font 只代表这首歌曲其中的一种数字格式。




这些还重要吗?

字体不再受到铅字的限制了; 现在你可以在数字文件中获得字型所有的大小和变体。


早在2014年,我就是一名平面设计师,刚刚准备搬到旧金山成为一名UX设计师。 在此之前,我曾与不同的跨国企业集团合作。我准备通过在湾区的创业公司工作来改变一切。


我知道如何在艺术海报中布置元素并将字体组合得天衣无缝 - 但当我在Web应用程序上工作时,我发现它们是如此不同? 我很快就意识到,我需要从新开始了。


在了解UX设计的同时,我发现自己对排版特别感兴趣。 我爱上了几何无衬线字体和新古典衬线字体。 我开发了以下一系列指南,这些指南一直帮助我进行排版设计。 希望您可以应用这些技巧来开始改进你自己的排版设计过程。


排版的六个技巧


1.首先为正文选择字体。

2.避免使用两种以上的字体。

3.平衡线间距和字体大小。

4.保持您的线长约45-90个字符。

5.使用模块。

6.要特别注意正确的标点符号。

1.首先为正文选择字体


始终首先为正文选择字体。它将影响任何其他字体的决定,如标题。您的正文文本的外观和感觉将对您的设计的印刷质量产生最大的影响。


有四种主要类型的字体可供选择:衬线字体,无衬线字体,手写体和花式字体。为了更好地阅读产品设计,最好简单地在正文上使用serif或sans-serif字体; 谨慎使用花式或手写字体,例如标题和短文。


大多数传统出版物如书籍,报纸和杂志都使用衬线字体作为正文。无衬线字体是缺乏衬线细节的字体。它们通常看起来比衬线更现代。Sans-serifs曾经是网页设计的首选,因为它们在低分辨率屏幕上呈现得更好。今天,屏幕具有更高的分辨率,衬线字体看起来同样好。

选择行程对比度低的字体


笔画对比度是字体中笔画宽度的变化。像Didot这样的一些字体具有更高的对比度,这意味着字母的某些部分的宽度比其他字体宽。具有较高笔划对比度的字体可以很好地用于标题,但通常不适用于较小的正文文本,其中细线消失并且文本不可读。对于正文,请使用宽度更一致的字体 - 低笔画对比度。

选择具有平衡X高度的字体。

X高度由字母X的高度决定,通常用于指代小写字符的高度。您希望您的正文文本使用具有平衡X高度的字体在屏幕上清晰可辨。如果X高度太低,则大写字母看起来太大。如果它太高,那么你将无法区分大写和小写。

2.避免使用两种以上的字体


既然您已经为你的正文选择了一款单一的字体,那么你已经准备好了所有的创意并将它与不同的字体结合起来,对吗?下面这是我的建议。


玩风格


现代网络字体通常具有许多不同的样式,这意味着它们具有不同的重量,或者甚至可能具有用于主体和显示副本的独特样式。一个很好的例子是Apple的 San Francisco。具有更大范围的样式和权重的字体可以帮助您以恰当的方式区分特殊上下文中的文本,它们还可以帮助您平衡文本不同大小的颜色(感知强度)(例如,正常体重设置的正文和重量较轻的标题)。


混合同一个超级字族。


哦,你还想结合字体吗?幸运的是一些字型的家庭有serif和sans-serif面孔。因此它们的设计可以很好地结合在一起,当你混合它们时,它们最终看起来很奇怪的可能性很小。这里有些推荐:


Source Serif Pro和Source Sans Pro(免费!

PT Serif和PT Sans(也免费!

Droid Serif和Droid Sans(OMG,免费!


如果你决定组合不同的字体,那么你可以考虑通过相似性或对比度将它们配对。当x高度,对比度,宽度或情绪之间存在明显的关系时,配对往往效果最佳。我建议不要混合两种以上的字体,除非你真的有信心。最后,相信你的直觉并打破规则。


3.平衡行间距和字体大小


影响产品可读性的主要因素是字体大小和行间距之间的良好平衡。行间距是行之间的垂直距离。从正文文本的字体开始。对于屏幕设计,合理的尺寸将在14到25像素之间,具体取决于您选择的字体。行间距将相对于您的正文文本大小。通常,最佳行间距在字体大小的120-155%之间。




4.保持线长约45-90个字符


行长度是文本块的水平距离。线长可能是网络上最常见的设计问题之一。良好的线长应在45到90个字符之间,包括空格。较短的线条会使设计的易读性产生很大的差异,因为它们比较长的线更舒适。随着线条长度的增加,人们的眼睛必须从一条线的末端进一步移动到下一条线的开始,这使得跟踪它们的进展变得更加困难并且可能会疲劳(尽管它可以促进颈部锻炼)。


“66个字符线被广泛认为是理想的。对于多列工作,更好的平均值是40到50个字符。“

5.使用模块


好的,你选择了一个漂亮的字体,并努力使你的文字更容易阅读。现在您可能想知道您应该设置的字型的大小。嗯,模块化比例是确定您的印刷尺寸甚至整个布局比例的最佳方式。


模块化比例是一系列值,可用于以和谐的方式确定文本样式的大小。应用它可能令人生畏,但它非常简单。你首先选择一个比例,例如,黄金均值1:1.618。然后选择文本的基本大小,例如16px。之后,您乘以值得到的序列为:16px,26px,42px,68px,110px。

6.正确的使用标点符号

这部分听起来更像是语法而不是排版,但除非你想被视为业余爱好者,否则你需要知道如何以及何时正确地使用撇号和破折号 。

智能引号和撇号

智能引号和撇号是弯曲的 - 它们具有“6”或“9”的形状。这些不要与直引号相混淆,它们看起来是垂直的,通常位于键盘上的返回键旁边。

连字符和破折号

不要混淆连字符和破折号。它们看起来很相似,但它们不一样。


Hyphen,是这些字符中最小的一个。他们习惯于将断行的单词组合成一个单词。


En dash,比连字符宽,比短划线更窄。它用于日期或数字以显示一系列值。例如1981-2017,Aisles C-F,或第12-69页


Em dash,是这些标记中最大的。他们习惯于在句子中停顿并引起人们的注意 。它们可以替换逗号,括号或冒号。


希望本指南将帮助您提高设计的质量。


所有内容版权归Pablo Stanley所有

未经许可,不得商业用途

©2019 Pablo Stanley


Pablo Stanley

——

InVision的设计师

Carbon Health联合创始人

作家

本文未经允许