The Art of Whitespace in Web Design

留白的艺术

The most common mistake non-designers make when they look at a polished interface is to see the elements and not the space between them. They see the headline, the button, the product image. They do not see the 32 pixels of vertical breathing room between the headline and the paragraph, the 80 pixels of margin between the hero and the next section, the deliberate emptiness inside a card. That emptiness is not wasted space. It is structure. It is hierarchy. It is the quiet, confident voice that says: "look here first, then here, then here". Web design forgot this when it left print; it has spent the last two decades slowly remembering.

非设计师看到精致的界面时，最常见的错误是只看到元素，看不到元素之间的空隙。他们看到标题、按钮、产品图。他们看不到标题和段落之间那 32 像素的纵向呼吸，看不到 hero 区与下一段之间那 80 像素的留白，也看不到卡片内部刻意的空白。这些空白不是浪费。它们是结构、是层级、是那种安静而自信的声音："先看这里，再看这里，再看这里"。Web 设计在脱离印刷之后就忘了这一点，过去二十年才慢慢重新记起来。

The Gestalt principles every designer should know

每个设计师都该懂的格式塔原则

Gestalt psychology, a German school of perception from the early 20th century, gave designers a vocabulary for what the eye does before the mind arrives. The brain groups visual elements according to a small set of reliable rules:

格式塔心理学是 20 世纪初的德国知觉心理学派，它为设计师提供了一套词汇，去描述"在意识抵达之前"眼睛在做的事情。大脑会按照一组稳定的小规则对视觉元素进行分组：

• Proximity — things close together are perceived as a group. Increase the gap and the group dissolves, even if the elements are identical.
• 接近性 —— 距离相近的元素被感知为同一组。把间距拉开，组就会解散，即便元素完全一样。
• Similarity — things that look alike are perceived as related. Same shape, color, or size signals a connection.
• 相似性 —— 看起来相似的元素被视为相关。相同的形状、颜色或尺寸会暗示联系。
• Common region — things inside the same bordered or backgrounded area are perceived as a unit. A card is a common region.
• 共同区域 —— 处在同一带边框或同一背景区域内的元素被视为一体。一张卡片就是一个共同区域。
• Continuity — the eye follows lines, curves, and alignments. A well-aligned column reads as a path.
• 连续性 —— 眼睛会沿直线、曲线和对齐方向走。一列排得整齐的文本会被读作一条路径。
• Closure — the brain completes incomplete shapes. A button with a 1-px dashed border still reads as a button.
• 闭合性 —— 大脑会补完不完整的形状。一个用 1 像素虚线描边的按钮，仍然被读作按钮。

Whitespace is the tool that activates proximity. When you add 24 pixels of space between a heading and a paragraph, you are not adding air for the sake of air; you are telling the eye "these are different units". When you put two buttons 8 pixels apart and a third button 32 pixels away, you are not being arbitrary; you are encoding a relationship: "the first two go together, the third is separate". Every spacing decision is a sentence in the visual grammar.

留白是激活"接近性"的工具。当你在标题和段落之间加上 24 像素的间距时，你不是在为了空气而加空气；你在告诉眼睛："它们是不同的单元"。当你把两个按钮放 8 像素、把第三个放 32 像素时，你也不是任意为之；你在编码一种关系："前两个是一组，第三个是另一组"。每一个间距决定，都是视觉语法里的一句话。

The four kinds of whitespace

四种留白

Designers and typographers have found it useful to split whitespace into four categories, each with a different job. Knowing which is which makes spacing decisions deliberate instead of accidental.

设计师和排印师发现，把留白分成四类很有帮助，每一类各自承担不同的工作。知道它们的差异，间距决定就会从随意变成刻意。

Micro whitespace is the space between letters (tracking), between lines (leading), and between words. It lives inside a paragraph. It is the typographer's territory: kerning pairs, hanging punctuation, the leading of a long-form essay. Get it wrong and the page becomes uncomfortable to read without the reader knowing why.

微观留白是字与字（字距 tracking）、行与行（行距 leading）、词与词之间的空间。它存在于段落内部，是排印师的领地：字偶距、悬挂标点、长文的行距。处理不好，页面读起来会让人不舒服，但读者说不出原因。

