作为UI/UX设计师，你是不是也经常纠结：标题字号多大才醒目？正文行高多少才好读？
别慌！今天分享一组由设计师Marina Budarina总结的网页排版核心准则，从字符间距到响应式适配，全是能直接落地的干货，帮你轻松搞定文本可读性。
一、 字符间距：细节里的高级感
字符间距是字符间的均匀留白，不同文本类型适配不同数值，千万别瞎调：
• 正文：收紧至 -2%，让文字更紧凑，阅读时更连贯
• 标题：收紧至 -6%，强化视觉集中度，一眼抓住用户视线
• 全大写文本：放宽至 1%，避免字符挤在一起，提升辨识度
二、 行长度：阅读不累的关键
正文的最优行长度是每行50-60个字符！
这个范围能平衡阅读效率和视觉舒适度，既不会因为行太长让眼睛来回跑，也不会因为行太短频繁换行打断思路。
三、 行高：决定文本呼吸感
行高是文本行之间的垂直间距，选对行高，阅读体验直接翻倍：
• 正文（16px-20px）：行高控制在 140%-175%，宽松的间距让文字“呼吸”，长时间阅读也不疲劳
• 标题（24px及以上）：行高控制在 100%-120%，紧凑排版突出标题层级，气场直接拉满
四、 字重：用粗细区分层级
字重决定文字的粗细，选对字重，文本层级一目了然：
• 正文（16px-20px）：优先用 常规（regular）、中等（medium） 字重，保证基础可读性
• 正文强调内容：用 半粗（semibold）、粗体（bold） 突出重点，让关键信息不被忽略
• 标题（24px及以上）：直接冲 半粗、粗体，增强视觉冲击力，标题就是要醒目！
五、 字号+响应式：适配所有设备
基础字号参考
• 主标题（H1）桌面端可到 80px
• H2设为 56px，H3设为 32px
• 大正文（body-lg）18px，小正文（body-s）16px
响应式适配要点
不用死记硬背，记住这个调整逻辑：
• H1：桌面80px → 平板64px → 移动端44px
• H2：桌面/平板56px → 移动端32px
• H3：桌面/平板32px → 移动端28px
• H4：桌面/平板20px → 移动端18px
• 大正文：桌面/平板18px → 移动端16px
• 更小字号：全设备保持一致，保障基础阅读体验
写在最后
排版不是玄学，而是有章可循的科学。掌握这些黄金准则，你的网页文本设计会更专业、更易读。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問(wèn)
