css字间距(css字体左右移动)

我们消费的大部分信息都是通过阅读来实现的，所以在设计的时候关注文字是有意义的。排版有很多方面，但有一点有助于提高设计质量的是字母间距。

字母间距就是在字母之间加减空方块。有人把它和字距调整混为一谈，但两者是不同的。字母间距会影响整个文本行，而字距调整会同时调整两个字母之间的间距。字距调整最好留给字体设计者去做。况且和字母间距不一样，目前没有办法控制CSS字距调整。

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

字母间距的目的

字母间距的主要目的是提高文字的可读性和可读性。单词的行为因其大小、颜色和背景而异。根据您使用的环境调整字母间距将有助于读者更快、更有效地使用您的信息。有趣的是，他们甚至不会注意到这一点——这就是这项工作的意义所在。

记住，排版人员在设计字体时会考虑字母间距和字间距调整。这意味着你不必将它应用于所有的文本，但为了在必要时理解它，你应该知道一些基本的原则，并使用良好的字体。

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

文本的可读性取决于行高、段落长度、字体大小、字体选择、字母间距等。关于字母间距，如果你只想排版，那么最好的办法就是不要过度使用。我的意思是不要让字母之间的距离太大或太小。即使你认为它看起来很好，人们也会很难阅读它，这会毁了他们的体验。

字母间距大写字母

大写字母与小写字母一起出现在句子或专有名词的开头。当大写字母彼此相邻时，它们之间的间隔太紧。所以为了获得更好的可读性，需要增加空房间的数量。这适用于大字体和小字体。

字母间距标题

如果您使用设计良好的字体，您可以确保它们得到正确校准，并且没有必要对它们进行任何重大调整。但是题目的问题是，在大尺度上，字母之间的空看起来不平衡。您可以通过增加或减少字母间距值来修复它。

没有严格的字母间距规则——字体有很多种，而且都需要使用单独的方法——但是如果你看看谷歌、苹果这样的大公司是如何对待他们的字体的，你可以在里面找到很多有价值的信息。

我们来看看“Roboto”和“San Francisco”字体(第一种用于材质设计，第二种用于苹果生态系统)。20到48像素的标题具有正的字母间距值，或者没有。如果字体很大，字母间距会变成负数。这些精确的数字对于其他字体来说效果不好，但是在尝试了不同的方法之后，我可以说这是一种常见的模式。

我测试了几个字母间距指南，而Bazen Agency发布的指南适用于许多流行的字体。这对你来说是一个很好的起点，但你可以随时进行其他调整:

H1-96像素--1.5％H2-60像素--0.5％H3 — 48px — 0％H4 — 34px — 0.25％H5 — 24px — 0％H6 — 20px — 0.15％字幕-16像素-0.15％

如果你碰巧设计了很多应用或者打算这么做，那么有一点可以帮助我，那就是使用默认的材质设计和苹果字体作为他们的字体。它们平衡得很好，可以节省很多时间。

字母间距的正文

如果你读过任何关于字母间距的文章，你可能看到过这个来自印刷商Frederic Goudy的流行观点:“任何用小写字母分隔字母的人都会偷羊”。有一种说法，他指的只是黑体字。)有些设计师把它定为硬性规定，现在从来不调整小写字母的字母间距。

根据我的实践和看设计师的作品，我并不认同Goudy，因为有时候微小的改动会对文字的表现产生很大的影响。我们以压缩字体为例。字母过小，则间距过近，可读性差。通过增加1.5%的字母间距，你会看到文本现在更容易阅读。

如果我们看看我之前的例子，在“Roboto”和“San Francisco”字体的指南中，对文本使用字母间距；即使旧金山在标题上有专门的“SF Pro Display”和在正文中有“SF Pro Text”，但仍然使用字母间距来改善标题。

有许多不同的字体，一个规则并不适用于所有字体。使用字母间距，做适合你的事情。有一些简单的准则可以引导你朝着正确的方向前进，尤其是在处理文本的时候:

注意身高

如果行高大于120%，负的字母间距最有可能导致段落外观不平衡。为了优化它，你需要保持它在0%或者只是稍微增加它。

在深色背景上的浅色文字

在深色背景下，白色文字看起来曝光过度，所以字母太紧。为了更清楚，我建议你稍微增加字母间距。

正文的通用值

您可以对通过各种字体测试的以下正文文本使用以下准则:

主体1-16像素-0.5％正文2-14像素-0.25％

字母间距字幕

与标题和文字不同，较小的字体在字母间距上变化不大。当字体小于13px时，增加字母之间的间距以使其清晰是一种常见的做法。但是总会有例外(“SF Pro Text”指南建议只有当字体大小为11px或更小时才使用正字母间距)。请确保您尝试设置。

您可以使用以下值作为起点，然后编辑它们以适合所选字体:

标题-12像素-0.5％上划线-10像素-1.5％最后提示

帮助我提高排版技巧的一件事就是找其他设计师，尤其是字体代工厂。通过解码他们的作品，你可能会注意到他们对待字体的一些细微差别，这对你以后的项目会有帮助。

想学习提高设计，可以来aaa教育了解一下。

相关建议:

如何设计更高级？

设计细节，糟糕的视觉设计

设计师如何设计出完美的卡片？

设计画面不平衡，如何处理？

什么是设计语言？以及如何建造它。