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

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

字母间距是指在字母之间添加和删除空格,有些人把它和字距化混淆了,但这两者是不同的;字母间距影响整个文本行,而字距调整两个单独字母之间的空间在同一时间。字距最好留给类型设计者,除此之外,不像字母间距,目前在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%

最后提示

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/227659.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年2月23日 09:39
下一篇 2023年2月23日 09:39

相关推荐

  • 网站设计开发的基本技巧

    网站设计,如今应用越来越广泛,我们身边的各行各业都有与之相关的网站。网站设计也变成一个比较热门的行业。那么,网站设计开发过程中怎样才能给浏览者一个好的印象,得到好的网站流量,从而推动公司和企业的销售…

    2019年11月12日
    0305
  • 分享告诉大家网站设计一般会选择哪些不同的颜色。

    为了了解您应该为您的网站使用什么颜色,您需要了解颜色如何影响人类行为。虽然有些人怀疑颜色对人类行为的有实际的影响,但有研究表明,客户只需要90秒就对产品做出决定,而决定仅因为产品的颜色。基于此,我们得…

    2023年6月15日
    014
  • 小编教你杭州网站设计的时候需要关注细节问题。

      设计网站时,许多人对设计方面的关注并不多。 最后,所建网站的详细信息存在很多问题,未能达到预期的效果。 让我们看一下杭州网站设计时需要注意哪些问题。  首先,请记住添加META标签  这是因为许多搜索引擎现…

    2023年6月11日
    00
  • 网站设计,如何快速制作网站

    网站设计,无论是个人还是企业都离不开互联网,很多传统企业也不得不由被动地选择互联网到主动拥抱互联网。确实,互联网为企业带来了更大的机遇与挑战,早些时期很多企业借助互联网开拓疆土,以最低成本进行品牌文…

    2019年10月23日
    0255
  • 网站设计中的色彩使用技巧。

    色彩是任何网站设计的关键部分,但它很容易失控。看似无限的色调和色度,来自不同颜色空间的可变性,以及各种挑选和取样颜色的方法,很容易让网站设计师得到几十种不一致使用的颜色值。通过定义一个颜色网站,您可…

    2023年2月19日
    06
  • 我来分享如何为公司建网站。

    1. 确定网站目标和需求,2. 选择合适的域名和主机,3. 设计网站结构和布局,4. 开发网站功能和内容,5. 测试和优化网站性能,6. 上线并持续维护更新 (图片来源网络,侵删) 在当今的数字化时代,拥有一个专业的公…

    2024年6月30日
    00
  • 教你改善网站设计的5种最佳方法。

    设计是访问者在浏览你的网站时看到的第一件事,根据斯坦福大学专家的最新研究,46%的用户基于设计来评估网站的可信度。如果他们不喜欢这个设计,那么这个企业似乎就不可靠了。 即使你对你的网站的现有设计感到满意…

    2023年6月13日
    01
  • 我来分享卡片式网站设计的优势是什么。

    现在,网页制作的布局方式都是比较常规的,在设计页面的时候,添加些许创意,可以提升网站的效果,同时也可以提升用户的体验。我们应该在传统的布局方式进行创新,在满足用户需求的同时,布局页面的时候可以进行创…

    2023年6月15日
    06

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息