什麼是字型大小測試工具?

輸入任意文字,從8px到96px每個字級都能同時預覽。支援px、rem、pt單位切換,還能調整行高和字間距來精修排版。

把任意一段文字填進來,工具會在 14 種字級上同時呈現,從 8 px 的小註解到 96 px 的大標題通通涵蓋。單位可在 px、rem、pt 間切換,行高與字距即時調整。當你想看清字級到哪一檔開始難讀,或按鈕文字到底用 14 px 還是 16 px 之前,在這裡直接看到答案,再回去動 CSS 也不遲。

使用方法

  1. 步驟一——輸入或貼上您想測試的文字內容。
  2. 步驟二——調整字級範圍和單位(px、rem或pt)進行預覽。
  3. 步驟三——並排比較所有字級,為您的設計挑選最佳選項。

何時使用

  • 挑導覽列文字尺寸:既要看得清,又不能把橫條塞滿。
  • 比較 14 px 與 16 px 內文,解決設計團隊的口味之爭。
  • 把設計稿裡的 px 換算成 rem,讓頁面尊重使用者的字級偏好。

結果

測試導覽標籤:輸入「儀表板」,在12px、14px和16px下比較,找到最易讀又不浪費空間的字級。

常見問題

網頁字級該用 px、rem 還是 pt?
內文和元件建議用 rem:它會跟著使用者根字級縮放,對無障礙非常重要。框線或極小圖示可以繼續用 px,以保留像素精準。pt 主要是印刷時代的單位,螢幕上不建議使用。
內文字級用多大比較合適?
網頁內文的事實基準是 16 px(1 rem)。註解或輔助標籤這類次要文字可以降到 14 px。主要內容低於 14 px 的網站通常會在無障礙審查中失分,小螢幕使用者也會吃力。
行高對可讀性影響有多大?
內文行高一般落在 1.4 到 1.6。再緊會擁擠,再鬆又會切斷段落間的視覺節奏。標題因為本身行短,可以收得更緊,大約 1.1 到 1.2 較舒適。
什麼時候要調字距(tracking)?
全大寫的標籤因為預設字距偏緊,放寬到 0.05 em 上下會舒服得多。極大展示標題則可以稍微收緊,約 –0.01 到 –0.02 em。內文一般不用動,字體設計師已經調好。
WCAG 真的規定最小字級是 16 px 嗎?
WCAG 並未訂出硬性最小值,但要求文字能放大到 200% 而排版不崩。實務上,內文從 16 px 起步並使用相對單位就能輕鬆達標。一開始就把字級壓很小,等於逼使用者去縮放,而多數人不會這麼做。

相關工具