做排版时最费时间的往往不是“写内容”，而是把字号、行距、网格、比例和留白关系调到顺眼且一致。下面这份清单把常用的网格/尺度计算器、排版练习与灵感站点放在一起，适合在做品牌与界面排版时快速定基线、找参考、校验比例。
工具地址：https://www.gridlover.net/
免费商用：基线网格与排版尺度计算器，可快速得到字号、行高与网格的组合，并可预览段落效果。
工具地址：https://www.modularscale.com/
免费商用：用比例（如 1.125/1.2/1.333）生成字号阶梯，适合建立标题、正文、辅助文本的层级体系。
免费商用：可视化地选择字号比例与基准字号，直接预览 H1-H6 与正文的整体节奏，适合做初版排版方案。
工具地址：https://utopia.fyi/
免费商用：生成“流体字号/流体间距”的 CSS 变量与 clamp 公式，让排版在不同屏宽下自动保持比例与节奏。
工具地址：https://gridcalculator.dk/
需看协议：栅格系统计算器，可按画布宽度、列数、gutter 与 margin 计算网格参数，适合做网页与大屏栅格。
工具地址：https://www.figma.com/community
需看协议：大量网格、排版系统与版式模板资源。建议优先筛选“可编辑的排版系统文件”，再按品牌需求做二次抽象。
工具地址：https://www.typewolf.com/
需看协议：字体搭配与真实案例库，适合在定“标题字体 + 正文字体 + 数字字体”组合时快速找方向。
工具地址：https://fontpair.co/
需看协议：提供大量字体配对示例（含 Google Fonts），适合做界面或内容站点的排版气质参考。
工具地址：https://fontjoy.com/
免费商用：用对比度（similarity/contrast）思路自动生成字体搭配候选，可作为探索阶段的“灵感起点”。
工具地址：https://practicaltypography.com/
需看协议：排版基础与规范讲得非常系统，适合在做字体选择、字距、引号/破折号等细节统一时当作检查清单。
工具地址：https://m3.material.io/styles/typography/overview
需看协议：成熟的字号层级与使用建议，适合快速建立 UI 排版规范，再按品牌调性微调比例与字重。
工具地址：https://webaim.org/resources/contrastchecker/
免费商用：对比度检测工具。排版落地时建议顺手检查正文与辅助文本的对比度，避免“看起来高级但可读性差”。
