什麼是 UI 設計中的「字型」？
在 UI 設計領域，「字型」（Font）指的是特定字體家族中的特定樣式，例如「SF Pro」是字體家族，「SF Pro Text Medium」纔是一個字型。它包含了一組完整的字形（Glyph），涵蓋了字母、數字、標點符號等。選擇字型就是選擇網站的設計風格，而 UI 設計中最基本的分類在於襯線體（Serif）與非襯線體（Sans-serif）。襯線體在筆畫末端有裝飾線條，如 Times New Roman，通常給人傳統、正式的感覺；非襯線體則無此裝飾，如 Helvetica，視覺上更簡潔、現代。在介面設計中，非襯線體因其清晰的線條與較好的小字可讀性，成為了主流選擇，尤其在需要快速掃描資訊的螢幕介面上。選擇時，設計師需先確認字型的語言支援範圍、可讀性與整體的視覺重量，是否與產品的調性相符。網站字型是構成整體使用者體驗的基石。
UI 設計師的常用字型清單
沒有一款字型是所有 UI 專案的萬能解方，但有幾款字型因其出色的設計與廣泛的適用性，成為了許多設計師工具包中的基準。選擇時應考量其視覺風格、語言支援能力與常見的使用場景，這些都是網站字型選型時的核心要素。
- 思源黑體（Noto Sans TC / SC）：由 Google 與 Adobe 聯合開發，涵蓋繁簡中文、日文等多語言，免費且完全開源。其權重（字重）豐富，從極細到粗體皆備，非常適合需要完整字型家族與多語系支援的國際化專案，是網頁設計中極為實用的選擇。
- 蘋方體（PingFang）：Apple 裝置的預設系統字型，針對螢幕顯示進行了優化，在 macOS、iOS 上具有最佳的原生渲染效果與閱讀體驗。其風格中性、現代，若你的目標受眾以 Apple 用戶為主，使用蘋方體能確保最一致的呈現。
- SF Pro：同為 Apple 設計，是 SF Pro Text 與 SF Pro Display 的統稱，分別針對小尺寸正文與大尺寸標題進行了微調。它提供了極致的介面整合度，是 iOS 與 macOS 應用程式的標配。
- Roboto：Google 的 Android 系統字型，也是 Material Design 計劃的核心。它機械感與人文感兼具，可讀性極高，且在 Google Fonts 上免費使用，與思源黑體一樣，是跨平臺 Web 專案的熱門選項。
除了上述清單，你也可以參考像 UI/UX 設計完整入門指南 中提到的設計原則，從品牌調性出發來縮小選擇範圍。關鍵在於，所選的網站字型必須能清晰傳達訊息，並與你的 UI 設計系統 中的其他視覺元素和諧共存。
為何我的字型在不同裝置上長得不一樣？
這種差異主要源於不同作業系統與瀏覽器的預設字型與字體渲染引擎。當你的設計稿使用了非系統預設的字型（例如在 Mac 上設計，使用了蘋方體），而訪客的 Windows 電腦沒有安裝該字型時，瀏覽器會 fallback（回退）到系統預設字型（如微軟正黑體），導致外觀改變。此外，即使字型相同，Windows 與 macOS 的 ClearType 與 Core Text 等渲染技術也會對文字的筆畫進行不同程度的抗鋸齒處理，使得字重（粗細）與邊緣銳利度產生細微差異。這正是網站字型跨平臺呈現時常見的挑戰。
要確保跨平臺一致性，最核心的方法是使用 Web Font（網頁字型，或稱雲端字型）。透過 Google Fonts、Adobe Fonts 或自行託管的字型檔案，在網站的 CSS 中用 @font-face 規則宣告字型，瀏覽器便會在載入頁面時一併下載並套用，無論訪客使用何種裝置，都能看到你指定的字型。這是在無法控制使用者環境下，維持視覺一致性的關鍵技術。
字型如何影響你的網站體驗？
字型遠不止是文字的容器，它直接影響使用者的閱讀情緒與效率，並是品牌無聲的代言者。一個優秀的網站字型選擇，關乎可讀性（Readability）與易讀性（Legibility）。可讀性指使用者能否舒適地閱讀一段文字，這與行長、行高、段距密切相關；易讀性則指單個字形是否容易被區分與辨識，這取決於字型的 x-height（小寫字母高度）、字腔大小等設計。選擇不當的字型可能導致使用者閱讀疲勞，甚至放棄內容。
其次，字型承載著品牌個性。一個使用經典襯線體的法律事務所網站，會傳遞出權威與信任感；而一個採用幾何風格無襯線體的科技產品頁面，則可能強調創新與效率。此外，字型選擇也應考量包容性，某些字型對閱讀障礙者更為友善（如 OpenDyslexic），考慮這點能體現設計的無障礙關懷。因此，字型是使用者體驗（UX）中一個至關重要的微觀觸點。
從設計到實作：字型排版與工程銜接
設計師在設計稿中完成排版後，必須提供一份清晰的字型規範給工程師，以確保實現效果與設計意圖一致。這份規範應是一個可執行的清單，涵蓋從視覺參數到技術細節，這是將網站字型從設計稿落實到產品的關鍵步驟。
基礎排版參數建議：
- 字號（Font-size）：正文建議 16px (1rem) 起跳，確保在常見螢幕上的可讀性。標題層級建議使用 rem 或 vw 等相對單位，以便響應式縮放。
- 字重（Font-weight）：明確標註使用的字重（如 400 為 Regular，700 為 Bold），並避免在同一段落內混用過多字重。
- 行高（Line-height）：正文行高通常設定為字號的 1.5 到 1.8 倍，為行間留出足夠呼吸空間。
- 段距（Paragraph margin）：段落之間的間距應清晰定義，通常略小於行高。
需標註的字型資訊：字型家族（Font family）、字型檔案來源（例如 Google Fonts 連結或本地檔案路徑）、授權方式（免費開源或需付費）。與工程師溝通的常見議題：Web Font 檔案大小對頁面載入效能的影響（建議使用 font-display: swap 優化）、字型檔案的正確授權證明、以及在 CSS font-family 屬性中設定合理的 fallback 字型順序。
字型設計交付前的風險評估流程
在設計稿交付給開發團隊前，UI 設計師應將字型從「視覺選擇」升級為「交付風險評估」。此流程旨在判斷字型選擇是否會因渲染、授權、效能或跨語系而翻車，並據此選定安全的掛載策略。它特別適用於網頁與 App UI 設計交付前的審查，尤其是含多語系或需自訂字體的專案。請注意，此評估僅涵蓋以下提到的四個風險面向，未包含無障礙對比或動態字型切換等更廣泛的議題。
- 渲染落差檢查：在主要目標平臺（Windows, macOS）上，用瀏覽器預覽 Web Font 效果。檢查字重、字寬是否與設計稿預期一致，必要時調整 CSS 中的 letter-spacing 或 font-weight 進行微調。此步驟的目標是預先排除實作到網頁時可能產生的視覺落差。若發現差異且無法透過微調解決，需評估是否更換字型或接受現狀，並將此已知差異納入設計規範說明。
- 授權與檔案大小確認：確認所選字型的授權允許用於網路環境。若授權明確禁止網路使用，則不得採用；若允許但有限制（如需標註來源），則需遵守。評估字型檔案大小（尤其是中文字型），考慮使用字型子集化（只包含需要的字符）或服務如 Google Fonts 的自動優化來減少體積，以避免拖慢頁面載入速度與提高跳出率。
- 跨語系彈性評估：如果專案需要支援多種語言，確認主要字型是否能覆蓋這些語言的字符。若不能，需規劃好不同語言下的 fallback 字型方案，並在設計稿中標註。不同語言的字形在寬高、緊密度上存在差異，需確保 fallback 方案能維持整體排版的可讀性與視覺一致性。
- 設計系統整合：將確認過的字型家族、字重與排版規範，正式更新到你的設計系統與元件庫中，確保團隊成員後續使用的一致性。此步驟是將風險評估的結論固化為可執行的設計資產，是從診斷過渡到安全掛載策略的最後一環。
設計網站時，選擇字型最重要的三個考量是什麼？
首要考量是可讀性與易讀性，確保字型在小尺寸螢幕上仍清晰易辨。其次是品牌調性與情感傳達，字型的視覺風格應與產品個性相符。最後是技術可行性與一致性，包括字型的跨平臺渲染表現、Web Font 載入效能、授權費用以及多語系支援能力。
什麼是「雲端字型」，我一定要使用嗎？
雲端字型（Web Font）是透過網路伺服器提供，並在使用者瀏覽網站時即時載入的字型服務（如 Google Fonts）。你不一定「必須」使用，但若你希望網站在所有使用者的裝置上，都能呈現完全一致的指定字型外觀，那麼使用雲端字型是最有效的方法。若不使用，網站將依賴訪客裝置內建的系統字型，可能導致設計效果大幅偏離。
系統預設字體和自訂字體，該如何選擇？
系統預設字體（如蘋方、微軟正黑）的最大優勢是無需額外載入，能確保在該作業系統上立即且一致地顯示，頁面載入速度最快。自訂字體（透過 Web Font 載入）則能讓你精準控制品牌視覺，但需要付出額外的網路請求與載入時間成本。選擇取決於專案需求：追求極致載入速度與平臺原生感時，可考量系統字體；強調獨特品牌識別時，則傾向使用自訂字體。
如何確保我的字型選擇不會拖慢網站速度？
關鍵在於管理字型檔案的大小與載入方式。可採取以下措施：使用像 Google Fonts 這類提供自動優化與 CDN 服務的平臺；進行字型子集化，只打包實際用到的字符；在 CSS 中使用 font-display: swap 策略，避免文字在字型載入期間隱藏；並且只載入真正需要的字重與樣式，避免引入整個字型家族的所有檔案。
字型需要付費購買或取得授權嗎？
這完全取決於你選擇的字型及其授權條款。像思源黑體、Roboto 這類在 Google Fonts 上的字型，通常採用 SIL Open Font License 等開源授權，允許免費用於商業用途。然而，許多商業字型（如 Helvetica Neue）則需要購買授權。設計師務必在選擇字型時，查明並確認其授權範圍是否符合專案的使用情境（例如用於網站、App 或嵌入產品），以避免侵權風險。