9 個排版設計實戰技巧：字體選擇、行距設定到視覺層次的完整指南
排版好不好看，九成靠的是可量化的節奏，鮮少靠靈感。實務上把行距設為字體大小的 1.5 到 2 倍、字級落差拉到 1.5 倍以上、一行字維持在 28 到 40 字之間，這三組數值到位…
排版好不好看，九成靠的是可量化的節奏，鮮少靠靈感。實務上把行距設為字體大小的 1.5 到 2 倍、字級落差拉到 1.5 倍以上、一行字維持在 28 到 40 字之間，這三組數值到位，新手也能穩定做出專業版面。真正拉開差距的關鍵在於層級對比與留白節奏拿捏得到不到位，字體本身的貴賤反而是次要因素。
重點先看：行距 1.5 到 2 倍、一行 28 到 40 字、字級落差至少 1.5 倍，是排版實務長期累積下來的共識；這三個數值穩了，再貴的字體才發揮得出來。
排版設計的底層邏輯：先顧可讀性，再談創意
很多人做完排版還是覺得版面很亂，真正的關鍵出在順序顛倒，靈感的多寡影響有限。排版的底層邏輯是先把「可讀性骨架」搭起來，行距、字級、一行字數、留白這四項有數值可依，骨架穩了再疊創意裝飾，才不會被裝飾吃掉主訊息。把順序想成蓋房子，地基沒打好就貼磁磚，再漂亮的磁磚也會掉。
排版好看與否的關鍵是節奏，不是靈感。行距、字級對比、留白、重複這四件事，每一項都有可照做的數值範圍，所以有些設計師即使只用一種黑體，做出來的版面照樣有質感。要徹底弄懂版面的組成，可以先看網頁版面設計的完整觀念與工具，把基本觀念建立起來，再回頭調字距行距會更有感。
順序上要先處理可讀性，也就是讀者能不能輕鬆讀完；再處理美觀，也就是讀者想不想繼續看。這個先後一旦顛倒，就會出現「字體很漂亮但沒人想讀」的窘境。可讀性和易讀性在業界常被混用，但嚴格說起來，可讀性偏向「能不能讀」，易讀性偏向「讀起來輕不輕鬆」，分清楚才知道自己在解決哪個問題。
平面排版與網頁排版的評判標準不同。平面排版重第一眼的視覺張力，一張海報要在三秒內抓住目光；網頁排版重滾動節奏與手機適配，讀者是用滑的而不是用盯的。兩者都用同一套數值會出問題，例如桌面版一行 35 字看起來剛好，手機版卻會擠成一團。想知道手機版要怎麼調，不妨參考響應式網頁設計 RWD 觀念與Figma 響應式設計與行動版排版的實作方式。
字體是加分項，不是決勝項，這是接案新手最常踩偏的認知。花大把時間挑字體，卻把行距擠成一片、層級全平，看起來反而比用預設字體還糟，把骨架搭好再談裝飾，才不會白忙一場。若還在摸索整體設計流程，UI 與 UX 設計差異與工作流程能把設計思考的順序理清楚。
行距設定的安全區與極端值
中文正文的行距建議設為字體大小的 1.5 到 2 倍，例如 14pt 字配 21 到 28pt 的行距，過窄會擁擠壓迫、過寬會失去段落連貫性。行距是排版裡最不起眼卻最關鍵的設定，調對了讀者無感，調錯了讀者讀兩行就想關掉。
行距過小，低於 1.3 倍時，中文方塊字會彼此擠壓，閱讀時容易跳行、找錯位置，這在字數多的長文裡特別明顯。行距過大，超過 2 倍時，段落會斷裂成一行行獨立句子，失去整體感，讀起來像在看詩而不是文章。極端值都不好，1.5 到 2 倍是排版實務公認的安全區。
| 字體大小 | 建議行距範圍 | 倍數 | 適用情境 |
|---|---|---|---|
| 12pt | 18 到 24pt | 1.5 到 2 倍 | 註解、小標 |
| 14pt | 21 到 28pt | 1.5 到 2 倍 | 網頁正文 |
| 16pt | 24 到 32pt | 1.5 到 2 倍 | 手機正文 |
| 24pt | 31 到 38pt | 1.3 到 1.6 倍 | 大標題 |
從這張表可以看出一個原則：字體越大，行距倍數可以略微下修，因為大字本身已經佔夠多空間；字體越小或字數越多，越要拉開行距換呼吸空間。標題 24pt 配 1.6 倍就夠，硬要拉到 2 倍反而顯得鬆散。這個倍數概念也適用在網站標題樣式的設計技巧上，標題行距抓錯整個頁首都會垮。
行動裝置因為視野窄，行距通常要比桌面版再放大約 0.1 到 0.2 倍，讓小螢幕上的文字有更多喘息空間。這只是方向性參考而非精確公式，實際還是要看字體本身的結構。搭配字距一起調：中文正文原則上不額外加字距，標題可以微縮或微拉來營造風格，這部分可以對照中文字體推薦與黑體明體選擇裡的字距討論。
行距是新手最容易忽略、卻影響最大的一項。一個常見的誤判是把行距設成 1.2 倍、以為「緊湊等於俐落」，結果讀者讀起來很喘；把正文行距固定抓在 1.6 到 1.8 倍之間，幾乎不會被挑出毛病。想把整體版面骨架先規劃好，Wireframe 線框圖規劃網站原型是很好的起點。
字體選擇：襯線、無襯線與品牌風格的配對原則
品牌該選襯線字體還是無襯線字體？走質感、高端、人文路線選襯線體；走平價、現代、生活感路線選無襯線體，前提是易讀，避免潦草手寫體當正文。字體選擇會同時影響視覺效果與閱讀體驗，但它的影響力往往被高估，真正決定版面好壞的還是前面的骨架。
襯線體（明體系）筆畫有起收，散發古典、正式、高端氣質，適合精品、媒體、人文品牌。無襯線體（黑體系）筆畫均勻、現代俐落，適合科技、生活、電商、大眾內容。這不是絕對，但抓對方向能少走很多冤枉路。中英文搭配時找風格相近的配對，中文用明體就配英文襯線體，中文用黑體就配英文無襯線體，整體才會和諧，這部分的進階挑選可以看Logo 標準字的中英文字體挑選技巧。
字體用太多是新手最常見的錯。一個版面超過 3 種字體就開始破碎，控制在 2 種以內最安全；很多人想用字體展現豐富感，結果每個區塊換一種字，讀者只覺得雜。專業設計師之所以常用一套字體吃全場，靠的正是同一個字體裡的字重變化來做層級，這比堆疊多種字體更省事也更俐落。網頁字體還要顧及載入速度，過多字重或外嵌字體會拖慢渲染。想找適合的字體，可以先翻英文字體下載與襯線非襯線推薦。
載入速度之所以與字體綁在一起，是因為外嵌字體會拉長 Largest Contentful Paint 指標。Google 官方在 web.dev 與 Core Web Vitals 指引中都明確指出，字體載入延遲會拉長 LCP [來源：〈web.dev — Core Web Vitals 與效能指標〉〈https://web.dev/articles/vitals〉〈2024〉]。想兼顧好看與速度，可以研究網頁字體載入優化與免費資源與本機託管 Google Fonts 加速字體載入，把字體留在自己伺服器能少一次對外請求。字體拖慢 LCP，最終會反映在搜尋結果頁的能見度上，想弄懂搜尋結果頁的組成，可先看SERP 搜尋結果頁的組成與元素介紹。
字體選對、版面還是亂，是因為真正的分水嶺在層級對比與留白節奏。一個只用黑體的設計，只要行距、字級差、色塊拿捏得當，照樣能做出高質感；反之用了昂貴字體卻沒有節奏，看起來只會更雜。先把可讀性骨架搭起來，再談創意裝飾，這個順序別顛倒。需要把網站整體字體設定跑完一遍，可以看網站自訂字體上傳與格式轉換教學。
留白與一行字數
中文正文一行建議落在 28 到 40 字之間，過長會讓眼睛疲勞、過短會打斷閱讀流暢度。留白則是讓重點呼吸的空間，屬於主動的設計手段，並非浪費掉的空白，它是引導視線、區隔區塊、突顯重點的工具，很多人卻把它誤解成「沒塞滿」。
單行過長，超過 40 字時，讀者換行容易跳錯行、失去耐心。單行過短，低於 20 字時，句句斷裂、閱讀節奏被打散，這種長度適合詩或標語，不適合正文。中文因為方塊字特性，理想行寬比英文略窄，桌面版行寬約 600 到 700px 常被視為舒適區。想看更多排列案例，可以對照實用網頁排版設計範例與圖文排列技巧。
| 一行字數 | 閱讀感受 | 適用場景 |
|---|---|---|
| 低於 20 字 | 節奏破碎、斷句感重 | 詩、標語、社群短句 |
| 28 到 40 字 | 流暢、換行不費力 | 正文、文章、說明 |
| 超過 40 字 | 易跳行、眼睛疲勞 | 不建議用於正文 |
留白不是留空。很多人怕留白會讓版面看起來空洞，於是把資訊塞滿，結果讀者反而想逃。手機版要重新評估行寬與字級，不能直接套桌面的數值，桌面 35 字舒服，手機可能要降到 20 到 25 字才好讀。留白比例跟整體排版的視覺層次綁在一起，想建立系統化的層級觀念，可以搭配色彩學與對比色互補色配色技巧與網頁設計配色的步驟與方法一起看，顏色與留白都是控制視線流動的工具。
層級對比靠字級與字重
用「字級落差」和「字重對比」把資訊分出主從，重點放大加粗、次要縮小變細，就能讓讀者一眼看到重點。這是比顏色更有效的視覺引導手法，因為字重比顏色更穩定，用粗體強調比用鮮豔色更不容易出錯、也更專業。
層級對比是排版的視覺骨架。標題、副標、正文、註解這四層要有明顯的級距差，字級落差建議至少 1.5 到 2 倍以上才看得出主從，只差 2 到 4pt 等於沒做對比。這個級距觀念也是判斷排版好壞的快速檢查點，層級扁平的版面，讀者根本分不出哪個是重點。
| 層級 | 建議字級 | 字重 | 角色 |
|---|---|---|---|
| H1 主標 | 32 到 40pt | Bold | 頁面主題 |
| H2 副標 | 20 到 24pt | Semibold | 區塊標題 |
| 正文 | 14 到 16pt | Regular | 主要內容 |
| 註解 | 12pt | Light | 補充說明 |
對比要做在「關鍵少數」上，全部都強調等於沒有強調。電商折扣、限時訊息常用大字加粗體強調數字與金額，讓讀者一秒掌握誘因，這也是折扣頁的字級對比通常比文章頁誇張的原因；不過要克制，每個字都加粗，讀者反而抓不到重點。要做會帶來轉換的強調，可以參考CTA 按鈕設計提升轉換率的方法與Landing Page 設計原則與轉換優化。
很多新手一想到強調就用紅色、橘色，結果配色失控、版面變俗。字重之所以比顏色穩定，原因就在這裡，配色風險偏高時，建議先用粗體、大字處理層級，等骨架穩了再加顏色點綴。層級對比做在關鍵少數上，是新手與設計師最明顯的分界。想用工具輔助調字級，Figma 網格系統與響應式排版設定與Figma UIUX 設計入門完整教學能把字級系統化。
排版品質自評表：用十個指標檢測你的版面
前面把行距、字級、留白、層級分開談，真正上線前需要把它們整合成一份可勾選的檢測表。這份自評表把抽象的「看起來專不專業」拆成十個可量化的指標，每項給 0 到 2 分，總分 20 分。滿 16 分以上屬於可直接上線的穩定版面，12 到 15 分需要回頭調整骨架，低於 12 分代表問題出在順序，先把創意裝飾全部拿掉、從可讀性重做。
| 指標 | 0 分 | 1 分 | 2 分 |
|---|---|---|---|
| 行距倍數 | 低於 1.3 或高於 2.2 | 1.3 到 1.4 | 1.5 到 2.0 |
| 字級落差 | 層級間僅差 2 到 4pt | 落差 1.2 到 1.4 倍 | 落差 1.5 倍以上 |
| 一行字數 | 低於 20 或高於 45 | 20 到 27 或 41 到 45 | 28 到 40 |
| 留白比例 | 資訊塞滿、區塊相連 | 有留白但不一致 | 主動留白、區塊清楚 |
| 字體數量 | 超過 4 種 | 3 種 | 1 到 2 種 |
| 對齊邏輯 | 左中右混用無章法 | 大致一致有例外 | 全頁統一一套規則 |
| 字重層級 | 全部 Regular | 有粗細但不連貫 | 四層字重清楚 |
| 強調密度 | 每段都加粗上色 | 強調點略多 | 只強調關鍵少數 |
| 手機可讀性 | 直接套桌面數值 | 有調但不完整 | 行距行寬重新校準 |
| 載入影響 | 多個外嵌字體未壓縮 | 部分優化 | 字重精簡、格式現代 |
這份表格的價值在於把「感覺」轉成「分數」。新手常遇到的困境是看著自己的版面說不出哪裡怪，逐項打分之後，低分的項目就是具體的修正起點。把零分的項目先拉到一分，往往比把已經兩分的項目再雕花更有效，因為版面的整體觀感被最弱的一環決定。排序上建議先處理行距與字級落差這兩項骨架指標，再處理留白與對齊，最後才碰字體數量與強調密度這類裝飾指標，骨架沒穩之前，任何裝飾調整都會被推翻，等於白做工。
以一個月流量約 3 到 8 萬工作階段的內容站為例，這類網站常見的狀況是排版沒有統一系統，每篇文章由不同作者或不同時期套用各自習慣的字級與留白。依這類站的典型表現，逐項套上面那份自評表，往往行距倍數與字級落差兩項直接落在一分甚至零分，強調密度因為每段都加粗反而互相抵銷，總分大約落在 9 到 13 分之間，正好卡在「需要回頭調整骨架」的區間。實務上常見的決策是把這份表格轉成全站共用的樣式規範，先把行距統一鎖在 1.6 到 1.8 倍、字級落差拉到 1.5 倍以上，再要求所有作者遵守同一組數值，分數通常能在兩到三輪調整後推進到 15 分以上。具體落地的做法是先挑一篇流量穩定的代表性文章當範本，把它的字級階層、留白區間、強調密度寫成幾條可量化的規則（例如 H2 與正文落差至少 1.5 倍、段落之間留白等於兩個行高），再讓其餘作者依範本對齊，避免各自憑感覺調。這類站在套用規範後最容易反彈的通常是習慣寫長段落的作者，因為長段落會撐爆原本的行寬上限，這時較務實的做法是要求作者把超過五行的小節拆成兩段，骨架才能守住。不過也要誠實說，這個分數本身不是目的，分數拉高後若停留時間與滾動深度沒有對應改善，代表問題不在排版骨架而在內容本身的資訊密度，這時繼續雕數值的邊際效益會快速遞減，回頭檢視內容結構反而更有效。換句話說，這份自評表是把模糊的版面判斷變成可勾選的清單，但它只能解決「排版骨架」這一層，無法單獨撐起整體閱讀體驗。
行動優先：手機排版的特殊考量
手機排版不能直接套桌面的數值，這在前面已經反覆提到，這裡把它獨立談清楚。手機螢幕窄、視野小、使用者多半在通勤或碎片時間閱讀，這些條件會放大每一個排版失誤。根據 Statista 的統計，2026 年第一季行動裝置（不含平板）佔全球網站流量的 52.27% [來源：〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]，也就是說超過一半的讀者是用手機看你的版面，手機排版做不好等於把過半流量推開。
手機排版的調整方向有幾個重點。字級建議比桌面略大，正文從桌面的 14pt 提到 16pt，讓拇指距離螢幕的閱讀距離下文字仍然清楚。行距倍數比桌面再放大 0.1 到 0.2 倍，給窄螢幕更多喘息。一行字數從桌面的 28 到 40 字降到 20 到 25 字，避免單行在窄螢幕被壓縮到難以換行。留白比例反而要拉大，因為手機上的密集資訊更容易造成視覺疲勞。
| 排版項目 | 桌面建議 | 手機建議 | 調整理由 |
|---|---|---|---|
| 正文字級 | 14 到 16pt | 16 到 18pt | 閱讀距離較遠、螢幕較小 |
| 行距倍數 | 1.5 到 1.8 倍 | 1.6 到 2.0 倍 | 窄螢幕需要更多呼吸 |
| 一行字數 | 28 到 40 字 | 20 到 25 字 | 避免單行過長難換行 |
| 留白比例 | 適中 | 放大 | 降低小螢幕資訊密度 |
| 層級落差 | 1.5 到 2 倍 | 1.4 到 1.6 倍 | 手機字級上限有限 |
手機排版的另一個關鍵是觸控目標。按鈕、連結、可點擊的 icon 要預留足夠的點擊範圍，建議至少 44x44px，間距也要拉開避免誤觸。這雖然屬於互動設計範疇，但會直接影響排版的留白規劃，因為觸控目標的尺寸會佔用版面空間。把可讀性數值與觸控目標一起規劃，手機版才會同時好讀又好用。
載入速度在手機上更敏感。行動網路比家用寬頻不穩定，外嵌字體與大圖對手機使用者的傷害更大。字體建議只載入實際用到的字重，圖片改用 WebP 並依照手機螢幕提供合適解析度。Google 在 Core Web Vitals 指引中明確把行動體驗列為排名訊號 [來源：〈web.dev — Core Web Vitals 與效能指標〉〈https://web.dev/articles/vitals〉〈2024〉]，手機排版顧好了，連帶搜尋能見度也會受益。
骨架穩了之後的進階層次手法
骨架穩固後，可以疊上幾種進階手法把層次再拉開：英文小字點綴、重複文字營造衝擊、文字交錯製造動感、底部色塊凸顯訊息。這幾招可以組合，但不要同時全用，否則畫面會失去焦點，拿捏比例才是關鍵。下表把四者放在「適用情境」與「風險」兩個軸上看，比逐條背誦更能在實作時快速判斷該用哪一招。
| 手法 | 適用情境 | 主要風險 |
|---|---|---|
| 英文小字點綴 | 專業感不足、想增加資訊層次 | 比例失控會搶走主元素風頭 |
| 重複文字 | 海報、廣告需要強烈印象 | 頻率過高只剩噪音 |
| 文字交錯錯位 | 活潑、年輕品牌 | 嚴謹正式風格會顯得不穩重 |
| 底部色塊 | 快速凸顯促銷、CTA 訊息 | 明度對比不足反而看不清 |
英文裝飾是常見又有效的手法。透過加入較小的英文字，放在中文上下方或附近，可以讓畫面看起來更豐富，也提升專業度；但位置和比例要拿捏，文字大小要適中，不宜過大或過小，只做點綴作用。重複文字排版常被用在海報、廣告，把相同文字複製貼上、上下並排營造強烈視覺印象，也可以左右並排或斜向排列創造不同感覺，重複的頻率與數量會根據設計本身而不同，過與不及都不好。
文字交錯排列能讓設計更動感、活潑，讓文字錯位創造層次感，但要注意品牌調性，嚴謹、正式的風格就不適合，否則會顯得不夠穩重。底部色塊則是熱門又簡單的效果，在主要訊息下方搭配底色或方框就能輕鬆凸顯內容，色塊可以是矩形或圓形，矩形設圓角會更圓滑，配色可用品牌色系強化識別，這部分搭配品牌色彩挑選與心理學應用與配色工具網站推薦會更有方向。
色塊配色的關鍵在於對比。底色與文字色要拉開明度差，深底配淺字、淺底配深字，不然重點反而看不清楚。對色相環與互補色有基本認識，配色比較不會失手，可以參考色相環配色的實戰觀念。如果是電商或活動頁，色塊常搭配 CTA 使用，把促銷訊息框出來引導讀者點擊，這時候可以看網站促銷彈窗的設計與製作與網站通知列與置頂推播橫幅。
圖文搭配：icon 與圖片怎麼插進文字裡
排版時圖片和 icon 要怎麼放才不擠？圖片與 icon 要和文案內容相關、配色大小和諧，並在周圍預留足夠留白間距，避免與文字黏在一起造成不易讀；選用的素材必須與訊息密切相關，無關的裝飾性素材反而會干擾理解。
整組 icon 來自同一系列很重要，這是圖文搭配裡最容易被忽略的一條。很多人東拼西湊，線稿 icon 配填色 icon，視覺風格不統一，看起來就像貼紙亂貼；找 icon 的時候直接鎖定同一個素材包，能省下後續統一風格的麻煩，免費 icon 圖示素材網站與商用免費圖庫與素材資源有很多系列化的選擇。圖文搭配的進階版是 Bento Grid 那種格狀配置，Bento Grid 創意版面配置手法有詳細介紹。
網頁圖片還要兼顧壓縮與格式。大圖會拖慢載入速度，直接影響 Core Web Vitals 與 SEO [來源：〈web.dev — Core Web Vitals 與效能指標〉〈https://web.dev/articles/vitals〉〈2024〉]。上傳前先用工具壓縮，並選擇現代格式如 WebP，這部分可對照圖片壓縮工具讓網站飛快載入、圖片 SEO 優化與命名壓縮技巧與WordPress 圖片優化的完整步驟。
新手常見排版錯誤與檢查清單
新手做排版最常見的問題集中在字體用太多、沒有層級對比、留白不足這幾項，上線前用一份檢查清單逐項確認，能避免八成以上的業餘感。這些錯誤看似小事，疊起來就會讓版面從「還不錯」變成「很業餘」。
| 常見錯誤 | 症狀 | 修正方向 |
|---|---|---|
| 字體過多 | 一個版面超過 3 種字體，視覺破碎 | 控制在 2 種以內，用字重做層級 |
| 層級扁平 | 標題正文級距太接近，分不出主從 | 字級落差拉到 1.5 到 2 倍 |
| 留白不足 | 資訊塞滿，讀者想逃 | 主動留白區隔區塊 |
| 對齊混亂 | 左對齊、置中、右對齊混用沒邏輯 | 統一一套對齊邏輯 |
字體過多是新手最常踩的坑，一個版面超過 3 種字體就開始破碎，控制在 2 種以內最安全。層級扁平也很致命，標題正文級距太接近，讀者分不出主從，重點被淹沒。留白不足則是把「豐富」誤解成「塞滿」，其實留白才是高級感的來源。對齊混亂是另一個隱形殺手，左對齊、置中、右對齊混用沒邏輯，版面會失去秩序。
上線前的檢查清單可以這樣列：字體數量、層級級距、留白比例、對齊一致性、行動版可讀性，五項逐一過。這份清單不只適用海報，也適用網頁，只是網頁還要多查載入速度與響應式。想避開更多設計地雷，推薦讀自架網站常見的網頁設計地雷與給品牌網站的關鍵設計建議；需要完整設計流程的話，網頁設計從零到一的完整指南能帶你走一遍。
排版的本質是把資訊排出層級，讓讀者用最少的力氣抓到重點。三個關鍵數值記下來就好：行距 1.5 到 2 倍、字級落差至少 1.5 倍、一行 28 到 40 字，這三組數字顧到了，剩下的裝飾才有發揮空間。想持續精進，可以追蹤最新網頁設計趨勢與風格解析與網頁設計靈感網站推薦，多看好作品才能內化判斷力。
排版顧好了，下一步通常是讓網站在搜尋結果被看見。想系統化學會從產業分析到落地執行的排名策略，SEO 排名攻略實戰課程是值得投入的進修選擇；品牌要追蹤自己在網路上的能見度與聲量，則可以靠Ahrefs Brand Radar 品牌偵測雷達把數據看清楚。如果你是用 WordPress 架站，排版還能借助Gutenberg 區塊編輯器強化頁面設計與WordPress 視覺化頁面編輯器比較快速套出有骨架的版面。
設計新手想快速產圖，Canva 新手必學的設計技巧與Canva Pro 專業設計技巧是很好的入門；想找出別人網站用的字型，用字體辨識工具找出網頁用的字型很方便；要分辨螢幕與印刷的色彩模式，RGB 與 CMYK 色彩模式差異能避免印出來變色。原型設計階段則可以搭配UI 原型設計要點與工具推薦，或比較AWD 自適應與 RWD 響應式設計比較來決定方向。這些工具加上前面的數值骨架，新手也能穩定做出專業版面。
排版疑難排解：版面還是怪，問題出在哪
骨架數值都照建議調過了，版面看起來還是怪，這時候要往數值以外的環節找。排版問題有時候出在素材本身、有時候出在結構比例、有時候出在內容長度，逐一排除才能定位。下面把幾個最常見的「數值都對了卻還是不對」的情況整理成排查路徑。
- 單一區塊孤立好看，整頁放一起就亂：問題多半出在區塊之間的節奏不一致。每個區塊各自用了不同的留白量或標題級距，拼起來自然失去整體感。修正方式是回到全頁統一一套留白系統與字級階層，讓所有區塊遵守同一組數值。
- 字體沒換，看起來卻變鬆散：通常是不小心動到行距或字距。行距被調寬、或字距被拉開，都會讓原本緊實的版面變鬆。把行距與字距回到原設定，再逐項比對。
- 標題與正文黏在一起分不開：留白不足是主因。標題與其下方段落之間的間距，應該大於段落內部的行距，這樣層級才會跳出來。把標題下方的留白加大到段落行距的 1.5 倍以上。
- 手機版字全部擠在一起：直接套了桌面的一行字數。手機要把一行字數降到 20 到 25 字、行距放大 0.1 到 0.2 倍，並重新檢查留白。
- 配色看起來濁或俗：問題往往不在顏色本身，而在明度對比不足或強調色用太多。先檢查文字與背景的明度差是否足夠，再把強調色收斂到一種主色加一種輔色。
這個排查路徑的核心原則是：懷疑數值之前，先懷疑一致性。同一份設計裡只要有一個區塊用了不同的留白或字級規則，就會破壞整體節奏。排版的最終成品是「整頁的觀感」，單一區塊漂亮不等於整頁專業，這也是為什麼專業設計師會用設計系統把數值寫死，確保每個區塊都遵守同一套規範。
另一個容易被忽略的環節是內容本身。排版再好，遇到過長的段落、過多的重點、過密的資訊，骨架都會被撐垮。編輯與排版是兩面一體的工作，適度拆分長段落、精簡重複資訊、把重點收斂到少數幾個，排版數值才有發揮空間，這也是為什麼優秀的內容網站會把寫作與排版交給同一個人把關。
常見問題
新手排版最容易犯什麼錯？
最常見三個：字體用太多、沒有層級對比、留白不足。上線前用字體數量、層級級距、留白比例、對齊一致性、行動版可讀性五項清單檢查，能排除大多數業餘感。
為什麼數值都調對了，版面看起來還是亂？
通常是各區塊之間的留白與字級不一致所造成。每個區塊各自用不同的留白量或標題級距，拼起來就會失去整體節奏。修正方式是回到全頁統一一套留白系統與字級階層，讓所有區塊遵守同一組數值；若數值已經一致，就檢查內容長度與重點密度，適度拆分長段落、收斂重點。
手機排版的數值要怎麼調？
手機正文字級建議比桌面略大，從 14pt 提到 16 到 18pt；行距倍數比桌面再放大 0.1 到 0.2 倍；一行字數從 28 到 40 字降到 20 到 25 字；留白比例放大；層級落差可略微下修到 1.4 到 1.6 倍。觸控目標至少預留 44x44px 並拉開間距避免誤觸。
網頁排版和平面排版有什麼不同？
網頁排版重滾動節奏與手機適配，要顧載入速度與響應式；平面排版重第一眼的視覺張力，要在三秒內抓住目光。兩者評判標準不同，不能直接套同一組數值。
文字底部色塊怎麼配色才好看？
色塊與文字要拉開明度對比，深底配淺字、淺底配深字，並用品牌色強化識別。形狀可選矩形、圓角或圓形，矩形設圓角會讓視覺更圓滑。