字級是什麼？從Px、Pt到Em，搞懂字體大小設定的學問

Byadmin

「哎唷！這個字怎麼這麼小？眼睛都要脫窗了啦！」相信不少朋友在使用電腦或手機時，都曾遇過這樣的困擾。明明網頁看起來還不錯，但點進文章一看，字體小到讓人抓狂，這時候，你可能會開始煩惱：「到底這個字的大小是怎麼決定的？字級是什麼？我該怎麼調整才能看清楚呢？」別擔心，今天我們就來好好聊聊這個看似簡單，實則蘊藏不少學問的「字級」！

簡單來說，字級（Font Size）就是指字體的大小。它決定了文字在畫面上呈現出來的尺寸，直接影響到閱讀的舒適度和資訊的傳達效率。對於經常接觸設計、排版、網頁開發，甚至只是想讓電腦螢幕顯示更友善的朋友來說，理解字級的概念和單位，是邁向「看得清楚、看得舒服」的第一步。

為什麼字級很重要？

很多人可能覺得，字級不就是越大越清楚嗎？其實不然。一個恰到好處的字級設定，是影響閱讀體驗的關鍵。想像一下，如果一篇文章的字級太小，你可能需要瞇著眼睛、湊近螢幕才能勉強辨識，這不僅會造成眼睛疲勞，還會讓人失去閱讀的興致，大大降低資訊的傳達效果。反之，如果字級大得誇張，雖然看得很清楚，但可能幾句話就擠滿一整頁，顯得畫面擁擠、不專業，而且還浪費空間。

特別是在數位時代，我們每天接觸的資訊量爆炸，無論是網頁、App、電子書，甚至是社群媒體上的貼文，都需要依賴文字來傳達內容。字級設定是否得當，直接關係到使用者能否順暢地獲取資訊，進而影響到網站的停留時間、App的使用黏著度，甚至是產品的銷售轉換率。所以說，字級是什麼，這問題的答案，絕對不只是一個數字那麼簡單！

字級的單位有哪些？

聊到字級，就不能不提到它背後的單位。這些單位就像是丈量尺寸的尺，只是它們所對應的基準不太一樣。最常見的，大概就是「像素（px）」和「點（pt）」了。

  • 像素（px）：這是電腦螢幕上最基礎的顯示單位。螢幕是由無數個小點組成的，每一個小點就是一個像素。像素是相對單位，它的實際大小會因為螢幕的解析度（DPI/PPI）而有所不同。也就是說，同樣是16px的字，在不同解析度的螢幕上，看起來的大小可能會有差異。在網頁設計中，像素是目前最常用來設定字級的單位，它能確保在各種裝置上的顯示一致性，但也可能帶來部分使用者覺得字體太小或太大而難以調整的問題。
  • 點（pt）：這個單位歷史比較悠久，主要用於印刷排版。一個點（point）通常被定義為 1/72 英吋。所以，在印刷品上，24pt 的字體大小是固定且精確的。對於需要精確印刷效果的設計師來說，點是非常重要的單位。然而，由於它和螢幕解析度沒有直接的關聯，在網頁設計中較少直接使用。
  • Em（em）：這是一個相對單位，它相對於父元素（或自身）的字級大小。例如，如果父元素的字級是16px，那麼在其中設定1.2em，就等於16px * 1.2 = 19.2px。Em 的好處在於，如果你改變了父元素的字級，子元素的字級也會隨之等比例縮放，非常適合用來建立具有彈性、響應式的排版結構。
  • Rem（rem）：與Em類似，Rem 也是相對單位，但它總是相對於根元素（通常是 `` 標籤）的字級大小。這個設計非常聰明！只要設定好根元素的字級，網頁上所有使用 Rem 作為字級單位的元素，都會以一個統一的基準進行縮放。這使得調整全站的字體大小變得非常容易，大大提升了網頁的可訪問性。
  • 百分比（%）：與Em類似，百分比也是基於父元素的字級大小來計算。例如，120% 就代表父元素的 1.2 倍。

對於一般使用者來說，最常接觸到的可能就是像素（px）了。但如果你對網頁排版或設計有進一步的了解，Em 和 Rem 的概念就顯得非常重要，它們能幫助我們打造更具彈性和響應式的網頁。

