各個平台下相對比較好的 Web 英文字體分別是什麼?


「發此帖的目的更多是讓我們的那些設計師反省一下」(問題評論)——提問者大概以為知乎的用戶們能幫他免費開批鬥大會。

問題補充說明裡的測試圖片和那些話沒有任何價值,基本全是錯的,思路混亂不堪。希望大家不要被那些內容誤導。

* * *

匆忙地簡要說一些:

首先,這個話題太大了。我先排除一些方面:

  • Web font 在西文世界已經很成熟了,所以西文世界其實沒有什麼字體限制了。不過我們在這裡可以只討論系統自帶字體。

  • 既然提問者其實想知道的是中西文混排時的西文字體選擇,那麼,從操作系統自帶中文字體的現狀來看,恐怕還是無襯線字體更主流一些,我們把襯線字體暫時排除。
  • 對於正文字體,風格太誇張的不必考慮。
  • 中文字體只考慮簡中。
  • 排除 Linux 等非主流桌面操作系統的情況。暫且排除移動操作系統的情況。

  • 基本排除大字型大小標題的情況,只討論正文(大多是 11 至 16 px,其中以 12、13、14 px 最為常見)。

那麼,西文字體只用這幾個可用:

  • Windows:Verdana、Tahoma、Arial 以及 Segoe UI(Vista 或更高版本);

  • OS X:Verdana、Tahoma、Arial、Lucida Grande、Helvetica (Neue)、PT Sans(10.7 或更高版本)。

中文字體這有這幾個可用:

  • Windows:中易宋體(即 SimSun)、微軟雅黑;

  • OS X:華文黑體、冬青黑體簡體中文。

一些觀點:

  • Verdana 是 Windows 上正文字型大小顯示效果最好的西文字體。在 OS X 里效果也不錯。

  • Tahoma 實際上基本是 Verdana 的緊湊版本,很醜。它對網頁正文來說太緊了。基本沒有什麼場合需要捨棄 Verdana 而去用它。

  • Lucida Grande 的特性類似 Verdana,都是在小字型大小時很不錯的字體。

  • Arial 和 Helvetica (Neue) 分別是 Windows 和 OS X 這兩個平台上最中庸的西文字體。毫無性格,但也不會添亂,很安全。它們在正文字型大小時的清晰度稍遜於 Verdana 和 Lucida Grande,但也不錯。

  • 如果要兼顧稍大字型大小時的效果,Verdana 和 Lucida Grande 就不太好了,它們在大字型大小時很傻。大字型大小時 Arial 在 OS X 上不如 Helvetica 美觀,尤其不如 Helvetica Neue 美觀。但這種針對 OS X 的字體優化恐怕一般項目里沒有精力做。

  • Segoe UI 和中文搭配起來太小,而微軟雅黑的西文部分其實就是基於 Segoe UI 製作的,所以如果要在 Windows 上用 Segoe UI,不如直接用微軟雅黑顯示西文。Segoe UI 和微軟雅黑的西文部分是 Frutiger/Myriad 風格的,應該說總體效果比 Verdana 更美觀,但小字型大小表現並不更好。
  • PT Sans 的風格其實比較特殊,偶爾需要和冬青黑體簡體中文混排時可以考慮。
  • 所以 Arial 是最保險的字體。而且這已經是多年的共識了。

  • 如果你真要追求小字型大小時(比如 12 px)的清晰度,那麼 Verdana 可能是最好的跨平台選擇。


在西方,專業領域已經越來越少用到Tahoma,因為在今時今日顯示器已經可以去到三十吋,普及型的iMac已經走到27吋,頁面的空間已經越來越大,即使標準的960px橫向也已經提供足夠空間達致每行十字左右的最佳閱讀行長。

PC和MAC都推薦使用Arial。Arial是最佳的hinting技術示範,在PC上最清晰當之無愧,而在Mac上也十分好讀。12px來說Helvetica跟Arial近乎95%一樣,乾脆用Arial便可。

個人喜好,Mac上比較喜歡用Lucida Grande, 感覺圓潤,人性化,沒有稜角,粗度適中,讀久了也沒有問題,是Apple對typography看法的最佳示範。


推薦閱讀:

學完W3school後還是看不懂一般網頁的html,還應該學什麼呢?求大神幫助!
層疊樣式表的層疊是什麼意思?
什麼是 CSS 架構?作為 CSS 架構師,每天的任務是什麼呢?
新手關於前端開發的幾個問題?

TAG:前端開發 | 字體 | 字體設計 | CSS | 英文字體 | 字體排印 |