網頁設計中的 serif 和 sans-serif字體應用

2020-12-04 網際網路IT先鋒

網頁設計中的 serif 和 sans-serif字體應用。

Howdy, 大家好,又是我~

上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續字體這一話題,深入講講上次提到的「通用字體族」。首先是最常用的 serif 和 sans-serif 這兩個通用字體族。

- serif

Serif 在印刷學上指襯線字體。為了理解襯線字體的概念,大家先看幾個典型的襯線字體的例子:

單詞 My 中的字母 「M」上下方突出的短橫線就是所謂的襯線。同樣,y的上方,K的上下,i 和n的下方也都有襯線,所以這些字體都被稱為襯線字體。但襯線字體並不一定都有襯線,比如上面例子中的g, 「漢」和「字」。事實上,只要滿足末端加強原則的字體都是襯線字體。所謂的末端加強,就是使用襯線或粗細變化,使字體筆畫的末端得到加強,以改善小號文字的可讀性。比如上面例子中的y的下半部分,還有宋體的中文字符,都是採取加粗筆劃的末端來達到末端加強的效果。除此之外,很多襯線字體還會採用加強豎向筆劃(比如宋體中豎比橫粗),誇張字形(最明顯的就是小寫g這個字符了)等方法進一步改善它的可讀性。

因為襯線字體的可讀性非常好,所以它應用的最多的地方也正是出版物或者印刷品的正文內容等以大段文字作為表現形式的作品上。

比較常見的襯線字體有 Georgia, Garamond, Times New Roman, 中文的宋體等等。

- sans-serif

襯線字體以外的一切字體都是無襯線字體。sans- 這個前綴其實是法語,所以比較標準的發音是 /san/ 而不是 /sans/。它的意思是「沒有」。所以sans-serif就是無襯線字體。

無襯線字體比較圓滑,線條一般粗細均勻。比較適合用作藝術字、標題等。因為無襯線字體通常粗細比較均勻,所以在小字體顯示的時候,可讀性會降低,容易引起視覺疲勞。

常見的無i襯線字體有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等。

- 什麼時候用serif?什麼時候用sans-serif?

從上面的介紹中,我們可以知道,襯線字體之所以被設計出來,就是為了用作正文內容的。大家可以隨手抄起一張報紙,看看上面的文章是不是宋體。如果手頭有外語讀物的話,也可以翻來看一下,正文都是襯線字體。同樣大小的襯線字體比無襯線字體容易閱讀:

然後大家可以把報紙翻到頭版頭條——標題一般都會是各種粗細一致的綜藝體或者是中黑體。英文報紙的標題大多也是無襯線的。這個就是應用他們的基本原則。

但是大家可以看很多網站——它們的正文內容恰恰是無襯線的Tahoma, Verdana, Arial等等。中文網站可能因為字體的局限性,仍舊使用宋體居多,但查看它們的樣式表,就會發現候補字體也大多是無襯線的。這樣是不是不好呢?

當然不是。

襯線字體的可讀性其實僅僅體現在小字體上。大家可以拿出剛剛抄起來的報紙,和你顯示器上的文字比較一下——你會發現,報紙上的文字比顯示器上的文字整整小一圈。實際上,新明晚報上通常大小的宋體文字,在點距為0.25mm的高質量液晶顯示器上,大小大約只相當於10px ~ 11px的顯示字符;在普通的液晶顯示器(點距一般為0.28mm)上,甚至可能只相當於8px~10px的顯示字符。

這個就是 print media 和 screen media 的最大區別。印刷業為了節約成本,因此會儘可能的在保證可讀的情況下,把文字印小。顯示器不存在這樣的成本,因此可以顯示比較大的文字。在文字足夠大的情況下,無襯線字體也是同樣可讀的。而且因為無襯線字體通常有藝術性,因此在顯示器上顯示通常比較賞心悅目;而且無襯線字體種類比襯線字體多得多,因此選擇餘地也很大。所以大家盡可以放心去使用。但是必須保證以下原則:凡是使用無襯線字體的,必須保證其在正文內容中的可讀性。否則,使用襯線字體。換而言之,如果你要使用無襯線字體顯示網頁的正文內容,那麼,你必須把它的font-size設的足夠大,以保證用戶能輕易閱讀。

