什麼是字型配對工具？

找到搭配得當的標題字型和內文字型組合。選擇一個配對方案，用自己的文字預覽效果，然後複製CSS程式碼或Google Fonts連結到你的專案中。

每組搭配都把一個標題字體和一個內文字體配在一起,事先考量了視覺反差和閱讀舒適度:襯線標題配人文無襯線內文、幾何無襯線配等寬點綴、壓縮展示字體配耐讀內文體。依風格篩選,把自己的標題填進預覽,一鍵複製 Google Fonts 載入碼和對應 CSS。

使用方法

1. 步驟 1 — 瀏覽字體搭配,或依風格篩選(襯線、無襯線、裝飾、等寬、手寫)。
2. 步驟二——點擊某個配對方案，使用範例文字預覽，或輸入您自己的文字。
3. 步驟三——複製Google Fonts匯入連結或CSS程式碼，套用到您的專案中。

何時使用

• 為部落格或登陸頁挑選標題與內文字體,在動手寫 CSS 之前先定下基調。
• 幫簡報或作品集換一套字體,不動版型就更新整體氣質。
• 檢視你已經在用的兩款字體,看看到底搭不搭。

結果

建立部落格時：選擇「Playfair Display + Source Sans 3」配對，預覽您的標題效果，然後複製CSS程式碼貼入樣式表中。

常見問題

這些字體都可以免費商用嗎?

可以。所有搭配都來自 Google Fonts,使用 SIL Open Font License 等開源協議,可以嵌入商業網站、隨應用程式發行,也能用在客戶案件上,不需另外購買授權。

兩款字體要怎樣才算「搭」?

靠反差也靠協調。標題需要個性(襯線、展示字、厚重幾何),內文則要「不引人注意」並易讀。這裡的搭配刻意混合分類:有個性的襯線標題配中性無襯線內文,層級立刻分明。

標題和內文可以用同一款字體嗎?

可以。Inter、Source Sans、Roboto 等超級字族提供多種字重,單一家族搭配粗體加常規也很乾淨。混用兩款通常視覺更有層次,但文件站或後台介面用一個字族就足夠。

同時載入兩款 Google Fonts 會拖慢頁面嗎?

兩個字族各一個字重大約多 30–50 KB,加上一次額外的 HTTP 請求。把產生的 CSS 自架,加 `font-display: swap`,只保留實際用到的字重,代價幾乎可以忽略。

選好搭配後要怎麼維持排版一致?

在 CSS 用 `font-family` 變數設定預設值,定一套字級階梯(例如 1.25 倍率),元件裡不要隨手加新字體。兩款選得仔細的字體已經足以撐起大部分文件。

相關工具