Macro whitespace is the space between paragraphs, between columns, between cards, between sections. It is the layout designer's territory: margins, gutters, the rhythm of a homepage. It is what makes an interface feel either "cramped" or "spacious" — and the difference is usually a handful of pixels applied consistently.

宏观留白是段落之间、列之间、卡片之间、章节之间的空间。它属于布局设计师：边距、栏间距、首页的节奏。它决定了一个界面感觉"局促"还是"通透" —— 而差别通常只是若干像素被一致地应用。

Active whitespace is space used intentionally to draw attention. A headline sitting alone in the middle of a hero, with 200 pixels of emptiness around it, is using whitespace as a design element. Apple has built an empire on this kind of whitespace — it carries the brand.

主动留白是被有意用来吸引注意力的空间。一个 hero 区域的标题，独自放在中央、四周留 200 像素空白，这就是把留白本身当作设计元素。苹果正是靠这种留白建立品牌。

Passive whitespace is the space that exists because it has to: the gap between a form label and its input, the margin between an icon and its text. It is not decorative, but ignoring it makes a UI feel careless. Passive whitespace is what most CSS resets get wrong by zeroing it out.

被动留白是"不得不存在"的空间：表单标签和输入框之间的空隙、图标和文字之间的间距。它不是装饰，但忽视它会让 UI 显得漫不经心。多数 CSS reset 把它们清零，往往就是错在这里。

The 8-point grid and the rhythm of layouts

八点网格与布局的节奏

The 8-point grid is the simplest idea in modern interface design and the one that pays off the most. Every dimension on a screen — margins, paddings, font sizes, line heights, even icon sizes — is a multiple of 8 (or, where finer adjustments are needed, 4 or 2). Eight pixels is small enough to be precise and large enough that the eye cannot see the difference between 16 and 17.

八点网格是现代界面设计里最简单的想法，也是回报最大的一个。屏幕上的每一个尺寸 —— 边距、内边距、字号、行高，甚至图标尺寸 —— 都是 8 的倍数（需要更细调整时用 4 或 2）。8 像素足够精细，眼睛又无法分辨 16 和 17 的差别。

The benefit is rhythm. When everything is on the same grid, the layout has a hum to it — columns align, baselines align, buttons align with text. Designers can make rapid decisions because there are only a few values to choose from (8, 16, 24, 32, 48, 64, 96). Engineers can translate design files to CSS without a hundred Slack messages. Front-end developers and designers stop arguing about whether something should be 17 or 18 pixels because 17 is not an option.

好处是节奏。当一切都落在同一网格上，布局就有了呼吸感 —— 列对齐、基线对齐、按钮对齐文字。设计师能快速决策，因为可选的值就那么几个（8、16、24、32、48、64、96）。工程师可以直接把设计稿翻译成 CSS，无需上百条 Slack 消息。前端和设计师不再为"应该是 17 还是 18 像素"争吵，因为 17 根本不在选项里。

The grid extends naturally into type. Body text is usually 16, line height 24 (a 1.5 ratio). Headings scale up the same scale: 24, 32, 48, 64. The result is that the rhythm of space and the rhythm of type reinforce each other. Material Design, Apple Human Interface Guidelines, and most modern design systems build on this idea; once you feel it, you cannot unsee it.

网格自然延伸到排版。正文通常 16 像素、行高 24（1.5 的比值）。标题按同一比例放大：24、32、48、64。结果是空间的节奏和文字的节奏相互强化。Material Design、Apple HIG，以及大多数现代设计系统都建立在这一基础之上；一旦体会到，你再也无法"看不见"它。

Line-height, letter-spacing, and the space between letters

行高、字距，以及字与字之间的空间

Line-height (CSS line-height) is the single most important typographic setting. For body text on the web, 1.4 to 1.6 of the font size is a safe range; 1.5 is the WCAG-cited sweet spot for accessibility. A line-height of 1.2 feels tight and is appropriate only for large display sizes. A line-height of 1.8 feels loose and is good for long-form reading on phones, where line length is short. Headings, which are large, want tighter leading — usually 1.1 to 1.3 — because the visual line is already tall and adding air feels excessive.

行高（CSS line-height）是排版里最重要的一个设置。Web 正文通常用字号 1.4 到 1.6 倍的行高；WCAG 建议的无障碍"甜点"是 1.5。1.2 倍的行高让人感觉局促，只适合大号展示字号；1.8 倍显得松弛，适合手机上的长文阅读（行短时尤其合适）。大号标题本身视觉行高就高，更紧的行距更合适 —— 通常 1.1 到 1.3 —— 因为再加空气会显得过度。

