排版是任何网站最重要的元素之一,对品牌和体验有着巨大的影响。
所以根本的是,对你的排版进行大规模的改变——选择一种新字体、改变度量、增加领先——是复杂的,而且充满了潜在的时间消耗。
但是,您可以对排版进行一些简单的更改,这些更改不会破坏您的网格,并且可以在 30 分钟或更短的时间内完成。这里有八个最简单的。
1. 增加色彩对比度
在布置文本时,设计人员通常将文本视为视觉设计中的一个块。设计者与文本的关系与用户的关系大不相同;设计师将文本定位为一个形状,用户逐行阅读。因此,设计师往往会低估对比文本所需的数量。
浅灰色文本在美学上很漂亮,但在功能上毫无用处。文本是用来阅读的,需要满足桌面上的 WCAG AA 标准和移动设备上的 WCAG AAA 标准——或者在有许多环境光源的任何情况下。文本越大,您拥有的余地就越大。
应彻底测试文本的对比度,但作为起点,白色背景上的 18 像素文本永远不应比 #595959 亮。
2. 收紧航向间距
绝大多数字体被设计用作正文——大块的运行文本,多行长。制作字体时,它被间隔用于此用途。
与运行文本不同,标题往往很短,并且被更多的空白包围——尤其是上方和下方。额外的空白在视觉上淹没了单词形状中的负空间并迫使字母分开。
作为补偿,将标题的字母间距和字间距缩小 1-5%。
3. 放宽非字间距
当我们阅读时,我们的大脑不会一个字母一个字母地拼出单词;它可以识别单词形状甚至单词组的形状。
大多数微排版都关注不破坏这些字形。但是,有时您确实希望防止形成单词并允许使用单个字符。
松开任何旨在作为一系列字符读取的文本上的字母间距,例如序列号、跟踪代码和表格数据。
4. 使用系统字体进行输入
隐私对用户来说是一个大问题。作为设计师,您可以做的任何事情来向用户保证他们的数据是安全的,都会增加您网站的积极用户体验。
为您的 HTML 输入设置样式以使用系统字体 — 您的用户访问站点时使用的操作系统设置的默认字体。这在品牌字体中的品牌数据和用户字体中的用户数据之间创建了清晰的界限。
以这种方式使用系统字体可以鼓励用户感受到对其数据的所有权,建立信任并增加转化率。
5. 标记段落一次
文本段落需要一个视觉指示,表明它们已经开始。通常可以通过三种方式传达这一点:跟随标题、在段落之前留出垂直空间或缩进第一行。
每个段落都应使用这些指标之一,并且仅使用一个。由于 Web 内容的性质以及标题对于快速浏览内容的好处,对于大多数网站,最佳选择是跟随标题和垂直间距的组合。
6. 使用真正的样式
由于各种原因,从字体的可用性到积极的优化,站点使用 CSS 伪造替代样式是很常见的。斜体可以伪造为倾斜的斜体,粗体可以通过使用浏览器的默认值来伪造,小写字母可以通过将文本设置为大写并减小字体大小来伪造。
这些技巧弊大于利,会造成扭曲的字形,中断文本的自然流动。
如果您无法部署真正的斜体、粗体和小型大写字母,请不要伪造它们。寻找创建重点的替代方法,例如改变颜色。
7.使用正确的报价
撇号、单引号和双引号是特定字符。大多数字体为它们提供了一个不同于键盘上快速单引号或双引号键的字形。
这些引号最常被称为“智能”引号,因为文字处理应用程序通常可以选择“智能”使用哪些字形。
使用正确的引语是提供精炼文本的最简单方法之一。
8. 正确连接文本
断字是将一个英文单词分成两行。它允许不太极端的不规则文本,并且在可用页面宽度与桌面相比相对较小的移动设备上至关重要。
Web 对正确断字的支持出奇地差,但它正在逐渐改进,并且可以作为渐进增强应用。
CSS 允许您将连字符设置为 none(无连字符)、auto(浏览器自动插入)和 manual(其中您使用软连字符指定连字符应出现的位置)。
在排版上,连字符可以插入任何五个字符或更长的单词中;连字符前必须至少有两个字符,连字符后必须至少有三个字符。
您永远不应该将三行连续的文本连字符,但解决这个问题需要 JavaScript。您可以通过增加度量来最大程度地减少此问题。