使用易讀的字型大小

當 PageSpeed Insights 偵測到網頁中的文字太小而不易閱讀,就會觸發這個規則。

總覽

您可以使用 4 種常見單位來指定網頁字型大小,分別是像素 (px)、點 (pt)、EM (em) 和百分比 (%)。

  • 像素指的是「CSS 像素」,會隨裝置尺寸和螢幕密度而異。
  • 點的定義與像素相關,1 像素等於 0.75 點*
  • EM 和百分比是「相對性」單位:兩者與繼承自字型的大小和屬性成相對關係。1 EM 等於 100%。

* 請見附註資料。

此外,檢視區也會影響字型在行動裝置上的縮放方式。沒有適當設定檢視區的網頁在行動裝置上按比例縮小時,網頁上的文字常由於太小而變得不易閱讀。

建議

首先,請設定一個檢視區,確保字型在各種裝置上都能按預期縮放。當檢視區設定完成,再實作以下額外建議的措施。

  1. 使用 16 CSS 像素作為基底字型大小,並且視所用字型的屬性調整大小。
  2. 使用與基底大小的相對關係來定義排版縮放比例。
  3. 每排文字之間需留有垂直空間,而且可能需根據字型做調整。一般建議使用瀏覽器預設的行高 1.2em。
  4. 限制使用的字型數量和排版縮放比例:太多的字型和大小易產生雜亂感,使網頁版面配置過於複雜。

例如,下方 CSS 程式碼片段定義的基準字型大小是 16 CSS 像素,「small」CSS 類別的字型大小是基準字型的 75% (12 CSS 像素),「large」CSS 類別的字型大小是基準字型的 125% (20 CSS 像素):

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

如需更多行動裝置所適用字型方面的建議,請參閱 Android 排版指南

其他資訊

請務必仔細閱讀 CSS 2.1 規格,確實瞭解各單位長度的定義。該網頁內含許多這裡未提及的單位,包括英寸、公分、公釐和皮卡。此外,有一點很容易忽略,就是 CSS 裡的英寸不一定等於物理英寸。

所有絕對單位彼此的關係都是固定的。1 像素是 0.75 點;1 點是 1/72 英寸;1 英寸是 2.54 公分;以此類推。不過,這些單位的「定位」最終都是由裝置決定。例如列印在紙上時,1 英寸的定位就是物理的 1 英寸,而其他單位的定位均可由此推得。然而在手機畫面上,每個裝置的定位都有一個所謂的「參照像素」,1 CSS 像素是根據這個參照像素來定位,其他單位 (英寸、公分等) 的長度則是相對於 CSS 像素來調整。因此,1 CSS 英寸在手機上的顯示大小,一般會比真實物理英寸「小」一些。

基於上述原因,我們建議您使用像素來定義字型大小。不然,部分設計師和開發人員看到使用英寸或點時可能會產生誤解,因為雖然這些單位也是物理尺寸,但是並不一定等同於現實世界中的尺寸。請將像素想成會根據不同裝置改變顯示大小的單位。

最後,每個字型都有大小、間距等特性。在預設狀態下,瀏覽器會顯示 16px (CSS 像素) 的字型。這個預設值適用於大部分情況,只有特定字型可能要再調整,也就是說,您可以因應字型的不同屬性,改變預設字型的大小。設定預設大小後,請定義預設像素大小和較大與較小字型的相對關係,以便調整網頁上主要、次要文字的字型大小,以及其他類型內容的大小。

部分行動瀏覽器會試圖為沒有設定適當檢視區的網頁調整字型大小,但由於每家瀏覽器的縮放行為各不相同,因此最好不要仰賴瀏覽器來為行動裝置顯示清楚的字體。PageSpeed Insights 呈現的是您網頁上文字的原貌,並未經過瀏覽器縮放調整大小。