八种简单的快速改进网站排版的方法

佚名 2022-08-10 00:25

排版是任何网站最重要的元素之一,对品牌和体验影响很大。

所以基本上,大规模改变你的排版——选择新字体,改变测量,增加领先地位——它很复杂,充满了潜在的时间消耗。

但是,你可以简单地改变排版,它不会破坏你的网格,而且可以 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。您可以通过增加度量来最大限度地减少这个问题。

下一篇: 如何控制网站建设的周期?
上一篇: 影响网站收录的重要因素有哪些?
相关文章
返回顶部小火箭