改善网站排版的8 种简单方法

点金设计
点金设计 设计文章 234次浏览
7分钟阅读

排版是任何网站最重要的元素之一,对品牌和体验有着巨大的影响。如果对您的排版进行全面的改变——选择一种新字体、改变尺寸、增加行距——是复杂的,而且充满了潜在的时间浪费。但是,您可以对排版进行一些简单的更改,这些更改不会破坏您的网格,并且可以较短的时间内完成。这里有8个最简单方法。

1 . 增加颜色对比度

在布置文本时,设计师通常将文本视为视觉设计中的一个块。设计师与文本的关系与用户的非常不同;设计师将文本定位为形状,用户逐行阅读。因此,设计师往往会低估对比文本所需的数量。

浅灰色文本在美学上很漂亮,但在功能上毫无用处。文本旨在供阅读,需要在桌面上满足WCAG AA标准,在移动设备上满足WCAG AAA标准——或者在任何有许多环境光源的情况下。文字越大,您的回旋余地就越大。

应对文本进行彻底的对比度测试,但作为起点,白色背景上的18像素文本绝不能比 # 595959亮。

2 . 收紧标题间距

绝大多数字体都是为用作正文而设计的——大块的连续文本,多行。制作字体时,它是为这种用途而留出空间的。

与运行文本不同,标题往往很短并且被更多的空白包围——尤其是上方和下方。额外的空白在视觉上淹没了单词形状中的负空间并迫使字母分开。

作为补偿,将标题的字母间距和单词间距缩小1  –  5 %。

3 . 放宽非单词间距

当我们阅读时,我们的大脑不会一个字母一个字母地拼出单词;它可以识别单词形状甚至单词组的形状。

大多数微型排版都关心不破坏这些字形。但是,有时您确实希望阻止单词的形成并允许使用单个字符。

放宽任何旨在作为一系列字符读取的文本的字母间距,例如序列号、跟踪代码和表格数据。

4 . 使用系统字体输入

隐私对用户来说是个大问题。作为设计师,您可以采取任何措施来向用户保证他们的数据是安全的,这将增加您网站的积极用户体验

设计您的HTML输入以使用系统字体——您的用户访问网站所使用的操作系统设置的默认字体。这在品牌字体中的品牌数据和用户字体中的用户数据之间创建了清晰的界限。

以这种方式使用系统字体可以鼓励用户感受到他们数据的所有权、建立信任并增加转化率。

5 . 只标记段落一次

文本段落需要一个视觉指示,表明它们已经开始。通常有三种表达方式:在标题之后,在段落之前有一个垂直空间,或者缩进第一行。

每个段落都应该使用这些指标之一,并且只使用一个。由于 Web 内容的性质和标题对快速扫描阅读内容的好处,对于大多数网站来说,最好的选择是遵循标题和垂直间距的组合。

6 . 使用真正的风格

由于各种原因,从字体的可用性到积极的优化,网站使用CSS伪造替代样式是很常见的。斜体可以伪装成倾斜的斜体,粗体字可以通过使用浏览器的默认设置来伪造,小型大写字母可以通过将文本设置为大写并减小字体大小来伪造。

这些技巧弊大于利,会造成扭曲的字形,打断文本的自然流动。

如果您无法部署真正的斜体、粗体和小型大写字母,则不要伪造它们。寻找其他强调重点的方法,例如改变颜色。

7 . 使用正确的引号

撇号、单引号和双引号是特定字符。大多数字体都为它们提供了一个与键盘上的快速单引号或双引号键不同的字形。

这些引号通常被称为聪明”的引号是因为文字处理应用程序通常可以选择聪明”地了解他们使用的字形。

使用正确的引号是提供精炼文本的最简单方法之一。

8 . 正确连接文本

断字是将一个单词分成两行。它允许不那么极端的右对齐文本,这在可用页面宽度与桌面相比相对较小的移动设备上至关重要。

Web 对正确断字的支持出奇地差,但它正在逐渐改进,并且可以作为渐进增强来应用。

CSS允许您将连字符设置为无(无连字符)、自动(浏览器自动插入)和手动(您可以在其中使用软连字符指定连字符应出现的位置)。

在排版上,可以在任何五个字符或更长的单词中插入连字符;连字符之前必须至少有两个字符,连字符之后必须至少有三个字符。

你永远不应该用连字符连接三行连续的文本,但解决这个问题需要 JavaScript。您可以通过增加测量值来最大程度地减少此问题。

标签:
分享该文
发表评论