網頁設計網站對字體大小的選取的學問

網頁設計網站對字體大小的選取的學問
發佈者:SEO香港優化專家 - Web Design
網站設計
對於很多網頁設計師來說，很習慣的使用某一字體大小，比如14px或12px。有時候我們設計網頁時並不會十分仔細的考慮字體大小的選擇，因為在國內網站來說12px和14px基本成了所有網頁字體的標準大小，但在這個顯示器百花齊放的時代，網頁設計師往往需要考慮不同客戶端的瀏覽體驗，所以研究字體和瀏覽器之間的關係還是有些必要的。至少可以讓我們從更深層面認識我們為何要使用這種大小的字體！
文字大小，是用戶體驗中的一個重要部分。不同的分辨率，不同的顯示器尺寸，不同的DPI，乃至不同的瀏覽器設置，都會對最終展現的文字大小帶來影響。雖然現在很多瀏覽器已經可以方便地縮放頁面，但用戶每次光臨都要重新縮放，總歸麻煩，何況還有許多用戶不知道如何縮放頁面。最好還是根據用戶的分辨率給用戶一個比較體貼的默認字號，那這個字號多大合適呢？
12px?14px?15px?16px? 還是壓根就不應該使用px這個單位呢？
問題的根源，在於屏幕上的一切字號單位（px,pt,em）都是相對單位，單憑它們並不能確定文字的實際大小。何況人對文字大小的根本感知在於眼睛的視角，這不僅取決於文字的物理尺寸，還取決於它到人眼的距離。
物理尺寸
首先假定一個我們希望達到的文字物理尺寸，例如設定為17寸1280 * 1024顯示器上的16px，計算可得它的高度約是4.32mm，我們計劃讓網頁文字在大部分顯示器上都比較接近這個大小，那麼在不同分辨率下應該顯示成多大的字號呢？
第一步：統計用戶主要的分辨率和對應的屏幕大小。
要在物理尺寸和分辨率之間換算，首先要統計分辨率和對應的屏幕尺寸。用戶分辨率的分佈情況可以從網站的統計日誌裡獲得。由於每個分辨率設置可能對應好幾個不同尺寸的屏幕，而屏幕尺寸又無法通過網頁獲得，只好對現在的顯示器市場進行統計分析：針對某一分辨率，統計可能的屏幕尺寸範圍，從最小到最大，相對主流的是多大（或使用該範圍的中間值作為主流尺寸）。如下圖所示——
電腦顯示器市場（產品種類繁多，難免掛一漏萬，數據僅供參考）
第二步：計算每個分辨率主流屏幕尺寸的物理寬度
現在的顯示器長寬比不僅有4：3的標準屏，16：10的寬屏，還有更多不規則比例，為了在不同長寬比的顯示器之間進行比較，統一使用橫向分辨率來統計。用主流尺寸和長寬比（假設像素的長和寬相同）計算出屏幕寬度（英吋），再換算成公制（毫米），將其一一對應就可看出屏幕大小的趨勢。再結合各分辨率的用戶分佈，結果如下圖所示（圖片中每個點對應一個分辨率，橫軸為屏幕橫向的像素數，縱軸為該屏幕的物理寬度，氣泡大小表示使用該分辨率的用戶人數。其中藍色氣泡表示標準屏，紫色表示寬屏）：最大的三個氣泡分別是1024*768,1280*1024,1280*800。
第三步：計算不同顯示器上的字號大小
用屏幕的物理寬度除以像素寬度，就可以得到每個像素的寬度。然後用指定的文字物理大小除以這個數，就可以得到在不同分辨率下所需的字號。例如要顯示4.32mm見方的文字，各分辨率下分別需要如下的字號（對筆記本和台式機分別統計）：
不同分辨率下需要的字號
網頁寄存