網頁字體大小
網頁字體大小

網站設計的最佳字體大小指南(RWD 響應式網站必看!)

這篇文章將提供如何選擇和調整字體大小,以確保您的網站在不同螢幕尺寸上保持一致、清晰可讀,並提高吸引力和可訪問性。無論您是新手還是經驗豐富的設計師,這些實用建議都將有助於提升您的網站設計技能。

目錄

網頁排版可以成就或毀掉你的網頁設計,除了為您的網站確定最佳字體之外,選擇正確的字體大小也很重要,字體大小可以形成對比並幫助用戶專注於您的關鍵訊息。

然而,一種尺寸並不適合所有情況。您設計的網站可以在各種不同的瀏覽器和視窗大小上查看:筆記型電腦、平板電腦、電視、智慧型手機。因此,您需要仔細考慮字體大小,以下是需要記住的內容。

網頁設計中的字體大小

在設計中可以透過多種不同的方式及單位調整字體大小:

  • 像素(px)
  • 點 (pt)
  • em:相對單位,每個子元素透過「倍數」乘以父元素的px 值。
  • rem:相對單位,每個元素透過「倍數」乘以根元素的px 值。
  • 百分比 (%)
  • 螢幕可視範圍的寬度或高度百分比(vw 或 vh)
  • 公分 (cm)
  • 毫米(mm)
  • 英吋(in)
字體大小 google font
Google Fonts Noto Sans 繁中字型

在大多數情況下,您應該避免在網頁設計中使用公分、毫米、英吋等絕對測量值,因為它們在每種裝置上看起來都會有所不同。

像素在某種程度上是絕對大小,因為它基於用戶螢幕的像素大小。然而,使用 px 調整字體大小是一種很常見的做法,大多數網頁瀏覽器都可以讓您的設計在不同解析度下看起來相似,即使使用 px 也是如此。當考慮通常按像素進行設計的設計團隊之間的協作時,它也是一個非常易於使用的單位。

另一個選擇是使用 em 和 rem。 em 從其父級繼承其大小,而 rem 從根樣式繼承(因此,它被命名為 root em)。

所有瀏覽器中的預設字體大小通常約為 16 像素。常見的做法是將根字體大小設為 62.5%,這會將預設的 16px 轉換為大約 10px。我們這樣做是為了在使用 em 或 rem 時更容易在心理上轉換字體大小(例如 1 rem = 約 10 像素,而 1.8 rem = 約 18 像素)。這是一種方便的方法,原因有二:

  1. 像素和 rem 之間的心理轉換很容易在你的頭腦中計算出來。
  2. 用戶可以更改他們喜歡的預設字體大小,網站會自動調整以滿足他們的需求。

現在,接下來要考慮的是不同裝置上的字體大小需要不同。在桌面顯示器上有更多的空間,因此字體可以(並且應該)更大,而在行動裝置上,螢幕較小,因此應該減小字體大小,以便所有文字都可以適合頁面。

在 CSS 中,透過 Media Queries 來做到這一點。

例如,我們可以將 h1 元素的預設字體大小設為 3.5 rem。這在桌面上可能看起來很棒,但在行動裝置上它就太大了。因此我們可以有一個 Media Query ,例如:

h1 {
    font-size: 3.5rem;
}

@media only screen and (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }
}

這將根據移動視窗適當調整字體大小(假設 400px 是行動裝置的寬度)。

即使經過所有這些調整,您可能會看著螢幕並思考:此字體看起來比應有的小或大。這是由於數位字體的設計方式造成的,不同字體的上下設計通常因字體而異,這可能會使它們看起來比例不同。

電腦網頁的最佳字體大小

對於字體大小沒有確切的規則,但是在設計電腦網頁時需要考慮一些良好的做法:

  • 正文 – 字體大小應在 16 px 到 18 px 之間以確保易讀性(或使用我們上面提到的大小規則為 1.6 rem 到 1.8 rem)。如果您可以承受更大的尺寸,那麼即使是 21 px 也可以令人愉悅地閱讀。
  • 標題 – 標題應比正文大 1.96 倍左右,以形成足夠的對比。這意味著如果您使用 18 px 作為正文字體大小,那麼您將使用大約 35 px 作為標題。
  • 副標題 – 副標題應略小於標題大小,並進行一些調整,例如減輕重量以在兩者之間形成對比。例如,如果我們使用 35 px 作為標題,我們應該使用大約 30 px 作為副標題。
  • 輸入欄位 – 這些應該與正文的規則緊密匹配。
