维亿CMS资源网,免费分享和下载
当前位置: 首页 > SEO知识 > 英文站字母的网站设计间距指南

英文站字母的网站设计间距指南

匿名站长 SEO知识
扫码手机访问

我们消耗的大部分信息都是通过阅读获得的,所以在网站设计时要注意文字是很有意义的。设计排版有很多方面,但帮助提高网站设计质量的条件之一就是字母间距。

字母间距是指在字母之间添加和删除空格,有些人把它和字距化混淆了,但这两者是不同的;字母间距影响整个文本行,而字距调整两个单独字母之间的空间在同一时间。字距最好留给类型设计者,除此之外,不像字母间距,目前在CSS中没有控制字距的方法。

相信实践和大量观察会改变您在工作中对待字母间隔的方式。

1、字母间距的目的

字母间距的主要目的是提高文本的易读性和可读性,单词的作用取决于它们的大小、颜色和它们所在的背景。通过根据工作环境调整字母间距,可以帮助读者更快、更有效地吸收信息。有趣的是,他们甚至不会注意到这就是这份工作的全部意义。

英文站字母的网站设计间距指南(图1)

记住,排印师考虑字母间距和字距调整在设计字体。这意味着您不必把它应用到所有的文本中,但为了在必要的时候有一个理解,您应该知道一些基本的原则,并使用好的字体。

2、字母间距如何影响易读性和可读性

文本的易读性取决于行高、段落长度、字体大小、字体选择、字母间距等等。关于字母间距,如果您刚刚进入排版,您能做的最好的事情就是不要过度使用它。意思是不要让字母之间的距离太大或太小;即使您认为它看起来不错,人们读起来也会很费劲,这将破坏他们的体验。

英文站字母的网站设计间距指南(图2)

3、字母间距大写字母

大写字母的设计意图是出现在句子或专有名词的开头,与小写字母结合。当大写字母相邻时,它们之间的空间就会太紧。因此,为了达到更好的可读性,需要增加空间。这适用于大字体和小字体。

英文站字母的网站设计间距指南(图3)

4、字母间距标题

如果您使用的字体设计得很好,您可以确保它们校准得很好,而且您不需要对它们做任何大的调整。然而,标题的问题是,在更大的比例下,字母之间的空间看起来不平衡。可以通过增加或减少字母间距值来修复。

对于字母间距并没有严格的规定——字体有很多,而且所有的字体都需要单独的处理方法——但是如果您看看像谷歌和Apple这样的大公司是如何处理他们的字体的,您会发现很多有价值的信息。

英文站字母的网站设计间距指南(图4)

英文站字母的网站设计间距指南(图5)

让我们来看看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%

如果您碰巧设计了很多应用程序,或者您打算这么做,有一件事对我个人很有帮助,那就是使用默认的材质设计和苹果的字体指南。它们平衡得很好,节省了很多时间。

5、字母间距正文

如果您读过任何有关字母间距的文章,您可能已经从印刷术家Frederic Goudy那里看到了这种流行的智慧:"任何用小写字母隔开字母的人都会偷羊"。(有一种说法是他仅指的是Blackletter字体。)一些设计师将其作为硬性规定,现在从不调整小写字母的字母间距。

根据实践和看到的设计师的作品,个人不同意Goudy的观点,因为有时小的变化可以使您的文本表现出很大的不同。让我们以压缩字体为例。字体太小时,字母靠得太近,导致可读性差。通过将字母间距增加1.5%,您将看到文本现在更容易阅读。

英文站字母的网站设计间距指南(图6)

如果我们看一下前面的例子,在"Roboto"和"San Francisco"字体的指导原则中,字母间距被应用于正文;尽管旧金山有专门的"SF Pro显示"标题和"SF Pro文本"正文文本,字母间距仍然用来完善它们。

有很多不同的字体,一个规则不能适用于所有的字体。尝试一下字母间距,然后做您认为正确的事情。这里有一些简单的指导方针,可以引导您进入正确的方向,特别是在使用正文时:

6、记住线的高度

如果您的行距大于120%,极有可能负行距会导致段落不平衡。要精炼它,您需要保持它为0%或者只稍微增加它。

7、深色背景上的浅色文字

在深色背景下,白色的文字看起来曝光过度,因此字母显得太紧。为了使它更清晰,建议您增加一点字母间距。

英文站字母的网站设计间距指南(图7)

英文站字母的网站设计间距指南(图8)

8、正文文本的一般值

您可以使用以下指南为正文,已经测试了几种字体:

主体1-16像素-0.5%

正文2-14像素-0.25%

9、字母间距字幕

与标题和正文不同,较小的字体在字母间距上没有太多变化。通常情况下,当字体小于13px时,会增加字母之间的空间以使其更清晰。但也有例外("SF Pro Text"指南建议,只有当字体大小在11px或以下时,才使用正间距)。一定要对设置进行试验。

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

标题-12px-0.5%

上划线-10px-1.5%

最后提示

帮助提高预算技能的一件事是寻找其他设计师,尤其是字体代工厂。通过解码他们的作品,您可能会注意到他们对待字体的一些细微差异,这将对您将来的网站设计项目有所帮助。

标签:

英文

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail: 123456@qq.com

同类推荐