Letter-spacing (CSS letter-spacing) is subtler. Body text wants no adjustment; the typeface was designed with its own spacing. Headings in all-caps, however, almost always need positive tracking, because uppercase letters are designed to be tight when mixed with lowercase. The convention is +5% to +10% of the em size for small caps, scaling to slightly less for large display sizes. Tracking in one direction or the other is also a tone signal: a wide-tracked all-caps label feels formal and editorial; a tight-tracked bold headline feels urgent and contemporary.

字距（CSS letter-spacing）更微妙。正文无需调整；字体本身在设计时已经带了自己的间距。全大写的标题则几乎总要加正字距，因为大写字母设计时是与小写字母混排的，紧凑是默认状态。惯例是：小号大写加 +5% 到 +10% 的 em 单位字距，大号展示字号略小。字距的宽或窄也传递语气：宽字距的全大写标签显得正式、编辑感强；窄字距的粗体标题显得紧迫、当代。

There is a difference between "lots of space" and "structured space". Lots of space is a designer cranking up margin until things look airy. Structured space is a designer choosing 24 here, 32 there, 48 between sections, knowing that the eye will read those numbers as a hierarchy. The second is design; the first is decoration.

"很多空白"和"有结构的空白"是两件事。"很多空白"是设计师把边距调大，让东西看起来通透。"有结构的空白"是设计师在这里选 24、那里选 32、章节之间选 48，因为他知道眼睛会把这些数字读成层级。后者是设计，前者是装饰。

Before and after: what structured space looks like

前后对比：有结构的留白长什么样

A useful thought experiment: take a cluttered landing page — every section packed edge to edge, headings butting up against paragraphs, buttons squeezed between text blocks, all colors at full saturation. Now take Apple's product page for an iPhone. The page is mostly white. The product is centered, the headline is one line, the price is set far below, the buy button floats in a sea of nothing. There is no question which page communicates more confidence. The structured space on the Apple page is the brand.

一个有用的思想实验：拿一个拥挤的着陆页 —— 每段都贴边、标题紧挨段落、按钮挤在文字块之间、颜色全部高饱和度。再看苹果 iPhone 的产品页：整页几乎全白，产品居中，标题只有一行，价格放在很远的地方，购买按钮漂浮在一片空旷之上。哪一页传达了更多自信？答案毫无疑问。苹果页面上那些"有结构的留白"本身就是品牌。

The reason is not that the Apple page is "minimalist for its own sake". The reason is that every empty region forces the eye to the thing that is not empty. A product photograph in a sea of white reads as monumental; the same product in a busy grid of features reads as one option among many. Whitespace is a way of saying "this matters".

原因不是"苹果页面是为自己而极简"。原因是：每一处空旷都把视线推到不空的地方。一张在白色海洋里的产品照读起来像纪念碑；同一张产品放在琳琅的功能网格里，只是众多选项之一。留白是一种"这很重要"的表达方式。

The web, in its early days, forgot this. Print design — the magazines, books, and posters that trained the first generation of visual designers — understood that the page edge is as important as the content. Screens, with their cheap pixels and infinite scroll, tempted designers to fill them. The best modern UI design is a quiet return to print discipline, applied to a new medium with new constraints. The result feels modern precisely because it is old.

Web 早期忘记了这一点。印刷设计 —— 培养了第一代视觉设计师的杂志、书籍和海报 —— 明白页面边缘和内容同样重要。屏幕上的像素便宜，又可以无限滚动，引诱设计师去填满它们。最优秀的现代 UI 设计，其实是把印刷的纪律安静地带回了这个新介质、新约束。结果让人感觉"现代"，恰恰因为它其实是"老"的。

Try the tools

试试这些工具

Whitespace decisions start with color and contrast. Try the color picker to test palettes against the AA contrast threshold, or use the text case tool to preview how an all-caps heading will look with extra letter-spacing. Everything runs locally; no upload, no tracking.

留白的设计决策往往从颜色和对比度开始。用颜色选择器测试调色板是否达到 AA 对比度门槛；用文本大小写工具预览全大写标题加上额外字距的效果。所有处理都在本地完成，不上传、不追踪。