中國設計之窗帶你重新認識一下電腦裡面用的那些字體(一)

2020-12-18 中國設計之窗

本篇文章將介紹一些關於字體的基礎知識,主要會介紹一些常見術語的含義還有英文、中文字體常見的分類方式,另外簡單介紹一下各平臺下字體渲染的相關的問題,還有標點使用和排版規範。術語字形和字體不得不說 Font 與 Typeface 即是在英文中也有很多混用的地方很難分清,也常常被混用,現在通常被翻譯為「字體」的 Font 在傳統印刷界是指特定尺寸、特定字重、字偶間距等信息 的一種 Typeface,比如 「尺寸14pt,字重為 Bold 的 Helvetica 」 就是一個 Font,而這裡的 Helvetica 就

本篇文章將介紹一些關於字體的基礎知識,主要會介紹一些常見術語的含義還有英文、中文字體常見的分類方式,另外簡單介紹一下各平臺下字體渲染的相關的問題,還有標點使用和排版規範。

術語

字形和字體

不得不說 Font 與 Typeface 即是在英文中也有很多混用的地方很難分清,也常常被混用,現在通常被翻譯為「字體」的 Font 在傳統印刷界是指特定尺寸、特定字重、字偶間距等信息 的一種 Typeface,比如 「尺寸14pt,字重為 Bold 的 Helvetica 」 就是一個 Font,而這裡的 Helvetica 就是它的 Typeface 。不過現在 Font 的所指定的通常不再包括尺寸了,因為與鑄模的時代不同了數字字體尺寸可以很輕易的改變。

Typeface 的另一個稱呼是 Font family(字族),這個詞實際上比 Typeface 更好理解且不容易混淆,能很明顯的表達出 Font 是 Font family 的子集的意思,所以在 HTML & CSS 的標準中使用的是 Font family(字族)。簡單來說 「Helvetica」 是一個 Typeface ,而指定具體的字重: 「Helvetica Bold」 ,這就是 Font 了。

還有一個概念是 Glyph ,它表示的是字的某種寫法或者說字體的「骨骼」,比如字母 a 和 ɑ 就是 Glyph 不同,涙 – 淚、強 – 強也是 Glyph 的不同。

而 Font 、Typeface 和 Glyph 在中文裡的翻譯就亂七八糟了,按照國家標準(GB/T 16964)應該是:

然而,在實際使用上字體和字型混亂不堪,常常把 Font 稱為字體,而字型和字形更是常常搞反。而常用民間稱法的是把 Font 稱為字體, 不用 Typeface 而是使用 Font family 即字體族,再把 Glyph 稱為字形或字型。這種稱法實際上比標準翻譯更加流行。

羅馬體與義大利體

Roman 指的就是襯線體,這個稱呼是因為襯線的起源於羅馬時期的碑刻。由於通常都把襯線體作為正文字體,所以很多場合下,Roman 就變成了正文字體的代名詞。

而 Italic(義大利體)最早是指義大利使用的一種手寫體,而後來 Italic (義大利體)常被用作斜體與正文的羅馬體搭配,成為了斜體的代名詞。另外一種斜體的稱呼是 Oblique (單斜體、仿斜體)也被稱為 Slanted,這通常是指直接把正文字體做傾斜處理產生的斜體,而 Italic (義大利體) 則是特別設計的與正文相差較大的斜體。

Roman 羅馬

同一字體(Adobe Garamond)的 Italic(義大利斜體)與 Oblique(單斜體)

字體結構

字間距、字偶間距與等寬字體

字間距(Spacing)顧名思義是字符間的距離,在實現上就是字符圖形外邊界框的尺寸和字符在方框中的位置。

字間距 -《西文字體》

字偶間距(Kerning)也被稱為字距調整,是在字間距的基礎上,為實現不同字偶(一對字符)可以有不同字間距的調整值。不同的字母有不同的外形,所以字體只有同樣的字間距是不協調的,比如「AH」間是標準的字間距,而「AV」 由於 V 和 A 的形狀,其位置可以重疊,所以需要負字偶間距才能達到協調的外觀。字間距和字偶間距都是一個字體的組成部分,並且字偶間距需要為很多字偶準備。

一套字體中的多個字偶 -《西文字體》

另外有字距的概念就是等寬字體(Monospaced)與比例字體(Proportional)了,比例字體就是上面說的按字符外形設置有不同字距的字體,這種字體外形協調,可讀性好。而等寬字體(Monospaced)是每個字字間距都相同的字體,其優點是可以很好的控制排版對齊,因此目前編程的代碼編輯器通常都會使用等寬字體(Monospaced)最為顯示字體。

