音乐性排版秤。模块化秤计算器

免费在线工具,使用基于音乐比例的模块化秤创建和谐的视觉层级。为您的网页设计生成现成的CSS变量。

配置

px

您的段落文本大小(通常16px)。

确定每个步骤的大小增长程度。

计算值

预览

变量已复制到剪贴板!

工具工作室

想把这个工具添加到你的网站吗?

为 WordPress、Notion 或你自己的网站自定义配色和深色模式。

常见问题

什么是排版模块化秤?

这是一种基于恒定数学比例来确定字体大小的方法。就像音乐中音符有和谐关系一样,模块化秤创建了平衡且可预测的视觉层级。

为什么在设计中使用音乐间隔?

音乐间隔是人脑感知为和谐的比例。将它们应用于文本大小会创建看起来正确和专业的视觉结构,而不是随意选择的大小。

排版中的黄金比例是什么?

这是比例1.618,称为黄金分割。它创建非常戏剧性和优雅的秤,其中层级中的每一步呈指数增长。非常适合投资组合或以艺术为中心的网站。

我如何在CSS文件中实施秤?

该工具以:root { --step-N: Xrem; }格式生成CSS变量(token)。将它们复制到主CSS文件中,并使用var(--step-N)来维护您网站上的排版一致性。

# 网页设计中看不见的和谐

音乐排版秤将音乐间隔的数学应用于排版设计。就像音乐作品受精确比例支配一样,一个好的设计受益于一个将所有大小联系起来的数学结构。

# 模块化秤如何工作

公式

进度很简单:Size = Base × Ration。第0步是您的基础文本。第1步是小字幕。第4或5步可能是您的主H1。相同的乘法常数(比例)确保所有关系一致。

为什么是"音乐的"

毕达哥拉斯发现,将弦分成简单比例(1:2、2:3、3:4)会产生辅音。这些间隔、八度、完全五度和完全四度,正是排版比例。您正在组成视觉音乐。

# 选择正确的比例

对于密集界面(仪表板、表格),使用小比例(如1.1251.2)。对于编辑或投资组合网站,使用更富表现力的比例(如1.51.618)。
不要将秤限制在仅font-size。相同的CSS变量适用于marginpaddinggap。当空白遵循与文本相同的数学进度时,设计达到所有人都能感受但很少有人能解释的凝聚力。

参考文献