pt、px、mm、em/rem的区别:字号单位换算指南

字号单位其实来自两个不同的世界——印刷和屏幕,这里整理它们之间的对应关系。

磅(pt):源自印刷的单位

1磅等于1英寸的1/72,是几十年前桌面排版软件标准化的印刷单位,至今仍是文字处理软件和印刷设计中的默认单位。

像素(px):屏幕单位

像素是屏幕上的单位,但并不对应固定的物理尺寸,而是取决于设备分辨率。为了在不同设备上保持一致,网页使用基于96dpi(每英寸96点)的"CSS像素"概念,而不是屏幕真实的像素密度。

96dpi是两者的桥梁

网页标准假设每英寸有96个CSS像素,而1磅等于1英寸的1/72,因此1pt正好等于96/72≈1.333px。常见的"12pt约等于16px"正文字号换算就是这么来的。

毫米:表示真实物理尺寸

对于名片、包装等输出尺寸提前确定的印刷品来说,毫米表示的是真实的物理大小,这一点很重要;而屏幕上同样的像素尺寸,在不同显示器上呈现出的实际物理大小却可能不同。

em和rem的区别

em相对于父元素的字号,如果元素层层嵌套,大小可能会意外地被叠加放大;rem则始终相对于根元素(通常是html)的字号,在整个页面中更容易预测,因此很多设计师默认优先使用rem。

与无障碍设计的关系

使用em、rem这类相对单位而不是固定的px值,可以让文字在用户调大浏览器默认字号时正常跟随放大;而写死的像素值不会对这种无障碍设置做出响应。

磅值为什么源自印刷术

磅这个单位比计算机的历史长得多,最初是活字印刷时代为统一铅字尺寸而设立的。上世纪80年代的桌面排版软件将其简化为精确等于1英寸1/72的"PostScript磅",这个定义沿用至今,也是72pt正好等于1英寸的原因。

网页为什么以96dpi作为基准

实际屏幕的像素密度差异很大,从低分辨率显示器到高清晰度的手机屏幕都有,网页需要一个固定的参照点,才能让字号在不同设备上看起来大致一致。早期Windows系统普遍采用96dpi的显示设置,这个数字后来就成了CSS事实上的标准,尽管如今大多数屏幕的实际像素密度已经远高于这个数值。

常见问题

为什么文字处理软件里的12pt和网页上的12px看起来不一样?

因为它们衡量的本来就不是同一件事。12pt指的是一个物理印刷尺寸,最终呈现效果取决于打印机或屏幕的分辨率;而网页上的12px是基于CSS 96dpi约定的固定屏幕单位。两者存在换算关系(约1pt≈1.33px),但不能直接互换。

做网站时字号应该用px还是rem?

很多设计师在设置字号时更倾向于使用rem,因为当用户在浏览器无障碍设置中调大默认字号时,rem会跟着一起放大,而px则始终保持固定不变。不过对于边框、图标这类需要精确、不随字号缩放的尺寸,px仍然很常用。