设计er的字母间距指南

Denis valetin. 经过 Denis valetin.  |  7月20日,2020年

我们消耗的大多数信息通过读数发生,因此在设计时要注意单词会很有意义。排版有很多方面,而是有助于提高设计质量的东西是字母间距。

字母间距是关于在字母之间添加和删除空间。有些人将它与kerning混淆,但这两个是不同的;字母间隔会影响整个文本线,而Cherning在当时调整两个单独的字母之间的空间。 Kerning最好留给型设计师,除此之外,与字母间距不同,目前没有办法控制CSS中的Kerning。

我相信练习和大量观察将改变你在工作中对待信函的方式。

 

字母间距的目的

字母间距的主要目的是提高文本的易读性和可读性。单词根据其尺寸,颜色和它们所在的背景而不同地行动。通过将字母间距调整到您正在使用的环境,您将帮助读者更快地消耗信息,更高效地消耗您的信息。有趣的部分是他们甚至不会注意到它 - 这是工作的整个点。

牢记印刷师的想法 字母间距和kerning 在设计字体时。这意味着您不必将其应用于您的所有文本,而是为了在有必要时进行理解,您应该了解一些基本原则,并使用良好的字体。

 

字母间隔如何影响易读性和可读性

文本的易读性和可读性依赖于线路高度,段落长度,字体大小,字体选择,字母间距等等的东西。关于字母间距,如果你只是进入排版,你能做的最好的事情就不会过度使用它。我的意思是,这根本就是不要让字母之间的距离太大或太小;即使你认为它看起来很好,人们也会努力阅读它,这将毁了他们的经历。

 

字母间距大写字母

大写字母旨在旨在打算出现在句子或专有名词的开头,与小写字母组合。当大写字母相互彼此时,它们之间的空间太紧。因此,为了实现更好的可读性,需要增加空间。这适用于大型和小字体大小。

 

字母间距标题

如果您使用精心设计的字体,您可以确定它们被校准良好,并且您无需对其进行任何重大调整。但是,头条新闻的问题在于,在更大的尺度上,字母之间的空间看起来不平衡。它可以通过增加或减少字母间距值来固定。

字母间距没有严格的规则 - 有很多字体,所有的字体都需要一个单独的方法 - 但如果你看看像谷歌和苹果这样的大公司如何对待他们的字体,你可以在那里找到很多有价值的信息。

让我们来看看“Roboto”和“San Francisco”字体(第一个用于材料设计和苹果生态系统中的第二个)。来自20到48像素的头条新闻具有正字母间距或无。如果字体大小更大,则字母间距变为负。这些确切的数字不会为其他字体工作,但在尝试不同的方法之后,我可以说明它是一种常见的模式。

我已经测试了几个字母间距和发表的指导方针 Bazen Agency. 适用于很多流行的字体。这将是您的一个很好的起点,但您始终可以应用额外的调整:

  • H1 - 96px - -1.5%
  • H2 - 60px - -0.5%
  • H3 - 48px - 0%
  • H4 - 34px - 0.25%
  • H5 - 24px - 0%
  • H6 - 20px - 0.15%
  • 字幕 - 16px - 0.15%

如果您碰巧设计了许多应用程序或打算这样做,那么有一件事可以帮助我使用默认值 材料设计苹果 他们的字体指南。它们平衡良好,它节省了很多时间。

 

字母间距正文文本

如果您曾读过关于信函间距的任何内容,您可能已经看到了来自Typographer Frederic Gody的这种流行的智慧:“任何人都将窃取羊的人。 (有一个 争论 他只是指的是Blackletter字体。)一些设计师将其作为一个硬规则,现在永远不会调整小写文本的字母间距。

根据我的练习和通过观察设计师的工作,我不能同意GOUDY,因为有时的变化可以对文本的表现有很大的影响。让我们采取,例如,浓缩的字体。小尺寸,这些字母彼此太近,这导致易读差。通过增加字母间距,1.5%您将看到文本现在更容易阅读。

如果我们查看我的前一个示例,在“Roboto”和“San Francisco”字体的指导方针中,字母间距应用于身体文本;尽管San Francisco为身体文本的标题和“SF Pro Text”具有专用的“SF Pro显示”,但字母间距仍然用于改进它们。

有很多不同的字体,并且单个规则不适用于所有规则。实验与字母间距,做你似乎有权。有一些简单的指导方针将在正确的方向导致您,特别是在使用身体文本时:

牢记线路高度

如果您的线路高于120%,则最有可能的负字母间距将导致对段落的不平衡外观。为了改进它,您需要将其保持在0%或仅略微增加它。

在黑暗的背景的淡文本

在黑暗的背景下,白色文本看起来过度曝光,因此字母出现得太紧了。为了使它更清晰,我会建议你越来越少量的信。

身体文本的一般值

您可以使用以下几种字体测试以下对正文的主题指南使用以下内容:

  • 身体1 - 16px - 0.5%
  • 身体2 - 14px - 0.25%

 

字母间距标题

与头条和身体文本不同,较小的字体大小没有字母间距的变化。当字体大小低于13px时,这是一个常见的做法,以增加字母之间的空间,以使其清晰。但总有例外(“SF Pro Text”指南建议仅在字体大小为11px或下面时使用正字距。确保您尝试设置。

您可以使用以下值作为起点,然后将它们编辑到您选择的字体似乎是正确的:

  • 标题 - 12px - 0.5%
  • 含量 - 10px - 1.5%

 

最后的提示

帮助我提高了排版中技能的事情之一是看其他设计师,特别是铸造型。通过解码他们的工作,您可能会注意到他们如何对待排版的一些细微差别,它将帮助您在未来的项目中。