无需登录 数据私有 本地保存

行高黄金比例计算器 - 基于字体大小推荐

排版 设计 字体 排版 行高 计算
41
0
0
0
px
8px72px
1.618
1.0 紧凑1.618 φ2.5 极宽
✓ 推荐区间 - 舒适阅读
📖
舒适阅读
16px / 1.6
📝
长文排版
18px / 1.7
📱
移动阅读
14px / 1.55
🔤
标题展示
24px / 1.35
px
实时预览

排版是设计中最微妙的艺术之一。行高——即文字基线之间的垂直距离——直接影响阅读的舒适度与文字的呼吸感。当行高与字体大小之间形成和谐的比例关系时，文本便会自然流淌，引导读者的视线从容地穿行于字里行间。黄金比例（φ ≈ 1.618）在自然界中无处不在，从贝壳的螺旋到向日葵的花瓣排列，这一神圣比例同样适用于排版设计。

当前：16px · line-height: 1.618
行高 (px)
25.89
font-size × ratio
line-height (无单位)
1.618
推荐CSS写法
line-height (em)
1.618
相对当前字体
line-height (rem)
1.618
相对根字体
百分比
161.8%
font-size × %
行间距增量
9.89
行高 - 字体大小 (px)
推荐CSS代码
font-size: 16px;
line-height: 1.618; /* 黄金比例 - 推荐使用无单位值 */

排版知识与常见问题

黄金比例（Golden Ratio，φ ≈ 1.6180339887...）是数学中一个无理数，由公式 (1+√5)/2 得出。它在自然界、建筑、艺术中反复出现——从帕特农神庙到蒙娜丽莎，从鹦鹉螺壳到银河系旋臂。

在排版中，当行高 ÷ 字体大小 ≈ 1.618时，文本的垂直节奏达到一种天然的和谐。这个比例既不会让文字显得拥挤，也不会过于松散，为读者创造了理想的呼吸空间。对于16px的正文，1.618倍行高约为25.9px，这是网页排版中被广泛认可的"甜蜜点"。

根据W3C可访问性指南(WCAG)和多年排版研究，正文的行高建议在1.4到1.8之间（无单位值）：

• 1.4 - 1.5：适合短段落、新闻摘要、仪表盘信息
• 1.5 - 1.65：最佳通用区间，适合大多数网页正文
• 1.65 - 1.8：适合长文阅读、学术论文、电子书
• 低于1.3：文字拥挤，阅读疲劳，仅适合标题
• 高于1.8：文字松散，行间关联减弱，影响阅读连贯性

黄金比例1.618恰好落在最佳通用区间的核心位置，这也是它被广泛推崇的原因。

强烈推荐使用无单位值（如 line-height: 1.618），这是CSS最佳实践：

无单位值（推荐✅）：子元素继承的是比例，会根据自身font-size自动计算。例如父元素设置line-height:1.618，子元素font-size:14px时，行高自动变为22.65px。

em单位：相对于当前元素自身的font-size。line-height: 1.618em ≈ 无单位1.618，但继承行为略有不同（子元素继承计算后的绝对值）。

百分比%：与em类似，line-height: 161.8%等于当前font-size×1.618，但子元素继承的是计算后的固定px值，可能导致意外问题。

px固定值：缺乏弹性，不推荐。当响应式设计中字体大小变化时，固定行高不会随之缩放。

结论：始终使用无单位数值设置line-height，这是最稳健、最灵活的做法。

移动端屏幕较窄，每行容纳的字符数更少（理想为35-45个字符/行），因此行高可以略小于桌面端：

• 移动端正文建议行高：1.45 - 1.6
• 字体大小建议不小于14px（避免iOS Safari自动缩放）
• 窄屏下较短的文本行需要稍紧凑的行高来维持段落整体感
• 使用媒体查询针对不同断点微调line-height是良好实践

例如：桌面端使用1.618，移动端可调整至1.5-1.55，保持阅读舒适度。

标题通常字体较大，需要更紧凑的行高（1.1 - 1.4）：

• H1（~32-48px）：行高1.1-1.25
• H2（~24-32px）：行高1.15-1.3
• H3（~18-24px）：行高1.2-1.4
• 标题如果跨行，过大行高会削弱标题的整体感和视觉冲击力
• 对于单行标题，line-height主要影响上下间距，可使用较小的值

本工具的场景预设中包含了"标题展示"模式（24px/1.35），可作为参考起点。

排版历史中形成了多个经典比例，各有其美学渊源：

• √2 ≈ 1.414：A4纸张的长宽比，国际标准比例，简洁理性
• 1.5（3:2）：音乐五度音程比例，视觉上非常稳定舒适
• φ ≈ 1.618：黄金比例，自然界最普遍的美学比例
• √3 ≈ 1.732：用于某些亚洲排版传统，较为宽松
• 1.8：长文阅读的经典选择，给予文字充足呼吸空间

不同比例适用于不同场景，本工具支持在这些经典比例间快速切换对比。

rem是相对于根元素（<html>）的字体大小，默认情况下浏览器根字体为16px：

行高(rem) = (字体大小 × 行高比例) ÷ 根字体大小

例如：字体16px，行高比例1.618，根字体16px
行高 = (16 × 1.618) ÷ 16 = 1.618rem

使用rem设置行高可以确保整个页面的垂直节奏基于统一的基准。本工具的计算结果中包含了rem值，你可以调整"根字体大小"来匹配项目配置。

行高过小（<1.3）：
• 文字上下紧贴，缺乏呼吸感
• 阅读时视线容易串行
• 长时间阅读导致视觉疲劳
• 在密集段落中产生"文字墙"效应

行高过大（>2.0）：
• 行与行之间关联减弱
• 段落整体感丧失，显得支离破碎
• 需要更多垂直空间，信息密度降低
• 读者视线跳跃距离过大，打断阅读流

本工具的比例指示器会实时标注当前设置是否在推荐区间内，帮助您做出最佳选择。

黄金比例（1.618）在网页设计中应用广泛：

• 布局比例：主内容区与侧边栏宽度比约1.618:1
• 字体层级：各级标题字体大小按1.618倍递增（如16px→26px→42px→68px）
• 行宽与行高：理想行宽（字符数）与行高形成黄金比例关系
• 色彩比例：主色与辅色的面积比可参考黄金分割
• 留白比例：内容区与留白区的面积关系
• 图片裁剪：使用黄金矩形（1.618:1）裁剪关键视觉元素

虽然不应机械套用，但黄金比例是设计师工具箱中极有价值的参考框架。
🔧 相关工具