Type Scale翻译站点

一、网站简介

Type Scale 是一个专注网页排版视觉比例的计算与预览工具。它通过经典的音阶比例（如 1.250、1.333、黄金比例）帮助设计师和前端开发一键生成模块化的字号阶梯，实时预览不同标题、正文段落的排版效果，从而彻底告别凭感觉设字号的痛苦，输出科学、有节奏的排版体系。

二、公司背景

Type Scale 由独立开发者 Jeremy Church 创建，是一款极客风格的轻量级 Web 工具。虽然其背后没有大公司，但凭借精准解决垂直排版需求的定位，已被无数前端教程和设计系统文档所推荐，成为排版入门的必用工具。

三、核心功能

• 可视比例选择器：提供 10 多种经典排版比例，用户可拖动滑块或点击预设，实时看到字体大小、行高、边距随着比例变化的情况。
• 多字体家族预览：可输入任意本地或 Google Fonts 字体名称，预览所选比例在具体字体上的表现，甚至能同时设定标题与正文字体。
• 正文与标题模块：包含 Hero 标题、h1~h6、段落、辅助文字等全套排版层级，每个级别都可独立微调尺寸和粗细，并显示对应的 rem/px 值。
• CSS 代码导出：调整满意后，一键复制生成的 CSS 自定义属性或基础样式，直接粘贴到项目中使用，保证视觉稿和代码一致。
• 暗色模式与背景预览：支持切换亮暗背景，帮助评估文字在不同模式下的可读性和对比度。
• 浏览器本地保存：刷新页面不会丢失设置，便于多次迭代调优。

四、网站特点

• 零门槛科学排版：将复杂的“垂直韵律”和“模度化字号”抽象为可视化操作，即使没有排版基础也能快速上手。
• 极轻量快速响应：纯前端应用，加载极快，无网络请求延迟，适合在编码过程中随时切屏查看。
• 与 Google Fonts 联动：直接调用 Google 字体库，实现所见即所得的字体配对测试。
• 专注唯一功能：不叠加任何其他杂物，是典型的 Unix 哲学工具——做好一件事。

五、适用人群

• 前端工程师：在 CSS 编写前确定全局字号比例，建立响应式排版变量，减少返工。
• UI 设计师：将 Type Scale 生成的层级作为设计系统的 Typography Token 依据，确保设计稿中的字号有理有据。
• 技术文档撰写者：为文档站设定一套阅读舒适的字号阶梯，提升长文阅读体验。
• 学生与排版初学者：直观理解比例关系对排版美感的巨大影响，是活生生的学习工具。

六、应用场景

• 设计系统字号表格生成：团队前端在 Type Scale 选好比例，复制 px 和 rem 对照表，作为全项目统一规范。
• 个人博客主题开发：博主先在此工具预览多种字体搭配效果，确定好标题字号后直接复制 CSS，使博客瞬间提升档次。
• 企业官网改版：设计师用 Type Scale 同步开发判断字号合理性，避免反复沟通切图细节。
• 移动端 H5 活动页适配：利用工具预览最小字号与最大标题，确保在手机上文字不显拥挤或过于松散。

七、常见问题（FAQ）

Q：国内能否直接访问？
A：Type Scale 托管于海外静态站点服务，国内可以正常打开和使用，偶有加载 Google Fonts 缓慢可切换本地字体预览。

Q：生成的 CSS 代码可以直接商用吗？
A：工具本身输出的代码没有版权限制，可自由用于任何商业项目，本质是数学计算结果。

Q：如何选择适合的比例？
A：内容偏多偏阅读型用 “Major Third (1.250)”，视觉型营销站用 “Perfect Fourth (1.333)” 或 “Golden Ratio (1.618)”，可多看实际效果决定。

Q：支持非西方字体吗？
A：支持，只需输入你电脑已安装的中文或日文字体名称，工具即会在预览中应用，可正常评估排版。

八、类似网站

• Typescale.com：同类型工具，界面更现代化，提供更丰富参数。
• Modular Scale：侧重多级比例组合，适合更复杂的排版设计。
• Grid Lover：整合基线与间距调整的排版工具，可设置垂直节奏。