排版看起来像“细节活”，但真正让页面高级与耐看的是一套可复用的尺度体系：栅格与基线决定对齐感，字号与行高决定节奏感，字体搭配与对比度决定可读性，最终还要放进不同屏幕尺寸里验证一致性。下面整理了一组常用工具与资源站，覆盖从尺度推导、网格检查、字体挑选到响应式预览的关键环节。
工具地址：http://www.gridlover.net/
需看协议｜在线叠加基线网格与标尺，帮助你快速检查字号、行高与段落间距的节奏是否统一。
需看协议｜用于推导标题/正文的字号阶梯（scale），适合在同一页面建立清晰的信息层级。
工具地址：https://www.modularscale.com/
需看协议｜输入基准字号与比例后生成一套可用的尺度序列，常用于设计系统的字号与间距规范。
需看协议｜提供常见字体搭配案例（标题/正文组合），适合在不确定风格时快速找到“安全组合”。
工具地址：https://fontjoy.com/
需看协议｜基于对比与相似度的字体搭配推荐，适合做海报/落地页时快速生成备选方案。
工具地址：https://fonts.google.com/
需看协议｜字体筛选与预览工具齐全（字重、语言、风格），适合做跨平台项目的字体资源库。
工具地址：https://www.fontshare.com/
需看协议｜提供高质量字体与家族展示页，适合寻找更具品牌气质的标题字体与配套字重。
工具地址：https://contrast-grid.eightshapes.com/
需看协议｜把多组前景/背景颜色放进同一张对比度网格里对照，快速发现不合规或边缘可读性的配色。
工具地址：https://webaim.org/resources/contrastchecker/
需看协议｜输入两种颜色即可校验 WCAG 对比度，适合在定稿前快速确认文字与按钮的可访问性。
工具地址：https://responsively.app/
需看协议｜多设备同步预览网页的桌面应用，适合检查不同断点下的栅格、行高与折行表现。
需看协议｜面向前端与设计协作的多视口浏览器，适合在同屏对比多个尺寸下的排版一致性与可读性。
需看协议｜通过布局网格、自动布局与组件库把字号/间距规范落到可复用的设计系统中，适合团队协作与交付。