至於具體將font-size 設多大,是因字體而異的。12px 對於 Verdana 來說已經完全足夠,但是要能輕易的閱讀隸書,可能需要24px以上才行。

對於11px以下的英文字體,推薦使用襯線字體。至於中文,因為顯示器的硬體限制,不論是什麼字體,都不推薦使用11px以下的font-size來顯示。

- 其他的通用字體族

印刷學中,除了serif 和 sans-serif 之外,通常還有 monospace 等寬字體、scripts 手寫體(比如花體)、blackletter 鉛字體(也叫 gothic 哥特體。嚴格的說,很多常用的serif字體其實是gothic字體)、ornamental 裝飾體(那些在文字筆劃上或者周圍有裝飾花紋的字體。很多中世紀書籍上很常見。如果腦殘體真的成了字體,那麼應該可以算裝飾體吧……)和 symbol 符號字體(比如有名的wedding123……)。

不過CSS對通用字體族的定義有點不一樣。除了serif 和 sans-serif 之外,CSS還允許以下幾個通用字體族:

monospace 等寬字體

所謂的等寬字體,是指每個字符寬度都一致的字體。一個著名的例子就是 Courier New 字體。因為字符寬度一致,所以特別容易對齊,能快速精確的定位到某行某列,因此經常用來顯示代碼。

要注意的是,一個等寬字體同時也可以是一個襯線(或者非襯線)字體。比如 Courier New 這個字體也可以看作是一個serif(嚴格的說是gothic)字體。

cursive 書寫體:相當於印刷學中的手寫體。中文的華文行草就是這樣的一個字體。fantasy 夢幻體:相當於印刷學中的裝飾體。非常少見的一種字體,基本沒有參考價值。

要注意的是,CSS中不支持symbol字體族。使用symbol類的字體請用圖片。

- 一些你不知道的事情

中文的黑體其實是襯線字體。大家可以看下面的圖:

大家可以看到,其實黑體的確是經過末端加強的,所以很多印刷品的正文也會使用黑體。像這種使用溫和的末端加強,筆劃粗細大致一致的字體,其實也可以被稱為petit-serif/小襯線體。(那些類似於宋體一樣有顯著末端加強,並且筆劃粗細有明顯區別的,通常稱為slab-serif/雕版襯線體)

只是很遺憾,因為諸多的硬體原因,在顯示器上實際顯示黑體時,大家還是可以把它看作一個無襯線字體

Italic 不是斜體

斜體是oblique。Italic 顧名思義,是義大利體。Italic 是一種書寫方式(calligraphy script),而oblique 是一種印刷樣式,兩者是不同的東西。中學英語習字冊交授的書寫方式就是義大利體。除了義大利體外,比較流行的書寫方式還有法蘭西體(就是傳說中的花體字,正名是French Script)、哥特體、亞伯拉罕體等等。

很多考究的字體都會為義大利體定製一套特殊的字體,而不是簡單的顯示成斜體。比如下面的圖片裡,三行文字都是Georgia字體。第一行普通;第二行是oblique,也就是斜體;第三行才是真正的italic義大利體。

大家仔細看第三行的a, l, i, e 等字母——很明顯的看出區別了吧。實際上,Georgia Italic 和 Georgia 在系統內是兩個不同的字體文件。當我們指定 font-style: italic 的時候,系統就會自動搜尋是不是存在Georgia Italic這個字體,並嘗試使用這個字體來顯示文字內容。

按理說當我們用 font-style: oblique 指定字體樣式時,瀏覽器不應該去尋找Georgia Italic這個字體,而直接將Georgia字體傾斜顯示,所以理論上應該得到圖中第二行文字的效果。可惜,連W3C在CSS規範中,自己的參考實現也說是「如果UA不能正確顯示italic 和oblique, 可以使用italic來代替oblique顯示」,所以幾乎沒有瀏覽器實現區分italic 和oblique。哪怕你設置的font-style是oblique, 你也會發現,瀏覽器顯示的也還是italic

