YL
TYPOGRAPHY

排版与文字 UI 设计模式

排版与文字(Typography)分类收录 12 种常用界面模式:巨号展示标题、渐变文字、图片填充文字、荧光笔标记、逐字入场动画、眉题标签等,每条含中英文学名、效果预览与可复制的 AI 设计提示词。

排版与文字

Typography

12 条

巨号展示标题

Display Heading

大标题排版display字号

80-160px 的超大字重标题,tight 字距 + tight 行高——纯排版立起来的画面。

渐变文字

Gradient Text

渐变文字强调标题

background-clip:text 让文字内部流淌渐变色,一个属性拯救一整句标题。

图片填充文字

Text Mask Image

图片字遮罩填充创意

把一张照片/渐变图填进文字轮廓里,字即画、画即字。

荧光笔标记

Marker Highlight

高亮荧光笔重点标记

文字下半截垫一条荧光色,像用记号笔划过的重点。

逐字入场动画

Text Reveal Animation

逐字入场stagger标题动画

标题拆成单字,每个字错开 40-70ms 依次上浮入场——高级感的入场标配。

眉题标签

Eyebrow / Kicker

眉题kicker标签层级

标题上方的那行小字:大写、宽字距、品牌色,为下方大标题做预告。

首字下沉

Drop Cap

首字下沉杂志正文

段落第一个字放大下沉占两三行,杂志排版的经典开场仪式感。

引文块

Blockquote

引文金句引用署名

左侧一道竖线 + 斜体金句 + 署名——把一句话从正文中"拎"出来。

平衡换行

Balanced & Pretty Text Wrap

换行balance排版孤行

text-wrap:balance 让标题两行一样长;pretty 消灭正文最后一行孤字。

行内代码与代码块

Inline Code & Code Block

代码等宽高亮文档

浅粉底色的行内代码 + 深色圆角代码块 + 右上角复制按钮。

数字大字排版

Numeric Display

数字排版tabularKPI

超大数字用 tabular-nums 等宽 + 紧字距,跳动时不抖、排版不散。

衬线混排

Serif Mixing

衬线混排字体编辑风

无衬线正文里,让关键词跳成衬线斜体—— editorial 味道立刻出来。