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