常見字級設定的困擾與解決之道

了解了字級的單位，我們再來看看大家在實際使用時，常會遇到的幾個問題：

1. 字體太小，眼睛吃力怎麼辦？

這是最常見的問題了！尤其是一些內容為主的網站，如果字級設定不當，真的會讓人卻步。

  • 瀏覽器縮放功能：這絕對是最直接有效的方法。
    • 在電腦上，通常是按住 `Ctrl` 鍵，然後滾動滑鼠滾輪，或是按 `Ctrl` 加上 `+` (放大) / `-` (縮小)。
    • 在手機上，則是透過雙指縮放的觸控手勢。
  • 調整系統字級設定：大多數作業系統和行動裝置都提供了調整系統字級大小的功能。例如，在 Windows 中，你可以在「顯示設定」裡調整文字、應用程式和項目的大小；在 macOS 中，可以在「系統設定」的「顯示器」裡調整文字大小。在 iOS 或 Android 手機上，也都有類似的選項，可以設定「文字大小」或「顯示與文字大小」。
  • 網站本身的字級調整選項：有些比較貼心的網站，會在介面中提供字級調整按鈕（例如「A+」、「A-」），讓使用者可以直接選擇適合自己的字體大小。

2. 字體大小不一致，看起來亂糟糟？

這通常是網站或文件設計上的問題。標題、內文、說明文字，它們的字級大小應該有明確的層次和區別，但又不至於差距過大而顯得突兀。專業的排版設計會遵循一定的字級比例和規範，讓整體視覺更和諧。

我的看法是，在網頁設計中，過度追求花俏的字體效果，而忽略了字級的基本設定，往往是得不償失的。使用者最在意的，還是能不能順暢地閱讀內容。因此，選擇一個清晰易讀的字體，並搭配合適的字級和行高，是提升使用者體驗的根本之道。

3. 印刷品和螢幕上的字級有什麼差異？

前面提過，點（pt）是印刷常用的單位，而像素（px）是螢幕顯示的單位。雖然我們可以在設計軟體中互相轉換，但需要注意的是，印刷品的解析度和螢幕的解析度是不同的。同樣設定20pt的字，在螢幕上可能看起來比印刷品上的20pt字來得「佔空間」，這也解釋了為什麼有些網頁看起來字體有點「太大」，而同樣字級的內文在印出來的文件上卻剛剛好。

字級設定的黃金法則（以網頁設計為例）

對於網頁設計師或前端開發者來說，如何設定一個兼顧美觀與實用的字級，是個重要的課題。以下提供一些常見的建議和考量：

1. 選擇合適的基礎字級

目前主流的建議是，網頁的基礎字級（通常設定在 “ 或 `` 標籤上）建議至少設定為 16px。這是因為：

  • 可訪問性：16px 被認為是大多數使用者預設的字體大小，更容易閱讀。
  • 響應式考量：使用 Rem 或 em 作為其他元素的字級單位時，有一個較大的基礎字級，更容易進行比例縮放。

2. 建立字級層次

不同的內容元素，應該有不同的字級，以建立清晰的視覺層次：

  • 標題（H1, H2, H3…）：應該比內文更大，並按照重要性遞減。H1 通常是頁面主標題，字級最大。
  • 內文（Paragraph）：最主要的內容區域，字級應該足夠大，以便舒適閱讀。
  • 輔助文字（說明、圖說、時間戳等）：可以比內文小一些，但仍需保持可讀性。

我的經驗是，在設定字級層次時，可以參考一些「字級系統」（Typography Scale）或「黃金比例」（Golden Ratio）的概念。它們能幫助你產生一套有規律、視覺上和諧的字級組合，而不是隨意設定。

3. 考量行高（Line Height）

光有字級還不夠，字與字之間的垂直距離，也就是行高，同樣重要。太小的行高會讓文字擠在一起，閱讀起來很吃力；太大的行高則可能顯得鬆散、缺乏連貫性。

一般來說，建議內文的行高設定為字級的 1.5 到 1.8 倍。例如，如果內文是 16px，行高可以設定為 24px 到 28.8px。

4. 選擇易讀的字體

