排版层级:建立有纪律的比例
现代界面的排版往往因为尺寸混乱而显得无序——字体大小的随意变化反映出缺乏系统化的设计思维。在没有严格执行的设计框架下,界面可能会随意使用从 10px 到 24px 的各种像素值,导致视觉层级的混乱。
这种无序的排版通过两种方式削弱了设计的效果:
-
它带来了不和谐的视觉效果,微妙地影响了对设计质量和意图的感知。
-
它增加了设计过程的认知负担,使设计师在微小的尺寸选择上浪费时间。
那么,如何创建一个既能提升视觉和谐,又能加快设计流程的排版框架呢?
尺寸编排
就像空间系统一样,排版层级并不是线性发展的。在较小的尺寸范围内,比如 12px 和 14px,微小的变化会对可读性产生重大影响。而在更大的尺寸范围内,比如 46px 和 48px,差异则不明显,反而浪费了认知资源。
数学和谐
一种方法是从音乐理论或自然现象中借用数学比例,比如 4:5(大三度)、2:3(完全五度)或著名的“黄金比例”1:1.618。这种被称为“模数比例”的方法,在连续的排版尺寸之间建立数学关系。
实现这一方法的起点是一个基础值——通常是现代浏览器默认的 16px。这个基础值通过选定的比例生成一系列尺寸:
尽管这种方法在理论上很有吸引力,但实际应用中也存在一些限制需要考虑。
1. 亚像素渲染难题
采用 4:5 比例的 16px 基础值会产生非整数尺寸,如 31.25px、39.063px、48.828px 等。这些精确的数学值与显示技术的实际情况不符,因为不同浏览器的亚像素渲染算法不同,导致跨平台的视觉不一致。一个谨慎的做法是使用整数尺寸,以确保在不同数字环境中的一致性。
如果选择这种数学方法,手动四舍五入计算值是必要的,以避免浏览器间的细微差异。