FOUNDATIONS · TYPOGRAPHY

字,是封面的骨架

Slab 襯線給標題自信;宋體給封面文學感;黑體讓內文安靜好讀;等寬字負責標籤與期號。

WORDMARK

FLiPER — 永遠是小寫 i

LIVE EXAMPLE

FLiPER

✓ FLiPER · ✕ FLIPER · ✕ Fliper

WHY小寫的 i 是翻轉的支點,也是品牌唯一不可更動的拼寫。

FAMILIES

字體家族

Display / Heading

Aa 翻轉 128

"Roboto Slab", "Noto Serif TC", Georgia, serif

Serif Title

Aa 翻轉 128

"Noto Serif TC", "Songti TC", serif

Body

Aa 翻轉 128

"Noto Sans TC", system-ui, sans-serif

Label / Code

Aa 翻轉 128

ui-monospace, monospace

SCALE

字級

display

48 / 800 / 1.1

FLiPERFont.display

Display Slab

title

30 / 700 / 1.3

FLiPERFont.title

封面標題 Serif Title

heading

24 / 700 / 1.35

FLiPERFont.heading

章節標題 Heading

body

17 / 400 / 1.9

FLiPERFont.body

從渺小的自己出發,成為翻轉世界的人。

caption

13 / 400 / 1.6

FLiPERFont.caption

攝影 / 林以晴 · 2026.11.14

label

11 / 500 / mono · tracking .18em

FLiPERFont.label

KEEP EXPLORING 128406

TYPE SPECIFICATION

完整字級規格

Token	px / weight	Line-height	字族 / 用途
display	48 / 800	1.1 · 52.8px	Roboto Slab / Noto Serif TC · 品牌級大標
title	30 / 700	1.3 · 39.0px	Noto Serif TC · 封面、文章標題
heading	24 / 700	1.35 · 32.4px	Roboto Slab / Noto Serif TC · 章節標題
body	17 / 400	1.9 · 32.3px	Noto Sans TC · 閱讀內文
caption	13 / 400	1.6 · 20.8px	Noto Sans TC · 圖說、後設資訊
label	11 / 500	1.6 · 17.6px	ui-monospace / Noto Sans TC · 分類、代幣標籤

CSS

.display { font: 800 48px/1.1 var(--font-display); }
.title { font: 700 30px/1.3 var(--font-serif); }
.heading { font: 700 24px/1.35 var(--font-display); }
.body { font: 400 17px/1.9 var(--font-sans); }
.caption { font: 400 13px/1.6 var(--font-sans); }
.label { font: 500 11px/1.6 var(--font-mono); }

CJK & LATIN

中英混排，是同一句話

中文使用繁體字形；英文標題由 Roboto Slab 承接，中文落入 Noto Serif TC，不以英文字型硬套漢字。內文 Noto Sans TC 搭配自然的 Latin 字形；代幣名與數字才切換等寬。中文標點使用全形，英文句內標點使用半形；品牌始終拼作 FLiPER。

LIVE EXAMPLE

在 FLiPER，我們以 Design 看見生活。
從一件作品，到作品背後的人。

文章 128406 · 設計 Idea · 林以晴｜設計師的日常

中英文之間保留一致的自然空隙，不靠連續空白對齊。標題不拆開 FLiPER 或 token 名；中文可自然換行，避免行首句末標點。窄螢幕優先換行與調整欄位，不把全文縮小。

HAN WEIGHTS

漢字字重對映

任務	Latin weight	Han weight / 字族
Display	800	900 / Noto Serif TC（避免缺字重時合成）
Title / Heading	700	700 / Noto Serif TC
正文	400	400 / Noto Sans TC
Label	500 / mono	500 / Noto Sans TC
圖說	400	400 / Noto Sans TC

中文大標使用實際載入的 900 字重，避免瀏覽器替 800 合成粗體；正文不靠加粗整段製造層次。強調用短語、段落與章節結構，讓長文維持穩定灰度。

CSS

複製

CSS

--font-display: "Roboto Slab", "Noto Serif TC", Georgia, serif;
--font-serif: "Noto Serif TC", "Songti TC", serif;
--font-sans: "Noto Sans TC", system-ui, sans-serif;
.label { font-family: ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: .18em; font-size: 11px; font-variant-numeric: tabular-nums; }