字重與寬度

字重的劃分根據不同字體廠商各有不同,不同的字重稱呼也可以不一樣,常見的劃分如下:

另外還有窄字體:Condensed、寬體:Expanded、斜體:Italic、Slanted(通常指仿斜體)。

連字

連字(Typographic ligature)也被稱為合字,源於手寫時的連筆,如「fi」的 i 上一點常與 f 的一鉤合併。傳統英文印刷常會使用連字,而 1970 年代照相排版流行之後就很少使用連字了,而且由於顯示屏的解析度有限,是否連字差別不大,所以現在不是很流行使用連字。

連字的實現方式有兩種,一是字體的 PostScript 連字功能,這需要排版或顯示軟體支持,另外是使用合字字符,如:

字面率、中宮、重心

字面率、字面、中宮、重心是常見描述中文字體外觀特點的屬性。字面是相對於字體的外框而言字體實際尺寸的範圍,同樣字號下不同字體字面大的實際尺寸會更大。

字面率是字面與外框內尺寸的比值,一般簡體中文字體有 92 % 左右的字面率,日文字體漢字通常字面率要高一些,94 %左右,相對而言,日文字體漢字更追求平均和較大的字面率。

中宮是漢字主要結構的大小,類似於英文字體的 x 高度。中宮大小可以用來評判字體的鬆緊程度,中宮分橫向和縱向,不過通常看橫向的中宮尺寸就夠了。

重心是字體另一個主要的外觀屬性,是字體的視覺中心點,一般字體重心是位於中上部分。

英文字體

字體分類

英文字體的分類方法有許多種,不同的分類法側重點不同,這裡介紹常見的傳統分類法「 Vox-ATypl 分類法」 和數字字體時代具有代表性的 typekit 網站的字體分類方法,還有按年代劃分(主要參考《西文字體》)字體的方法。

typekit 分類法

Sans-Serif 無襯線

Serif 襯線

Sleb-Serif 粗襯線體

Script 書法體

Blackletter 哥特黑體

Monospace 等寬字體

Hand 手寫體

Vox-ATypl 分類法

Classicals 古典

古典字體分為人文主義體 (Humanist),加拉德體(Garalde)和過渡體(Transitional),他們的特徵是有著類似三角形的襯線

可以看到人文主義的字體 x 高度明顯小,大寫字母比小寫字母高許多。

Humanist 人文主義字體

人文主義字體是文藝復興時期的興起的字體,流行於當時文藝復興的中心義大利,所以也被成為威尼斯式 (Venetian) 字體。

人文主義字體以當時作家的手寫字體為參照,所以保留有很多手寫的特徵,比如傾斜的 e、c、o。還有較小的 x 高度。

e、c、o 的軸線傾斜

筆畫粗細差別不大

x 高度較小

代表字體有:Centaur、Cloister old style

Garalde 加拉德體

加拉德體的名字(Garalde)是來源於 2 個設計師:Claude Garamont 和 Alde Manuce。這種字體也被稱為「古風體」或「舊風格」字體。

這是一種比較中庸的字體,其去掉了很多手寫特徵,e 的軸線完全垂直了,o 和 c 的傾斜也很小,x 高度也較高,字體的比例較均衡,所以很適合作為正文排版使用。

e 軸線完全垂直,o、c 軸線略微傾斜

筆畫粗細差別不大

x 高度較大

代表字體有:Garamond、Bembo

Transitional 過渡期體

過渡時期是指法國大革命、美國獨立的 18 世紀啟蒙時代(Age of the Enlightenment),這種字體也被稱為新古典主義字體(Neoclassical)。

這種字體的幾乎完全拋棄了手寫特徵,襯線幾何化為十分規則的曲線。而且其筆畫粗細相差極大,細處特別細,粗處特別粗,這讓它並不很適合作為正文字體。它適合的是有足夠尺寸來展示其流暢典雅曲線的場合,比如標題或者 LOGO。

篇幅限制,更多精彩內容回陸續推出...

