[{"data":1,"prerenderedAt":573},["ShallowReactive",2],{"post-\u002Fposts\u002F90a855a1":3,"post-nav-\u002Fposts\u002F90a855a1":544,"post-related-\u002Fposts\u002F90a855a1":554},{"id":4,"title":5,"abbrlink":6,"aisummary":7,"body":8,"category":529,"cover":530,"date":531,"description":532,"draft":533,"extension":534,"featured":533,"meta":535,"navigation":277,"path":536,"pinned":277,"seo":537,"stem":538,"tags":539,"updated":542,"__hash__":543},"posts\u002Fposts\u002Ftypography-over-color.md","排版比配色更决定气质","90a855a1","文章探讨了前端设计中排版与配色的重要性，指出排版更能决定页面的气质。作者强调排版应基于信息结构，通过字号、字重、行距和分隔方式来传达层级关系，而非依赖配色。提出了三个排版原则：标题与正文同字号，段落间距大于行距，使用1px线而非色块分隔内容。通过调整这些细节，页面从模板感转变为有设计感的呈现，尤其在暗色模式下效果更显著。",{"type":9,"value":10,"toc":518},"minimark",[11,19,22,26,29,45,52,55,58,63,66,156,163,166,170,178,181,185,195,311,314,317,320,353,360,363,421,428,431,434,441,498,501,504,511,514],[12,13,14,15],"p",{},"做前端这些年，我逐渐发现一个规律：",[16,17,18],"strong",{},"换一套配色，页面会变好看；改一遍排版，页面会变成另一个东西。",[12,20,21],{},"配色是外衣，排版是骨架。骨架不对，穿什么都别扭。",[23,24,25],"h2",{"id":25},"先说不做什么",[12,27,28],{},"大部分「看起来还行但说不出哪里不对」的页面，问题通常很具体：",[30,31,32,36,39,42],"ul",{},[33,34,35],"li",{},"所有标题都比正文大 1.5 倍以上，层级靠字号硬堆",[33,37,38],{},"行距 1.5，但段落间距和行距一样，读起来像一大坨",[33,40,41],{},"每块内容都装了圆角卡片，视线找不到落点",[33,43,44],{},"用同一个灰色表达三种不同重要程度的信息",[12,46,47,48,51],{},"这些都不是审美问题，是",[16,49,50],{},"信息结构没有翻译成视觉语言","。",[23,53,54],{"id":54},"我的三个约束",[12,56,57],{},"接这个博客的时候，我给自己定了三条硬规则，逼自己不用简单的办法解决层级问题。",[59,60,62],"h3",{"id":61},"一标题和正文同字号","一、标题和正文同字号",[12,64,65],{},"字号不动，层级靠字重和空间。",[67,68,69,88],"table",{},[70,71,72],"thead",{},[73,74,75,79,82,85],"tr",{},[76,77,78],"th",{},"角色",[76,80,81],{},"字号",[76,83,84],{},"字重",[76,86,87],{},"行高",[89,90,91,106,120,132,143],"tbody",{},[73,92,93,97,100,103],{},[94,95,96],"td",{},"页面标题",[94,98,99],{},"28px",[94,101,102],{},"700",[94,104,105],{},"1.25",[73,107,108,111,114,117],{},[94,109,110],{},"正文",[94,112,113],{},"17px",[94,115,116],{},"400",[94,118,119],{},"1.75",[73,121,122,125,127,129],{},[94,123,124],{},"正文内 h2",[94,126,113],{},[94,128,102],{},[94,130,131],{},"1.4",[73,133,134,137,139,141],{},[94,135,136],{},"正文内 h3",[94,138,113],{},[94,140,116],{},[94,142,131],{},[73,144,145,148,151,153],{},[94,146,147],{},"元信息",[94,149,150],{},"13px",[94,152,116],{},[94,154,155],{},"1.5",[12,157,158,159,162],{},"有个细节值得说：中文正文字体（我用的是霞鹜文楷 Lite）通常只有 ",[16,160,161],{},"400 和 700 两档字重","。如果 h2 和 h3 都用 700，在字号相同的前提下它们会长得一模一样。",[12,164,165],{},"我的解法是让 h3 用 400，但把颜色降到次级灰。层级用「更淡」表达，而不是「更粗」。",[59,167,169],{"id":168},"二段落间距必须明显大于行距","二、段落间距必须明显大于行距",[12,171,172,173,177],{},"行距 1.75 的时候，段落间距我用 ",[174,175,176],"code",{},"1.2em","。差值不大，但足够让眼睛知道\"这里断开了\"。",[12,179,180],{},"判断标准很简单：眯起眼睛看，段落应该像一块一块的，不是连续的一条。",[59,182,184],{"id":183},"三用-1px-线不用色块","三、用 1px 线，不用色块",[12,186,187,190,191,194],{},[174,188,189],{},"border"," 比 ",[174,192,193],{},"background"," 精确得多。",[196,197,202],"pre",{"className":198,"code":199,"language":200,"meta":201,"style":201},"language-css shiki shiki-themes github-light github-dark",".list-item {\n  border-bottom: 1px solid var(--border);\n  padding-block: 1rem;\n}\n\n.list-item:hover {\n  \u002F* 注意：不改背景色，只让标题变重 *\u002F\n  font-weight: 700;\n}\n","css","",[174,203,204,217,250,266,272,279,287,294,306],{"__ignoreMap":201},[205,206,209,213],"span",{"class":207,"line":208},"line",1,[205,210,212],{"class":211},"sScJk",".list-item",[205,214,216],{"class":215},"sVt8B"," {\n",[205,218,220,224,227,230,234,237,240,243,247],{"class":207,"line":219},2,[205,221,223],{"class":222},"sj4cs","  border-bottom",[205,225,226],{"class":215},": ",[205,228,229],{"class":222},"1",[205,231,233],{"class":232},"szBVR","px",[205,235,236],{"class":222}," solid",[205,238,239],{"class":222}," var",[205,241,242],{"class":215},"(",[205,244,246],{"class":245},"s4XuR","--border",[205,248,249],{"class":215},");\n",[205,251,253,256,258,260,263],{"class":207,"line":252},3,[205,254,255],{"class":222},"  padding-block",[205,257,226],{"class":215},[205,259,229],{"class":222},[205,261,262],{"class":232},"rem",[205,264,265],{"class":215},";\n",[205,267,269],{"class":207,"line":268},4,[205,270,271],{"class":215},"}\n",[205,273,275],{"class":207,"line":274},5,[205,276,278],{"emptyLinePlaceholder":277},true,"\n",[205,280,282,285],{"class":207,"line":281},6,[205,283,284],{"class":211},".list-item:hover",[205,286,216],{"class":215},[205,288,290],{"class":207,"line":289},7,[205,291,293],{"class":292},"sJ8bj","  \u002F* 注意：不改背景色，只让标题变重 *\u002F\n",[205,295,297,300,302,304],{"class":207,"line":296},8,[205,298,299],{"class":222},"  font-weight",[205,301,226],{"class":215},[205,303,102],{"class":222},[205,305,265],{"class":215},[205,307,309],{"class":207,"line":308},9,[205,310,271],{"class":215},[12,312,313],{},"一行一条线，视线自然往下走。色块会把页面切碎，线不会。",[23,315,316],{"id":316},"一个反例",[12,318,319],{},"很多模板会这样处理元信息：",[196,321,325],{"className":322,"code":323,"language":324,"meta":201,"style":201},"language-html shiki shiki-themes github-light github-dark","\u003Cspan class=\"meta\">2025-10-28 · 阅读 6 分钟 · 设计\u003C\u002Fspan>\n","html",[174,326,327],{"__ignoreMap":201},[205,328,329,332,335,338,341,345,348,350],{"class":207,"line":208},[205,330,331],{"class":215},"\u003C",[205,333,205],{"class":334},"s9eBZ",[205,336,337],{"class":211}," class",[205,339,340],{"class":215},"=",[205,342,344],{"class":343},"sZZnC","\"meta\"",[205,346,347],{"class":215},">2025-10-28 · 阅读 6 分钟 · 设计\u003C\u002F",[205,349,205],{"class":334},[205,351,352],{"class":215},">\n",[12,354,355,356,359],{},"中间那个 ",[174,357,358],{},"·"," 看着挺简洁，但它没有传达任何信息，只是把三个不相干的东西粘在一起。",[12,361,362],{},"我改成：",[196,364,366],{"className":322,"code":365,"language":324,"meta":201,"style":201},"\u003Cdl class=\"meta\">\n  \u003Cdd>2025-10-28\u003C\u002Fdd>\n  \u003Cdt>6 min\u003C\u002Fdt>\n\u003C\u002Fdl>\n",[174,367,368,383,398,412],{"__ignoreMap":201},[205,369,370,372,375,377,379,381],{"class":207,"line":208},[205,371,331],{"class":215},[205,373,374],{"class":334},"dl",[205,376,337],{"class":211},[205,378,340],{"class":215},[205,380,344],{"class":343},[205,382,352],{"class":215},[205,384,385,388,391,394,396],{"class":207,"line":219},[205,386,387],{"class":215},"  \u003C",[205,389,390],{"class":334},"dd",[205,392,393],{"class":215},">2025-10-28\u003C\u002F",[205,395,390],{"class":334},[205,397,352],{"class":215},[205,399,400,402,405,408,410],{"class":207,"line":252},[205,401,387],{"class":215},[205,403,404],{"class":334},"dt",[205,406,407],{"class":215},">6 min\u003C\u002F",[205,409,404],{"class":334},[205,411,352],{"class":215},[205,413,414,417,419],{"class":207,"line":268},[205,415,416],{"class":215},"\u003C\u002F",[205,418,374],{"class":334},[205,420,352],{"class":215},[12,422,423,424,427],{},"日期用等宽字体，时长用等宽字体，中间靠 1px 竖线或间距分开。",[16,425,426],{},"等宽字体只给真实数据用","——日期、字数、时长、代码。它不是装饰。",[23,429,430],{"id":430},"结果",[12,432,433],{},"同样的 zinc 灰阶，同样一个陶土色强调色，只调整字重、行距和分隔方式，页面的气质就从「模板」变成了「有人在排」。",[12,435,436,437,440],{},"在暗色模式下这一点尤其明显。因为我没有加任何阴影、没有玻璃拟态、没有渐变，暗色版本不是简单地把白底变黑底，而是",[16,438,439],{},"重新配了一次权重关系","：",[196,442,446],{"className":443,"code":444,"language":445,"meta":201,"style":201},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F 暗色下强调色要提亮，否则在深色底上会糊成一团\nconst accent = {\n  light: '#a94f33', \u002F\u002F 对比度 5.45 on #fff\n  dark: '#cc785c',  \u002F\u002F 对比度 6.07 on #09090b\n}\n","js",[174,447,448,453,466,480,494],{"__ignoreMap":201},[205,449,450],{"class":207,"line":208},[205,451,452],{"class":292},"\u002F\u002F 暗色下强调色要提亮，否则在深色底上会糊成一团\n",[205,454,455,458,461,464],{"class":207,"line":219},[205,456,457],{"class":232},"const",[205,459,460],{"class":222}," accent",[205,462,463],{"class":232}," =",[205,465,216],{"class":215},[205,467,468,471,474,477],{"class":207,"line":252},[205,469,470],{"class":215},"  light: ",[205,472,473],{"class":343},"'#a94f33'",[205,475,476],{"class":215},", ",[205,478,479],{"class":292},"\u002F\u002F 对比度 5.45 on #fff\n",[205,481,482,485,488,491],{"class":207,"line":268},[205,483,484],{"class":215},"  dark: ",[205,486,487],{"class":343},"'#cc785c'",[205,489,490],{"class":215},",  ",[205,492,493],{"class":292},"\u002F\u002F 对比度 6.07 on #09090b\n",[205,495,496],{"class":207,"line":274},[205,497,271],{"class":215},[12,499,500],{},"这两个值我实际算过 WCAG 对比度，不是拍脑袋定的。",[23,502,503],{"id":503},"最后",[12,505,506,507,510],{},"排版这件事的好处是：它不需要你有审美天赋，只需要你",[16,508,509],{},"对信息结构诚实","。什么重要，什么次要，什么是一组，什么该分开——想清楚了，视觉自然就出来了。",[12,512,513],{},"配色可以抄，排版抄不来，因为排版是判断题。",[515,516,517],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#57606A;--shiki-dark:#9AA4B0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":201,"searchDepth":219,"depth":219,"links":519},[520,521,526,527,528],{"id":25,"depth":219,"text":25},{"id":54,"depth":219,"text":54,"children":522},[523,524,525],{"id":61,"depth":252,"text":62},{"id":168,"depth":252,"text":169},{"id":183,"depth":252,"text":184},{"id":316,"depth":219,"text":316},{"id":430,"depth":219,"text":430},{"id":503,"depth":219,"text":503},"设计","\u002Fimages\u002Fcovers\u002Ftypography.png","2025-10-28","把同样一套颜色交给两个人排，出来的东西可以完全不同。这篇讲我怎么用字重、行距和留白，在不换颜色的前提下改变一个页面的脾气。",false,"md",{},"\u002Fposts\u002F90a855a1",{"title":5,"description":532},"posts\u002Ftypography-over-color",[540,529,541],"排版","CSS",null,"rw8LQGvwuons6TZkrrdQeCbmk8sf3BJOz_rHvRejzkw",{"prev":542,"next":545},{"path":546,"title":547,"description":548,"date":549,"updated":542,"tags":550,"category":529,"cover":553,"draft":533,"pinned":533,"featured":533},"\u002Fposts\u002F85fffa25","测试文章乙：有封面但非推荐","这是首页改版验收用的测试文章乙，有封面但未标记 featured，只出现在卡片流，不进轮播。","2026-10-20",[551,552],"测试","首页改版","\u002Fimages\u002Fcovers\u002Fcharset.png",[555,563,571],{"path":556,"title":557,"description":558,"date":559,"updated":542,"tags":560,"category":529,"cover":542,"draft":533,"pinned":533,"featured":533},"\u002Fposts\u002F8628a5ad","别再用卡片装一切","卡片是个好东西，但它有明确的使用条件。当每一块内容都变成同样圆角同样阴影的卡片时，页面就失去了层级，读者也失去了方向。","2025-08-22",[529,561,562],"布局","反思",{"path":564,"title":565,"description":566,"date":567,"updated":542,"tags":568,"category":529,"cover":542,"draft":533,"pinned":533,"featured":533},"\u002Fposts\u002Fcac47918","暗色模式不是把颜色反过来","反转配色是最省事的做法，也是最糟的做法。暗色模式需要重新设计对比度、阴影、饱和度和层级关系。","2025-07-25",[569,529,570],"暗色模式","可访问性",{"path":546,"title":547,"description":548,"date":549,"updated":542,"tags":572,"category":529,"cover":553,"draft":533,"pinned":533,"featured":533},[551,552],1794495069899]