跳到正文

文字排版

中文界面常用

行距

Leading

文字行与行之间的垂直距离。太紧会挤在一起,太松会削弱段落的整体感。

好的排版为每个想法留出空间。行与行之间的距离、每一行文字的长度,都会影响阅读的节奏。试着改变一个参数,看看同一段文字如何呈现出不同的感受。清晰的层次,让读者更容易找到重点。

行高1.5

字间距

Tracking

统一调整一段文字中所有字符的间距。英文全大写标签通常适合稍微加宽,避免显得拥挤。

个人资料
安全设置
通知
间距0em

文本溢出

Text overflow

文字超出容器时的处理方式。省略号(…)可以提示后面还有内容;空间允许时,换行能保留更多信息。

Alexandra Kim

产品设计师 · 设计系统与用户体验

把复杂问题变成清晰、易用又贴心的产品体验,让每一次交互更自然。

文本宽度230px

字母与混排

用于品牌名、外文单词与中西文混排。

字偶距

Kerning

对特定的一对字符单独调整间距,使视觉距离更均匀。与统一调整整段文字的字间距不同。

AIDevCourse

只调整 AI 和 vC 这两组字偶,其余间距保持不变。

x 字高

X-height

小写字母(如 x)相对于大写字高的高度。x 字高越高,字体在相同字号下看起来就越大;因此,两种同为 16px 的字体也可能显得大小很不一样。

 

Hx基线

字号相同。参考线跟随浏览器测得的 x 或 H 字形高度。

断字

Hyphenation

用连字符把一个单词分到两行,适合窄栏和两端对齐的文本。自动断字需要正确的语言设置及浏览器支持。

Thoughtful ty­pog­ra­phy makes extra­or­di­nary in­ter­ac­tions feel un­der­stand­able.