相關焦點

  • 非電腦時代的字體藝術--美術字
    非電腦時代是指上世紀,也就是民國到1990年代時候,在上世紀電腦平面設計及字體相對少,WINDOWS在1996年前還是DOS系統還沒有出現。所以 在那個時代,美術字是出現很多種樣式,甚至 比現在現在電腦的字體還要變化豐富。就單單一個宋體字就有了老宋,長宋,扁宋,美宋,大標宋,小標宋等等許多種變化 ,方正字體實際好多就是把這些美術字轉化成電腦字體的。
  • 電腦字體背後的書法高手,你知道嗎?
    這些字體不是從樹上長出來的,也不是從地下冒出來的,是經過字體設計師的創意設計;字體製作人員一筆一划的製作、修改;技術開發人員對字符進行編碼、裝庫、開發、校對等環節,才推出使用的。
  • CAD字體類問題是重災區 本文先帶大家認識一下字體
    在CAD設計中,有幾個類型的問題是大家遇到得比較多的,繪圖類、列印類以及今天要說的字體類。那麼大家一般會在什麼時候遇到字體的問題呢?當打開外部圖紙時經常會提示找不到相應的字體而彈出替換字體的窗口,低版本CAD會要求替換,而高版本則會提供多一個忽略的選擇。於是,這個時候大家往往就懵了,大字體文件?常規字體文件?形文件?什麼跟什麼?在這裡一一往下剖析。
  • 產品設計作品集的字體排版
    工業設計作品集字體,字體是在圖片說明還不夠完整的情況下起到一個輔助說明點綴的作用,說到字體,我們每一個人的電腦系統C盤裡面都可以找到一個文件夾,文件夾名稱是Fonts,也就是字體的意思,Fonts這個文件夾是存放電腦裡面常用字體的,有系統默認字體也可以自己添加字體存放在裡面,我們常常見到的字體庫就是用於增強字體設計多樣化的字體資源,字體按照不同設計款式分類可以有幾千種甚至上萬種
  • 朱志偉:那些關於字體你不知道的事兒
    不管什麼時代,什麼樣的技術條件,字體的發展和變化的根本目的都是為了滿足人的視覺感受,順應人的視覺功能。下面,我就從兩個方面和大家分享我對字體的認識:一是影響字體發展的四個因素,再一個是在當今數位技術條件下,字體的視覺體驗。那些年,我們用過的字體 影響字體發展的因素我認為有這四個方面:文化、技術、視覺和時尚。
  • 如何設計一款有逼格的字體?(17種創意方法)
    其本質是根據文字的內容意思,用某一形象替代字體的某個部分或某一筆畫,這些形象或寫實或誇張。將文字的局部替換,是文字的內涵外露,在形象和感官上都增加了一定的藝術感染力。▼分解重構法分解重構發是將熟悉的文字或圖形打散後,通過不同的角度審視並重新組合處理,主要目的是破壞其基本規律並尋求新的設計生命。
  • 字體設計指南:字體性格的識別與選擇|歐賽斯品牌設計
    今天就帶大家從字體的分類,到不同字體適用什麼場景, 再到排版中的字體使用規則,全方位提升大家對於字體的認識。案例:女性主題的設計,它就用了細字體來體現女性的服裝,還有一些化妝品上的運用,在一些高端的設計中,細字體讓畫面顯得更精緻優雅。
  • 工具|為設計師量身定做的字體工具,超多字體,無需下載,激活即用
    嗨,大家好,今天給大家分享的是一款字體工具——字由,工具中集成了超多字體,只要雙擊激活就可以在Photoshop、Word等等中使用,不需要下載字體文件,超級方便。相信粉絲裡有很多喜歡平面設計的,或者是大學裡製作一些海報部門的,海報等一些的設計,字體非常重要,而常常電腦自帶的字體相對來說比較少,達不到設計的需求,而網上的字體非常混雜,尋找適合的字體也比較麻煩。所以,本期分享可以幫到大家了。開始正片。
  • 為什麼設計師都喜歡用SHX字體而不是TTF字體?
    各位可以嘗試一下,新建兩個文件,同樣創建一個多行文字,輸入同樣的內容,只是字體分別用SHX和TTF,創建完了把多行文字陣列1000遍,保存(保存完記得檢查一下文件大小)……之後退出AutoCAD後重新打開文件,可以看到用SHX文字的文件打開的速度要明顯比用TTF文字的要快很多…… 最後一點我先賣個關子,請大家看一些特殊的SHX字體畫出來的文字
  • 字體設計,究竟在設計什麼?
    陶一泓字體作品:絲沐體在中國,字體設計的概念並不是一開始就存在的。在電腦還沒有普及的年代,國內印刷字體領域中設計的概念並未被普及,字體設計被稱為繪製字稿,需要用鉛筆或毛筆在坐標紙上進行繪製,而做這件事的人們則被稱為工藝美術師。在國內字體設計最早出現在美術院校的美術教育中,隨著電腦的普及與字庫公司的出現,才逐漸有了字體設計師的概念。
  • 字體設計,究竟在設計甚麼?
    陶一泓字體作品:絲沐體在中國,字體設計的概念並不是一開始就存在的。在電腦還沒有普及的年代,國內印刷字體領域中設計的概念並未被普及,字體設計被稱為繪製字稿,需要用鉛筆或毛筆在坐標紙上進行繪製,而做這件事的人們則被稱為工藝美術師。在國內字體設計最早出現在美術院校的美術教育中,隨著電腦的普及與字庫公司的出現,才逐漸有了字體設計師的概念。
  • B端設計|全方位講解下字體設計規範
    可能有不少同學看過我們移動端字體相關規範說明的分享,理解起來會比較容易。如果沒看過也不要緊,為了保持完整性,我們會將基本的概念在本篇中重新複述一次。文章傳送門:全網最詳細的 UI 文字應用介紹字體屬性包含的內容很多,我們可以根據 Sketch 或 Figma 的文字屬性欄為例,分別進行解釋。
  • 發現超好看但不認識的字體怎麼辦!教你一招不求人,字體隨心找到
    比如,小E現在手上有一個非常不錯的PPT,上面的中國毛筆風格的字體非常喜歡,但是我選擇中後發現開始菜單中並不是我們的字體,因為電腦上可能沒有這款字體,所以字體欄中顯示的不一定是正確的,因為有些設計方法是使用不同的字體的方案接下來我們將字體顏色設置為白色,背景設為黑色,方便下一步的識別,因為很多字體都是嵌入進去的,所以很多設置無法改變
  • 抖音換新LOGO,並重新設計了字體!網友:還是之前好看!
    經常一些知名品牌LOGO更新升級,都能在設(chi)計(gua)界引起一番轟動,因為其logo標誌的更新換代,其實也代表著設計界新的流行趨勢。畢竟在這些大廠裡面的設計師都不是不是一般的美工,而是真正的設計師!比如早在2012年Adobe PS軟體界面就有了黑色模式,比現在黑色模式流行提前了8年!《微信終於變顏色了!這次黑的很徹底!PS軟體比他早8年!》。
  • 下雪,微信公眾號文章標題的字體帶雪花效果怎麼做詳解
    下雪了,那這種文章標題或者正文字體帶雪花或者其他特效的效果怎麼製作呢,其實只需要正常的輸入文字之後,簡單操作一步就可以了。標題雪花字體這種字體其實就是正常的輸入文字,然後和特定的字符串結合一下就可以了,能夠製作很多文字效果,如颳風、下雨、流汗、節日、開花等字體效果,而製作過程也非常簡單,
  • 方正字體設計總監朱志偉:產品經理要把字用好
    極客給我出的這個題目《淺談字體設計與視覺感受》,恰恰是這個問題的核心。不管什麼時代,什麼樣的技術條件,字體的發展和變化的根本目的,都是為了滿足人的視覺感受,順應人的視覺功能。 下面,我就從兩個方面和大家分享我對字體的認識:一個是影響字體發展的四個因素,再一個是在當今數位技術條件下,字體的視覺體驗。 影響字體發展的因素我認為有這四個方面:文化、技術、視覺和時尚。
  • 聽說你們對字體設計有些興趣?教你3招嘗試字型設計
    中國會員——197DESIGN 的字體設計經驗,總結了自己在字體設計中常用的三種簡易粗暴的字體設計技法,超詳細哦!有了設計標題,那麼我們現在需要做的就是找兩款合適的字型繼續進行,而不是一開始就用電腦去操作;關于越野,我們可以在網上搜集相關資料進行視覺參考:
  • 五款精品PPT字體+三大字體原則,我要幫你刪掉10G字體庫
    不了解它,會讓你永遠走不出設計LOW圈。輕鬆認識字體,擁有五款精品PPT字體,掌握三大字體使用原則,你也可以做出專業設計師的PPT:1.認識字體,從此不再迷茫2.五款常用字體,忘掉10個G3.三條法則,正確用好字體
  • 【PPT】科技風PPT頁面字體設計創意處理
    今天,我們來學習一下科技風的PPT頁面字體的創意設計處理。很明顯,今天的主要設計點在於字體的創意設計,不過也是比較簡單的。用在PPT設計中,效果也很不錯。這就是科技風的PPT頁面設計,主要創意點在於字體的立體化設計處理。我們來看一下製作思路和方法吧。
  • 不同電腦裡PPT字體不兼容怎麼辦?處理PPT字體的小技巧
    這個問題很多人都遇到過,當你用完洪荒之力,做出了一部自己看上去超級滿意的PPT,結果到了現場一播放……所有字體都被打回原形,那一瞬間的感受簡直無法用言語形容。其實這就是我們經常遇到的,對方電腦沒有安裝PPT所用字體的情況。那麼在遇到這種情況時,我們究竟該如何處理呢?