Pro Web Type

關於 Pro Web Type

Pro Web Type 是 Donny Truong 編寫的網頁排版線上書，首頁標示第二版，並以章節串起網頁字體的選擇與使用。目錄涵蓋字體歷史、網頁字體載入、正文、標題、介面選字及排版細節，也設有進階字體功能、變數字體與實作練習等內容。

正文選字章節從閱讀情境出發，逐一比較小寫字母高度、開口、間距、端點與升降部等特徵，並附字體範例說明判斷理由。作者也提醒注意字重、斜體、筆畫對比及不同裝置上的使用情境，讓選字能連結到文章閱讀與介面呈現，另提供原始程式碼下載入口。

功能特色

主要功能

• 章節式線上書：依網頁字體歷史、載入、正文、標題、介面及排版細節安排閱讀。
• 正文選字判斷：以字面高度、開口、間距、端點、升降部、字重與筆畫對比解釋選字。
• 瀏覽器排版實作：將字體選擇與網頁樣式示範結合，供讀者對照並練習。
• OpenType 功能：介紹字距、連字、上下文替代、花飾與舊式數字的用途及設定。
• 變數字體章節：提供變數字體的獨立介紹與相關實作範例。
• 標題與介面選字：設有獨立章節，依文字用途討論不同的選字考量。
• 排版練習：從獨立實作章節連結理論與設計練習，協助逐步累積判斷。
• 原始碼下載：官方下載頁提供 HTML 與 CSS 範例，包含履歷、部落格、社論、品牌指南及網頁書；採自訂贊助金額。

使用情境

• 替長篇文章選擇正文字體時，依特徵比較與裝置情境建立檢查表。
• 學習網頁排版時，循正文、標題與介面章節安排閱讀及實作練習。

相似工具

• 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 官方作品集，分享品牌識別、策略、包裝與動態等專案案例。