文章字型放大後為什麼反而難讀？我調整手機與電腦排版的過程

字型變大以後，頁面反而有點奇怪

這次調整是從一個很簡單的想法開始的。

我覺得文章正文字型有點小，希望讀者使用電腦和手機時可以看得更輕鬆，於是把普通文章的字型放大。

修改完成後，文字確實更加明顯，但是我重新開啟文章時，卻感覺整個頁面有點奇怪。

每一行能夠放入的文字變少，部分英文、數字和中文混合的句子會在不自然的位置換行。原本看起來很短的段落，放大後佔用了更多高度，連續閱讀時需要不斷向下滾動。

當文章中出現以下內容時，這種感覺特別明顯：

• OneDrive
• node_modules
• package.json
• 檔案路徑
• 英文網址
• 較長的數字
• 中文和英文混合的句子

這些文字通常比普通中文詞語更長。如果字型變大，但文章寬度和換行方式沒有一起調整，就容易出現一行只剩幾個字，或者英文被擠到下一行的情況。

我一開始以為只要繼續縮小一點字型就能解決。但是仔細比較後，我發現問題並不只來自字型大小。

影響文章閱讀感覺的因素還包括：

1. 正文區域的最大寬度。
2. 每一行的文字數量。
3. 字型大小和行距的比例。
4. 段落之間的距離。
5. 中文與英文的換行方式。
6. 圖片寬度和正文寬度是否一致。
7. 手機與電腦是否使用相同的設定。

這讓我明白，字型變大不一定等於更容易閱讀。

如果文章區域很寬，字型太大以後，每一行仍然可能很長；如果文章區域比較窄，字型過大又會造成頻繁換行。真正需要調整的是整套閱讀比例，而不是隻改變一個數字。

先分別觀察電腦和手機

我沒有馬上繼續修改，而是先用電腦和手機開啟同一篇文章，記錄兩個版本各自的問題。

電腦螢幕比較寬，我主要觀察每行文字是否太長、段落是否過於鬆散，以及讀到下一行時是否容易找錯位置。

手機螢幕比較窄，我則檢查標題、長英文、檔名稱和網址能否正常換行，並確認頁面沒有出現左右滑動。

把兩個版本分開觀察後，我才開始逐項調整，避免為了改善電腦版本，卻讓手機版本變得更難閱讀。

我沒有單獨調整字型大小

確認問題後，我沒有直接把字型恢復成原來的大小，而是把文章版面的幾個相關專案一起調整。

第一個專案是正文寬度。

電腦螢幕雖然很寬，但文章文字不適合從畫面左側一直延伸到右側。每一行太長時，眼睛讀到行尾後，需要移動很遠才能回到下一行開頭，閱讀較長文章時容易感到疲勞。

因此，我讓普通文章保持一個較集中的內容寬度，左右留出適當空間。圖片跟著正文寬度顯示，讓文字和圖片看起來屬於同一個內容區域。

第二個專案是字型大小。

我保留比原來稍大的正文，但沒有繼續放大到每行頻繁斷開的程度。電腦和手機也不必使用完全相同的字型設定，因為兩種螢幕的寬度和觀看距離不同。

第三個專案是行距。

字型放大後，如果行距仍然太小，上下兩行會顯得擁擠；但行距太大，又會讓同一段文字看起來彼此沒有關係。

我反覆比較後，把行距調整到能夠清楚區分每一行，同時又能保持段落完整性的程度。

第四個專案是段落間距。

我讓不同段落之間保留比普通換行更明顯的空間。這樣讀者可以快速看出一段內容在哪裡結束，下一段從哪裡開始。

處理英文和檔名稱的換行

技術文章經常出現英文套件名稱、網址和檔案路徑。這些內容未必包含適合換行的空格，因此需要特別注意。

我會使用以下幾種內容檢查排版：

• node_modules
• pnpm-lock.yaml
• AdminGalleryEdit.tsx
• mobile-article-card-link-content-mismatch
• 較長的文章網址

調整完成後，這些文字應該留在正文範圍內。即使需要換行，也不能撐開整個頁面或產生水平滾動。

圖片同樣需要檢查。圖片寬度應該跟隨內容區域縮放，高度保持原本比例，不能為了填滿畫面而被強制拉長。

經過這些調整，電腦文章的每行長度變得比較穩定，段落之間也更容易分辨。字型仍然清楚，但不會因為過度放大而讓文章顯得擁擠。

小標題和列表也需要一起檢查

正文排版調整完成後，我繼續檢查文章中的小標題、列表和程式碼文字。

如果所有內容都使用相同大小和粗細，讀者開啟較長文章時，很難快速判斷目前讀到哪個部分。因此，我讓小標題和正文保持明顯區別，但不會大到搶走文章主標題的注意力。

我的文章通常會使用以下層級：

1. 頁面頂部是完整文章標題。
2. 正文中的主要部分使用二級標題。
3. 需要進一步拆分時，再使用較小的三級標題。
4. 一般說明使用普通段落。
5. 操作步驟和檢查專案使用編號或專案列表。
6. 網址、命令和檔名稱使用不同的程式碼樣式。

編號列表需要保留足夠的上下距離。如果每個專案靠得太近，讀者容易把兩個步驟看成同一段；距離太遠，又會讓一套操作流程顯得斷斷續續。

我也檢查粗體文字有沒有使用過多。粗體適合強調重要名稱或結果，但整段文字全部加粗，會讓頁面失去重點。

手機版本需要再次實際滾動

電腦排版完成後，我使用手機從文章頂部一路滾動到推薦內容，重新檢查整個閱讀過程。

我會注意以下問題：

1. 標題是否需要過多行才能顯示完整。
2. 正文字型是否需要放大畫面才能閱讀。
3. 行距是否足夠，但不會顯得過於鬆散。
4. 長英文和網址是否留在螢幕範圍內。
5. 圖片是否完整顯示並保持正確比例。
6. 小標題與前後段落是否容易區分。
7. 編號列表是否整齊。
8. 頁面有沒有異常左右滑動。
9. 文章末尾的推薦卡片是否正常排列。

除了手機，我也會把電腦瀏覽器調整到不同寬度。這樣可以觀察頁面從寬屏逐漸變窄時，文字、圖片和推薦卡片如何重新排列。

最後採用比較平衡的版本

這次調整後，我沒有選擇最大的字型，也沒有恢復成最小的字型，而是保留一個在手機和電腦上都比較平衡的版本。

我最後確認的是整體閱讀體驗：

• 字型清楚，不需要讀者費力辨認。
• 每行長度不會過長。
• 中文和英文能夠自然換行。
• 行距足夠，段落仍然保持連貫。
• 小標題、正文和列表具有清楚層級。
• 圖片寬度與正文一致。
• 手機和電腦都沒有水平滾動。

這次經驗讓我明白，文章排版不是把字型放大就完成了。字型大小、內容寬度、行距、段落間距和響應式版面需要一起考慮。

對我來說，最實用的判斷方式不是比較某個字型數值，而是使用真實文章，在手機和電腦上完整閱讀一次。如果自己連續讀幾段就覺得眼睛容易疲勞，讀者通常也會有相同感受。

經過這次調整，文章仍然保持清楚的字型，同時減少不自然的斷行和過長段落，讓網站的原創內容更適合持續閱讀。