作为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
• 更小字号：全设备保持一致，保障基础阅读体验
写在最后
排版不是玄学，而是有章可循的科学。掌握这些黄金准则，你的网页文本设计会更专业、更易读。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
