2023-10-10
RAB_Tech

網站設計的最佳字體大小指南（RWD 響應式網站必看！）

design 基本網站

上次更新時間 2024 年 11 月 9 日
9:22 下午

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

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

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

網頁設計中的字體大小

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

像素（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 像素）。這是一種方便的方法，原因有二：

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

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

在 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 作為副標題。
輸入欄位 – 這些應該與正文的規則緊密匹配。

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

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

正文 – 正文的字體大小應至少為 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 作為副標題，但其字重比標題或正文文字輕。
輸入欄位 – 這些應該與正文的規則緊密匹配。