Typography Handbook

關於 Typography Handbook

Typography Handbook 是以網頁排版為主題的線上參考手冊，頁面說明它以 Kenneth Wang 的原作為基礎，更新整理為獨立參考資料。內容依視覺設計、字體與網頁樣式分章，討論層級、群組關係、閱讀欄寬與垂直間距，並穿插可對照的樣式程式碼。

手冊本身同時是排版範例，頁首可切換基線格線與深色模式，文中也標示字體、字級和行高等設定。技術內容延伸到字體載入、替代字體度量、進階字體功能與變數字體，讓設計觀察能連結到實際網頁樣式，便於逐項檢查文字呈現。

功能特色

主要功能

• 排版層級與分組：介紹字級、字重、位置、色彩，以及接近律與相似律的應用。
• 選字與系統字體：討論正文搭配、字體用途與系統字體堆疊的取捨。
• 網頁字體與載入：提供網頁字體格式、載入策略、預先載入及替代字體度量的樣式範例。
• 進階字體功能：介紹 OpenType、變數字體與光學尺寸等設定，並附程式碼。
• 閱讀欄寬與容器：說明相對單位、容器、行長及行高之間的關係。
• 字級與垂直節奏：涵蓋比例尺、流動字級、段落間距與基線格線的安排。
• 連結與換行樣式：提供底線粗細、位置、避開字形及標題與正文換行的設定方向。
• 色彩與無障礙：討論文字色彩、對比要求與對比模型，連到相關延伸閱讀。
• 深色模式排版：說明對比、字重及間距調整，並提供系統配色偏好的實作範例。
• 可切換的實際範例：頁面標示自身字體、字級、行高與欄寬，可切換基線格線及深色模式觀察。

使用情境

• 建立文章頁文字樣式時，對照層級、欄寬與垂直間距範例調整設定。
• 檢查網頁字體載入或深色模式時，依手冊章節比對相關樣式寫法。

相似工具

• Adobe Color — 學習網站
• Adobe Learn — After Effects — 學習網站
• Apple Human Interface Guidelines — 學習網站
• Baymard Institute UX Knowledge Hub — 學習網站
• BP&O — 學習網站
• Brand New — 學習網站
• Butterick’s Practical Typography — 學習網站
• Color（Method of Action） — 學習網站
• DesignSystems.com — 學習網站
• Figma Learn — 學習網站
• Fonts In Use — 學習網站
• GoodUI — 學習網站

加入創作邦會員

收藏實用內容、下載免費模板，訂閱電子報。

精選工具

• Comet — Comet 是 Perplexity 的 AI 瀏覽器，整合搜尋與助理功能，可協助閱讀、比較網頁內容、準備郵件草稿與整理學習計畫。
• Lovable — Lovable 可透過對話介面建立軟體產品，協助把想法製作為網頁應用程式。
• Pexels — Pexels 是照片與影片素材資源平臺。
• DOTOWN — DOTOWN 提供像素插畫下載，官方標示可商用，可用於圖示、文件與其他創作。

新工具

• justfont blog — 分享中文字體基礎、字型排版應用與字體設計入門的繁中文章及教案。
• LottieFiles Tips and Tutorials — LottieFiles 官方教學文章，分享設計系統、狀態機、介面動畫與 Lottie 流程。
• Adobe Learn — After Effects — Adobe 官方 After Effects 教學，涵蓋文字動畫、視覺效果與動態模糊。
• Pentagram Work — Pentagram 官方作品集，分享品牌識別、策略、包裝與動態等專案案例。