網頁設計中,字型大小多大才合適?

來源:互聯網
上載者:User
在這個顯示器百花齊放的時代,網頁設計師往往需要考慮不同用戶端的瀏覽體驗。

在這個顯示器百花齊放的時代,網頁設計師往往需要考慮不同用戶端的瀏覽體驗。

文字大小,是使用者體驗中的一個重要部分。不同的解析度,不同的顯示器尺寸,不同的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見方的文字,各解析度下分別需要如下的字型大小(對筆記本和台式機分別統計):

不同解析度下需要的字型大小

可以看出筆記本和台式機的尺寸相差很大,為方便使用,使用各解析度的主流尺寸或平均尺寸計算出指定字型大小在每個解析度下所需的字型大小。(下圖去掉了基本只用在筆記本上的那些解析度),以4.32mm、3.77mm、3.25mm為例(17寸1280*1024解析度下的16、14和12號字):

為保持固定物理尺寸,各主流顯示器下所需字型大小與解析度的關係

由於在未開啟cleartype的情況下,一些中文字型在非偶數字型大小下的顯示效果欠佳,所以一般建議使用12、14、16、18、22px等偶數字型大小。也就是對某個解析度選擇離它最近的偶數字型大小。例如:螢幕橫向解析度在1100以下的採用14px,1100到1500採用16px,1500以上採用18px,依此類推。

到人眼的距離

雖然筆記本的字型大小遠小於台式機,可是實際並沒有給我們帶來那麼大的不便,這是因為:一般使用筆記本時人眼到螢幕的距離比使用台式機時要近一些。當迷你筆記型電腦越來越小時(極端的例子就是手機),人們使用的時候可能會拿的更近,這樣視角更大。反之,當顯示器越來越大時(24寸甚至更大),出於整體視角等方面考慮,人們也可能離螢幕遠些,從而減小了視角。

定量來說:由於文字大小h(4~5mm)相對人眼到文字的距離d(30~60cm)非常小,可近似認為視角θ正比於h,並與d成反比(θ≈tgθ=h/d)。也就是說,同樣大小的文字,距離二尺時看到的只有距離一尺時的一半大小。

也就是說,顯示器只能傳達一個大概的尺寸,每個使用者在具體操作時仍會通過不自覺地調節到螢幕的距離來調整所看到的實際效果。面對越來越多的筆記本使用者(請參照上一篇:膝上型電腦的市場份額),前端設計師們只能給出一個針對筆記本和台式機平均尺寸的頁面效果,具體就靠使用者去自我調整了。

用JS實現不同解析度下自動調整字型大小

例如網頁本文所在div的id為content——

註:為保證各瀏覽器下文字均可縮放,字型大小單位使用em而不是px,一般來說,瀏覽器預設1em=16px,0.875em\1em\1.125em即為14\16\18px。

使用字型大小縮放時請注意:對該div內的標題等字型大小單位最好使用百分比,而不是固定字型大小,以便隨本文同步縮放。

不過字型大小的大小也是因人而異,所以有的網站會作出 大中小切換這樣的功能,使用者可以按自己的喜好來調整大小。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。