字體大小 editorx
圖片來源:Editor X

適合行動裝置的最佳字體大小

在行動裝置上,您顯示內容的空間較小。此外,用戶通常將設備放在比筆記型電腦或桌上型電腦螢幕更靠近眼睛的地方 – 這意味著您的字體可以(並且應該)比桌上型電腦上的小:

  • 正文 – 正文的字體大小應至少為 16 px。在某些情況下,您可能可以變小(例如,如果字體具有異常大的字元或您使用大寫字母),14 px 是您應該採用的最小尺寸。就上下文而言,Google 的 Material Design 建議其輔助字體大小至少為 14 px,而 Apple 的指南則使用 15 px。
  • 標題 – 標題應比正文大 1.3 倍左右,以形成足夠的對比。這意味著如果您使用 16 px 作為正文字體大小,那麼您將使用 ~21 px。這是我們在桌面上使用的 3.5rem 的縮小版。
  • 副標題 – 在這裡,這些通常會從標題大小縮小,但我們這裡有一個小問題,副標題可能看起來與正文字體大小太相似。出於這個原因,一些設計師選擇透過使用粗細、斜體和字母間距等格式來使副標題在視覺上有所不同。如果我們使用 21 px 作為標題,我們可能會選擇 18 px 或 16 px 作為副標題,但其字重比標題或正文文字輕。
  • 輸入欄位 – 這些應該與正文的規則緊密匹配。
字體大小 editorx 2
圖片來源:Editor X

RWD網頁設計的響應式字體大小


當今網頁設計中,響應式網頁設計(Responsive Web Design,簡稱RWD)已經成為不可或缺的一部分。RWD的目標是確保網站在不同尺寸的螢幕上都能夠以最佳方式呈現內容,無論是在桌面電腦、平板電腦還是手機上,而實現這一目標的一個關鍵方面就是響應式字體大小。

響應式字體大小是指網站上的文字能夠根據不同設備和螢幕尺寸進行自動調整,以確保文字內容既清晰可讀又符合設計風格。這一概念的背後是為了提供更好的用戶體驗,無論用戶使用的是大螢幕顯示器還是小螢幕手機。

RWD網頁設計可以根據不同的螢幕尺寸斷點(電腦、平板、手機),去進行設計及設定,它確保了網站內容在各種設備上都能夠優雅地呈現,提供無縫的用戶體驗。這一概念的適當應用可以幫助網站設計師克服不同裝置尺寸和解析度帶來的挑戰,為用戶提供一致且令人滿意的訪問體驗。

資料來源:Font size guidelines for responsive websites

延伸閱讀:

各種ChatGPT及AI工具應用、指令手冊、解決方案,每週更新。
學習最新AI工具,就上Learn AI
AI如何讓工作更輕鬆、更有效率?立刻學習!
LA廣告-1
LA廣告-2
LA廣告-3
Related Post
最新文章
google site:
Google 搜尋 site: 命令教學,精準搜尋特定網站

Google搜尋功能強大,但你知道如何限定搜尋範圍嗎?透過「site:」指令,你可以在指定的網站內進行搜尋,快速找到所需的資訊。這篇文章將帶你深入了解「site:」指令的用法,並提供實用的搜尋範例。

圖片優化、圖片格式
圖片優化新選擇!WebP、AVIF如何提升網站速度

網站圖片佔據了網頁的一大部分,圖片優化是提升網站速度的關鍵。傳統的 JPEG 和 PNG 格式雖然常見,但 WebP 和 AVIF 這兩種新興的圖片格式,在壓縮率和畫質上都有更出色的表現。本文將詳細介紹 WebP 和 AVIF 的特性、優缺點,並提供實用的優化技巧,幫助您打造一個快速、高效的網站。

Selected Post
精選文章
WordPress 維護
實用!16 個 WordPress 維護的技巧手冊

網站架好了要如何進行 WordPress 維護?你需要定期維護網站核心功能、安裝的外掛、主題和其他方面。WordPress 是一個很棒的內容管理平台,但做好網站維護是讓你的網站在市場上走得更久的關鍵。