有些字體天生就比其他字體更容易閱讀。對於內文，建議選擇無襯線字體（Sans-serif fonts），例如 Arial, Helvetica, Roboto, Noto Sans 等，它們在螢幕上通常更清晰。而襯線字體（Serif fonts），如 Times New Roman, Georgia 等，則更常用於標題或特定風格的設計，它們有時在小字級或低解析度螢幕上可能顯得模糊。

5. 進行跨裝置測試

設定好字級後，一定要在各種不同的裝置和螢幕尺寸上進行測試，確保字體大小在各種情況下都能保持良好的可讀性。這也是響應式設計（Responsive Design）的重要一環。

關於字級，你可能還會想知道

針對大家在網路上常提出的疑問，這裡也提供一些更詳細的解答：

Q1：為什麼有時候網頁字體放大後，版面就跑掉了？

這通常是因為網頁的設計在排版時，沒有考慮到字級的彈性。有些設計師在 CSS 中直接使用固定的像素值（px）來設定寬度、高度或邊距，當使用者放大了字級，這些固定的尺寸無法隨之調整，就可能導致元素之間的距離變形，甚至疊加在一起，造成版面錯亂。

要解決這個問題，可以使用相對單位，如 rem、em、百分比 (%) 等來設定尺寸，或是利用 CSS 的 Flexbox、Grid 等彈性佈局方式，讓網頁元素能夠根據內容和螢幕尺寸自動調整。

Q2：為什麼有些網站的字體看起來特別「細」？

這跟字體的「字重」（Font Weight）有關。字體除了有大小（字級），還有粗細之分，常見的有 Light (細)、Regular (標準)、Medium (中等)、Bold (粗) 等。如果一個字體只有較細的字重，或是網頁設計師刻意使用了較細的字重，那麼即使字級不算小，看起來也會比較「細」，這時候放大字級或調整系統字級設定，可能會有幫助。

舉個例子，同樣是 16px 大小，一個是 Light 字重，一個是 Bold 字重，給人的視覺感受會差很多。在選擇字體和設定字重時，也要考量到目標受眾的閱讀習慣和裝置環境。

Q3：有沒有推薦的字級比例？

確實有一些常用的字級比例系統，它們基於數學或設計原理，能產生一系列和諧的字級。其中，最常見的可能是「黃金比例」和「和諧比例」。

黃金比例 (Golden Ratio)：約為 1.618。如果你將內文字級設定為 16px，那麼標題字級可以通過乘以 1.618 來計算，例如 16px * 1.618 ≈ 26px。

和諧比例 (Minor Third / Perfect Fourth / Perfect Fifth)：這些比例來自音樂理論，也被應用於視覺設計。例如：

  • Minor Third: 1.25 (例如 16px 乘以 1.25 得到 20px)
  • Perfect Fourth: 1.333 (例如 16px 乘以 1.333 得到 21.3px)
  • Perfect Fifth: 1.5 (例如 16px 乘以 1.5 得到 24px)

不過，我的看法是，這些比例提供的是一個起點和參考，最終的字級設定還是要根據實際的設計風格、內容屬性以及目標受眾的閱讀習慣來進行調整。沒有絕對正確的比例，只有最適合的比例。

Q4：為什麼我的螢幕看起來字體很清楚，但列印出來就糊糊的？

這再次點出了螢幕顯示和印刷之間的差異。螢幕是點陣式的，解析度（PPI, Pixels Per Inch）是影響清晰度的重要因素。而印刷品則是以實體墨點來呈現，其解析度（DPI, Dots Per Inch）往往比螢幕更高，而且印刷的原理也和螢幕發光不同。

我的建議是，在進行印刷設計時，盡量使用向量圖形（如 Illustrator 製作的圖案），並選擇適合印刷的字體。對於字級，由於印刷通常需要更高的解析度，有時字級的設定可以相對螢幕顯示稍微小一點，但同樣要考量到閱讀性。

總而言之，字級是什麼，它不僅是一個冷冰冰的數字，更是影響使用者體驗、資訊傳達效率的關鍵元素。從像素、點到相對單位，從網頁設計到印刷排版，了解這些單位和原則，能幫助我們更專業、更精確地處理文字大小，讓資訊傳遞更加順暢，讓閱讀更加愉悅。

字級是什麼