在學習 Framer 的字體設定之前，我們必須建立一個基礎觀念：影響網頁文字美感的關鍵，不只有選什麼字體而已，重要的還有字的高度（Line Height）與間距（Letter Spacing）。
我過去也是 App 設計（UX/UI）背景，在初次接觸網頁設計時，我直接用設定 App 字體的方式去處理，結果讓自己造成了不小的麻煩。那時候設定了過多的字體樣式，字體高度也弄變得很死板、看起來不太自然。
如果你想知道有哪些避坑指南，這篇文章我整理了基礎的文字排版心法，以及做網站一定要了解的 SEO 必備規則，幫助你快速上手 Framer 的字體設定邏輯。
字體高度：創造舒適的閱讀
用倍數（%）取代固定值，讓排版更有彈性
在設定字體高度 (Line Height) 時，其實使用 Auto 或是 150% 會比較方便，不需要像做 App 那樣特別去計算固定的像素值。可以參考以下的數值設定：
內文：建議設定 150%。這是普遍認為閱讀起來最舒服的黃金數值，能給予文字充足的呼吸空間，讓長文讀起來不壓迫。
標題：如果是大字級的標題，則可以稍微收緊至 120%-130%，視覺上會更紮實。
理解網頁的「行高盒子」概念
為什麼我們需要設定高度？舉例來說，當你設定字體大小為 16px 時，文字本身的物理高度確實是 16px。但如果我們把行高設定為 24px（即 150% ），在網頁底層邏輯中，這份文字就會被包在一個 24px 高的「盒子」裡。
這就是為什麼當你在 Framer 選取文字時，會看到一圈比文字本身還大的藍色外框（如下圖）。這層外框定義了文字在網頁上真正佔據的空間，也會影響與其他元件之間的距離。
字體間距：精雕細琢的視覺呼吸
再來聊聊字體間距 (Letter Spacing)，你可以想像成文字的視覺呼吸。如果你習慣做 App 設計，特別是處理英文字體時，可能會發現有時候需要設定負值間距來微調視覺效果。間距太寬，閱讀起來會顯得鬆散；太緊又會產生壓迫感。
至於具體的數值該如何設定才完美？說實話我還在摸索中，也歡迎各位高手跟我多交流。但在網頁的中文字體處理上，我目前的建議還是先以 Auto 或不特別設定為主，保留最原始的閱讀性。
💡這裡補充一個常用的設計小技巧：如果你的標題是全大寫英文 (UPPERCASE)，通常稍微增加一點字距（例如 5% 或 10%），會讓文字的精緻度與質感瞬間提升，是常見的 UI 小技巧！
SEO 的重中之重：網頁設計師一定要懂的 H 標籤規則
在 Framer 設計網頁時，你必須理解 H1 到 H6 以及 P 標籤的含義。這不只是字體大小的分級，更是 Google 爬蟲理解你網頁架構的唯一依據。這是全篇最重要的心法：
標籤 | 定義 | 用途 |
|---|---|---|
H1 (Heading 1) | 網頁總標題 | 告訴 Google「這個網頁的主題是什麼」。例如：「Framer 教學指南」 |
H2 (Heading 2) | 章節標題 | 網頁中的主要區塊、段落標題。例如：「第一章：介面介紹」、「第二章：基礎操作」 |
H3 (Heading 3) | 小節標題 | H2 裡面的細分。例如在「第一章：介面介紹」裡面的「1-1 左側面板」、「1-2 右側屬性欄」。 |
H4 ~ H6 | 次要標題 | 比較少用，通常用於非常細的標題。 |
P (Paragraph) | 內文 | 所有的敘述文字、文章內容、說明文字，通通都是 P。 |
當然在設計上你還是可以設定不同種的 H1、H2….等，但還是建議不用設定太多，避免造成混亂，這部分設定並不像 Figma 一樣。保持簡潔的階層（如 1 個 H1、2~3 個 H2）能避免開發上的混亂，也能顯著提升 SEO 分數。
另外，在 Framer 裡，你也可以讓文字「看起來」是 H1 的級別，但標籤 (右側面板 Accessibility - tag) 選 P。優先保證標籤階層的正確性就好。
Framer 實作建議：建立 Text Styles
大致了解觀念後，我們就可以進到 Framer 實際操作了。建立樣式時，命名方式建議以自己習慣、好辨識為主。點擊新增後，Framer 其實已經預設好了常見的字體大小，非常方便，剩下的就是根據你的設計需求進行微調。
在字體設定上，我強烈建議一定要親自「玩過一遍」才會真的清楚。尤其是從 Figma 或 Adobe 轉過來的朋友，在這邊非常容易搞混。
接下來會針對 Framer 的文字面板，逐項說明每個設定的用途，以及新手最常搞混的地方：
Styles
設定粗體與斜體。雖然可以用快捷鍵 Command + B，但建議養成習慣去調整 Weight（字重），因為很多變數支援更細的組細（如 Semibold），快捷鍵容易導致設定不精準。
Fill / Radius / Squircle
Fill 底色顏色、Radius 旋轉圓角、Squircle 修改圓角樣式（可想像成 iPhone 圓角）
Variable
可變字體數值設定。更精細的微調文字的粗細、寬度、光學尺寸⋯⋯等，需要為可變字體，才會出現此欄位。能調整的項目也是依照該字
體支援度。
Breakpoints（響應式斷點）
超級好用！必用。快速設定 L、M、S 到了最小寬度時的切換點，可以在同一個設定裡處理三個尺寸的字體大小
Line、Paragraph：新手最常搞混的地方
Line 行高：就是一開始提到的 Line Height ，管的是「自動折行」的距離。當你的文字因為寬度不夠而自動折到下一行（Soft Wrap，軟換行）時，行與行之間的距離是由 Line 決定的
Paragraph 段落間距：管的是「按下 Enter」後的距離 當你手動按下 Enter 鍵（Hard Return，硬換行）另起一個新段落時，段落與段落之間多出來的那塊空格，就是由 Paragraph 來控制。
小提醒：有兩處區塊叫 Styles 是不同功能
Framer 中你會看到兩個地方都叫「Styles」，但它們不是同一件事。左圖是左側面板 Assets 中的 Styles，指的是 Text Styles（文字樣式系統），是在定義整個網站的文字樣式。
而文字設定面板中的 Styles，只是在切換文字本身樣式，例如粗體 Bold 或 斜體 Italic。
結語
學習 Framer 的字體設定，不只是為了追求視覺上的「好看」，更是為了後續的「好維護」與網頁的「SEO 體質」。
透過 Text Styles 建立全站統一的規範，可以讓你的網頁在 Google 搜尋引擎中獲得更好的結構分數，更實際的好處是，未來當客戶說「標題字想改大一點」時，你也只需要花 3 秒鐘修改 Text Styles，完全不需要一個一個頁面手動調整，這正是我們自己動手做網站的最大優勢。
其實字體學問深似海，Framer 裡還有很多好玩的功能（像是 Variable Fonts 可變字體）。大家在設定字體時，最常遇到什麼奇怪的問題呢？（例如字體顯示不出來、行高跑掉？）歡迎再私訊我，我們一起討論！