今天就到這裡了。下一講我會談談如何構建一個合理的font-family,並推薦幾個使用的字體組合給大家。那麼,再見了喲

相關焦點

  • 深談網頁設計中的字體應用Font Set
    最近有不少人都提及了網頁上該如何選擇字體的問題。問題雖然小,但是卻是前端開發中的基本,因為目前的網頁,還是以文字信息為主,而字體,作為文字表現形式的最重要參數之一,自然有著相當重要的地位。Hihi, 大家好~ 最近有不少人都提及了網頁上該如何選擇字體的問題。
  • Vista和IE7下,我們該如何定義網頁字體
    (有襯線與無襯線字體serifvssansserif)西方國家字母體系分為兩類:serif以及sansserif。serif是有襯線字體,意思是在字的筆畫開始、結束的地方有額外的裝飾,而且筆畫的粗細會有所不同。相反的,sansserif就沒有這些額外的裝飾,而且筆畫的粗細差不多。
  • 默認Web字體樣式
    拿字體來說,各個瀏覽器默認的字體種類、字體大小和字體行高都不一樣,比如IE8的中文版在Windows XP下顯示網頁時默認字體是宋體,而英文版肯定不會如此。所以我們需要統一設置默認的字體樣式,以便實現一致的顯示效果來保證設計的一致性和提高開發效率。
  • 還是網頁字體這事
    但現在很多電子商務網站都會有標價,這就涉及到了符號和數字,然後品牌和內容中又會有英文和字母,這就又涉及到英文字體,光用「宋體」會不協調。因為「宋體」本身是為中文字符設計的,符號、數字和英文、字母當然也應該使用英文字體來定義顯示才會更合適。前幾天做一個項目我們決定使用font-family:Verdana,Tahoma,Ari ...
  • 網頁設計中各度量單位的比較
    首頁 > 教程 > 關鍵詞 > 網頁最新資訊 > 正文 網頁設計中各度量單位的比較
  • 網頁常用字體設計,你最喜歡哪一種?
    作為網頁設計師,我們希望有精美的字體來幫助我們為網頁排版,好的排版是組成優秀網頁設計的重要組成部分,字體在網頁設計中扮演了相對重要的一個角色,所以在網站中,選用什麼樣的字體也是一個相對比較重要的工作,今天跟大家分享下在網站當中常用的字體。
  • 【超實用】如何給你的網頁選擇合適的字體?
    其中包括以下五個系列:serif:帶襯線字體。Times New Roman 是默認的 serif 字體,中文字體的話,是宋體、仿宋之類的字體。sans serif:無襯線字體。Arial 是默認的 sans-serif 字體,中文字體中,微軟雅黑、黑體等都是這類字體。
  • 三星Serif TV 體驗:一次電視設計的文藝復興
    當人們的視線從電視轉移到電腦,再到手機的時候,屏幕上慣用的字體,也從繁複優雅的襯線字體(serif)轉向了簡潔洗鍊的無襯線字體(sans-serif)。設計,先於技術在歐洲鉛活字印刷機出現之後,書籍就有可能被批量生產了,不過當時的紙張很粗糙,且吸水性太強,並不適合呈現複雜的手寫字體,於是比複雜手寫體更簡單,但依舊易於閱讀的舊體襯線字體(old-style serif
  • 網頁背景圖片固定代碼案例源碼分享
    收錄於話題 #網頁設計  前話 此篇已擱置很久,由於有個問題一直困擾我,導致沒有狀態和精力去更新,一直在努力得調整自己,堅持,堅持,再堅持
  • 網頁規範字體,你做對了嗎?
    前者傾向於設計,比如選擇的字體表達的情緒,字間距的設定帶來的視覺影響。 而後者更傾向於技術,以一套有跡可循的規則進行應用,比如實現「齊頭尾」如何避免中西文混排造成的字間距拉伸,以及選擇什麼樣的 font-family可以在多平臺上最優顯示等等。本文主要圍繞 Technical Typography 進行討論。
  • Noto Serif CJK正式推出!
    上述叫法和書寫樣式均源於中國的宋朝和明朝,當時中國的雕版印刷術已然流行。那時人們沿著木頭紋路刻字。橫筆劃易於雕刻,豎筆劃則較難;這導致橫筆劃較細,而豎筆劃較粗。此外,人們還模仿中國的楷體書法,在橫筆劃的末尾增加三角形裝飾。這種樣式沿用至今,已成為一種常用的字體樣式。 襯線字體被認為更傳統,也更有書法美感,因而常用於長篇文字,例如網頁或電子圖書的正文文本。
  • 三星Serif TV 體驗:一次電視設計的「文藝復興」
    當人們的視線從電視轉移到電腦,再到手機的時候,屏幕上慣用的字體,也從繁複優雅的襯線字體(serif)轉向了簡潔洗鍊的無襯線字體(sans-serif)。電視的發展呢,大體上也在朝著超窄邊框和簡約線條的現代主義方向走著。
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中,font-family屬性是使用來規定元素的字體系列,把多個字體名稱作為一個「回退」系統來保存,如果瀏覽器不支持第一個字體,則會嘗試下一個。有兩種類型的字體系列名稱:指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
  • 字體PK(2):什麼才是最好的正文字體?
    正在閱讀:字體PK(2):什麼才是最好的正文字體?字體PK(2):什麼才是最好的正文字體?>   字體PK系列文章導讀:  1.《微軟雅黑究竟好在哪裡?》  2.《什麼才是最好的正文字體?》(本文)   無限精彩的平面設計、網站設計類圖文及視頻教程,就在PConline創意設計欄目。  這幾天在研究serif。serif是英文字體的術語,中文翻譯做「襯線」,就是文字筆畫兩端的短線。  最典型的serif字體恐怕就是Times new Roman了。
  • 43 字體屬性詳解和自定義字體的定義和使用
    前兩個字體都是英文字體,頁面將首選serif這個字體作為頁面的字體形式被顯示,如果用戶電腦中沒有serif這個字體,將選擇第二個字體Times New Roman替代serif,依次類推。比如說,你自已電腦中有一個非常好看的字體,但是如果用戶的電腦中沒有安裝這種字體,你用font-family把頁面設置為這種字體,那麼只有你自己能看到這種字體,用戶的電腦上是顯示不出來的。所以font-family屬性的字體設置為微軟雅黑和宋體比較多,設置成其他字體比較少。
  • Google網頁字體在線服務 設計師的福音
    目前網頁上使用的字體都是常見的幾種,如』Lucida Grande』, Verdana, Arial, Sans-Serif,中文常見的有宋體。要想用比較個性的字體就比較麻煩了,因為你不能保證客戶端是否支持這種字體,常用的方法是用Photoshop把文字製作成圖片。
  • 如何評價和看待韓文字體?
    韓國文字還有一種說法叫做諺文,也有可能是諺文太過於簡單的原因吧,韓文中的同音漢字很多。所以對於有一些詞語,讀起來是同一個音,然後出現在同一段話中就會讓人覺得很奇怪,所以說對於很多情況之下,韓國人也是會引用漢字的寫法和讀音來作為區分,如對文字要求十分嚴謹的學界:法律界。
  • 網站預設字體 CSS 最佳寫法
    ,然而我們有 Windows 和 Mac  OS 兩個系統,這兩個系統的默認字體是不同的,那麼 CSS 中的 font-family、字體大小、顏色、行距如何設置才是最美、最好看的呢?作為網頁設計師,對這方面也有所研究,下面是設計達人(公眾號ID:shejidaren888)最近研究出來的成果,歡迎一起交流。註:這裡我們只介紹「大多數」的用法,個別特殊設計需求的網站可能不適用此方法。
  • 襯線字體和無襯線字體
    世界上所有文字的字體(不管是由字母組成的西文、東亞的方塊字,還是其他文字),大致可以分為兩種,Serif(襯線字體)和Sans-serif(無襯線字體)。本文主要討論的是英文字體中的Serif和Sans-serif。Serif(襯線字體)是在字的筆畫開始、結束的地方有額外的裝飾或粗細變化,使字體筆畫的末端得到加強,因此易讀性比較高。因為襯線字體的可讀性非常好,所以它應用的最多的地方也正是出版物或者印刷品的正文內容等以大段文字作為表現形式的作品上。