Character Set, Font and Its Personality
意涵-文字視覺-的設計 字碼‧字型‧字體與字的性格

數位出版設計:意涵/樣式篇Web Design: Context/Text/Context - Epistemological/Digital Aesthetics - Formation Methodology

數位出版設計:意涵/樣式篇網站/網頁設計:意涵/文字實作-知識美學/數位美學建構方法

The meaning of your content should be supported by the visual imagination of your font style.

網站/網頁設計:意涵/文字:屬於美學的統一元素,包括字碼設定,字的預設,字的呈現:字體+字級+字比率+字變化+字間距+字顏色,字的編號,字的位置-方塊模型與定位,層疊樣式表(Cascading Style Sheets, CSS)應用等。


Default Character Set 字碼

Meta TagMeta Tag 字碼設定

什麼是Meta Tag

Meta Tag 是專門放在<head>區的標注命令,Meta 直譯是「超」,大陸習慣譯「元」,真正的意義是「標注的標注」,用途不是一般作為網頁呈現的標注命令,而是對網頁描述、行為的標注。所以譯為「統合標注」似可達意,正如 Meta Analysis的用法。

Meta Tag SEO 與網站管理影響深遠,但對一般使用者而言,除了3大<head>命令外,實務需求應用就較少。

在意涵設計上,常用的字碼設定如下。

Html 5 版本後字碼設定

Html 5 版本後,字碼設定極為精簡,如下。

<meta charset="utf-8">

雖可設定 Big5,考量國際化趨勢,建議不再使用。

Html 4, XHtml 版本前字碼設定

Html 4 與 XHtml 版本,字碼設定較為繁複。

warning For Chinese-only Pages

<meta http-equiv="Content-Language" content="zh-tw" >
<meta http-equiv="Content-Type" content="text/HTML; charset=big5" >

'charset' will influence the font. Keep it, if you want to use Chinese.

Bilingual Pages Bilingual Pages

You have to set "utf-8" for bilingual pages, otherwise, all .css English fonts will become only one font that is the default Chinese font (new Xi-Ming).

<meta http-equiv="Content-Language" content="en, zh-tw" > (for multiple languages pages)
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" >

Characters Set Character Sets and Email Coding


字的意涵設計

意涵經由文字表達,屬於美學的統一元素,在針對字各種特徵設計完成後的成果,英文就是 Style,特譯為狹義的「樣式」。

文字的樣式要能表現意涵,重視美學的協調。

字型美學字型美學改變了賈伯斯的一生,也創造了「蘋果」的歷史地位。

文字必須統一形式與內容(意涵)

意涵(樣式)設計

﹦字體+字級+字比率+字變化+字位置+字間距+字顏色

樣式包括:內建樣式、自訂樣式。


Font Faces 字體/字型

表現性格 + 角 + 框 + 比例

It determines the characteristics of your messages.

字體與字型兩個名詞經常混合使用,如果細分,則是中英造字命名的差別。

中文原稱「字體」以主要性格為核心命名, 譯為「字型」,以製造者品牌命名。而英文 Font face 的語意較接近中文之「字體」,唯 Font 與 Font face 有混合使用的狀況,在英文中區別不大。

譬如,中文的「黑體」,英文就有:網路通用安全字體(web safe font) 系列的 Arial, Helvetica, Tahoma, Verdana,和非網路通用安全字體的 Berlin Sans FB, Blue Highway, Franklin Gothic Book, Gill Sans, Shruti,...非常多在性格上相同,但細微不同的字型。

所以狹義上,「字體」表現「一般性格」,而「字型」表達個人性格。

在應用上可分3類:基本字體花體字體/設計特用字體,與雜錦字體

常用中文字體

中文字基本字體為明(宋)、楷、黑,餘均為花體字。又分為:有角(一般譯「襯線」)字-無角字,內框字-外框字,比例字-非比例字。

常用中文字體

Basic Spelling Font Faces 常用拼音/英文字型

There are 3 basic font faces and recommended in common use.

英文是拼音語文的一種,以下基本字型廣泛使用在各種拼音語文上。

Times New Roman,

Moderate, steady, and dignified.

Courier New,

Soft, light, and gracious.

Arial

Serious, heavy, and substantial.

Arial 家族

Arial 有2個在「字比率」上變化的字型,構成1個性格相同的緊密家族。

Arial Narrow

Arial Black

如果因應平面空間的需求,字形宜有相當變化,而又必須維持美學「統一、一致、協調」的基本原則,Arial 家族是個有利的選擇。

什麼是美語_美國普通話註:Arial 有人讀作"air-ree-al"['ɛɹɪəl],但其原始應該讀作"are-ree-al"['ɑɹɪəl],這並不是特例,而是美語變遷的常態,請參考:「統雄美語神掌:什麼是美語_美國普通話」。工藝與語言文化也有相連之處,這也是統雄老師強調「多元學習」的例證之一。


花體字/設計特用字體 Variant / Designer Font Faces

除了以上3大類常用字體外,都是屬於花體字,或可稱為個人設計者字型(designer font),美學目的強調與對比,宜少用、慎用。

亦即使用1字、1句、1行,或在特殊情況下,少數幾行,切忌成篇累牘使用。

網路上有不少提供這方面的字體網站,如 http://www.cssfontstack.com/Web-Fonts。 

All other font faces are variant font faces.

Do not use too many: for a word, a sentence, or a single line.

Use them in very careful manner: examine if they fit the text's characteristics. 

花體字中西配字體

花體字也有相對較多適用的,譬如勘亭流、隸書體,適合作標題,而行書體、仿宋體,則可作軟性內容,如詩文、書信使用。

與中文可相配的西文字體,建議為:Bauhaus 93、Algerian、PristinaAgency。展示如下。 

花體字中西配字體


Dingbats 雜錦字體/字型

英文有特殊的 Dingbats,即俗稱雜錦字型,本來是印刷品之中使用的裝飾及圖片符號。在電腦被用來製作印刷刊物後,也使用大小寫字母的編序,對應製造了各種雜錦字型,最著名的是Adobe的 Zapf Dingbats字型。

微軟於Win 3.1作業系統之中,提供了 Wingdings (表示 Win)雜錦符號字型,而於 Win97 之後再加入了 Webdings (表示 Web)雜錦符號字型。 

英文字體常用英文字型名稱與範例

一般軟體使用下拉選單提示字型範例,非常難以記憶、比較選擇。

本表提供一個完整的範例,並包括 Dingbats 字型。

英文字體特殊個人設計者字型 (Designer Fonts) 英文字型範例

連結所示是當前個別設計師的作品。


有角字-無角字 Serif and Sans Serif

數位時代之前‧內文與標題的重要考量

Serif provides a contrast-balance feeling of the characteristics of font face.

Sans serif reinforces thinner or thicker feeling of the characteristics of font face.

角,一般直譯「襯線」,可能很難懂,形式上就是有角與縱橫之粗細不同。

有角字:除了其明顯有稜有角、反映對比作用的個性外,在傳統印刷史上,還有一大功能性:「易讀」。因為油墨印刷與字模會磨損的特性,小字有角,才比較容易閱讀,所以古代-不論東方、西方-的基本字型,通常都是有角字,如明體。

無角字 :形如楷書或圓黑。在機械印刷時代,大字、標題,才會用無角字。但在數位出版上,無角字不會有易讀的問題。對於小字、尤其是西方拼音字,使用降低對比的無角字,可能更好讀。所以如何選擇,美學的考量,已經駕凌於易讀的考量了。

Times New Roman is serif.

Courier New is sans serif.

Arial is sans serif.


內框字-外框字

內框字:字級尺寸的外框,和字的線條之間有留白與間距,如楷書。

外框字:字級尺寸的外框,和字的線條緊密連結,如明體。

所以,同級的外框字比內框字,在視覺上較大,而排版時應該考慮外加「字間距」的設計。


比例字-非比例字 Proportional and Non-proportional

比例字 :數位造字技術上的「向量字」,亦即字即一幅圖,可隨著行寬、字數、標點等因素,被動或自動調整大小、空間、字間距等,如「新細明體」或字型名稱後面有加(P)的字型。

非比例字:早期數位造字技術上的「點矩陣字」,亦即字的尺寸大小固定,如「細明體」。

Proportional fonts are such as Times New Roman and Arial.

Proportional font produces a firm, flexible feeling of the characteristics of font face.

Non-proportional is such as Courier New.

Non-proportional fond maintains a hard, straight feeling of the characteristics of font face.


Web Safe Font 網路通用安全字體

網路通用安全字體(Web Safe Font),是指網路上所有瀏覽器都能夠顯示的字體。

常用網路通用安全字體

常用網路通用安全字體,除了以上3基本字體外,約還有10餘種字體。

最保守的網路通用安全字體

W3C 認證最保守的網路通用安全字體

跨平臺安全字體

微軟與蘋果都可使用的字體

Google Chrome 跨平臺字體

下載 Google Chrome 跨平臺字體

Font Stack, Font Combinations, font-family 字體家族

如果不確定某瀏覽器是否會顯示某花體字,html 有Font Stack 或 Font Combinations,也就是字體家族的觀念,將相似的字體集中,讓瀏覽器按順序選擇。

實施的方法是使用 CSS 的 font-family 屬性,將在後續實作說明。

Web Font 網路設計特用字體

Web Font 網路設計特用字體,是指瀏覽者沒有的字體,而必須由設計者的伺服器,下載到瀏覽者的電腦上。這是 CSS3 後才有的功能,但可能會降低顯示速度。

下載必須使用 CSS3 的屬性: @font-face


反「常用字體」言論與知識真相

網路上不時存在反「常用字體」言論,反對激烈度順序通常是:Arial , Times New Roman,和 Courier 。

不過,觀察文章作者大多數都是廣告設計者、或相關字體視覺工作者,可知這是一種「專家的偏見」。

美學風格的訴求 Style Appeals

第一、許多「專家」有技術,但沒有注意知識,缺乏對美學風格的訴求 Style Appeals 的認識。

美學風格的訴求 Style Appeals 展出:美學會因強調「資訊內涵」或「視覺形象」的目的不同,而形成相對的設計軸線。

相同的媒材,如果是要強調「資訊意涵」的,則要適度減少「視覺形象」的起伏影響。

專家對「常用字體」的反對,常基於主觀認為「常用字體」很「俗」。

「俗」的科學意義是什麼呢?

視覺設計有「常-專」「群-獨」相對的不同。

譬如「白衣黑裙」是一般人對優雅美少女的「常有」感受,如果要表現一個校園裡整體的優雅,讓女主角穿上「白衣黑裙」,自然就賦予了女主角優雅的「資訊意涵」。

但對作廣告而言,自己推的,就是不要與別人「同」,就是要在眾人之中,一眼被看到,所以不能穿「白衣黑裙」,而要改穿「女僕裝」。

科技與應用的「通變觀」

第二、缺乏科技與應用的「通變觀」。

在數位時代之前,由於鑄造字型不易,選擇有限,所以標題字都是選黑體字、無角字。

在進入電腦時代,早期字體的選擇也不多,Arial 因勢而起。

而廣告通常就是1段、1句、1個字,就是標題用法,自然一般會優先選用Arial,用久了,就有「常-專」「群-獨」的現象與問題。

統雄老師的設計論,本來就主張「廣告」「特殊目的」使用花體字,不限Arial,也沒有反對Arial 的必要。

辨識字體行為實驗

第三、缺乏辨識字體行為實驗的認識

反「常用字體」言論者,如果是作網頁設計,就必須考慮「網路通用安全字體」(Web Safe Font),否則變成白作工,所以剔除 

Arial 後,經常建議的是3種:Helvetica, Tahoma, Verdana。

這4種字體的差異非常細微,以當前數位顯示技術,一般人可能非常難以區別,簡介如下:

ArialHelvetica

有些文獻寫Arial 源於 Helvetica,實則不是,而是兩者太相像。

Helvetica(瑞士體)是一個傳奇黑體、或稱角、無襯線體字,是2位瑞士平面設計師於1957年合作設計的,所以命名為 Helvetica,在拉丁文中意味「瑞士的」。在此之前,歐洲流行的是1896年就問世的德國 Akzidenz Grotesk 黑體字。

Helvetica 被視作現代主義設計的典型代表,字體應該「像一個透明的容器一樣」,使得讀者在閱讀的時候專注於文字所表達的內容,而不會關注文字本身所使用的字體。使得在印刷時代,黑體字也能作為內文使用,這種通用性,適合用於表達各種各樣的信息,成為了「國際字體」並且在平面設計界獲得了廣泛的應用,還有人製作了 Helvetica 的同名紀錄片。

「Arial」則是專為電腦使用而設計的字體,於1982年出品,以 Helvetica 的設計理念為範本,但在字體及字距上都作了一些細微的調整和變動,以增加它在電腦螢幕上不同解析度下的可讀性。從微軟在Windows 3.1上推出後,就成為標準配備字型,成為最常用字型之一。 

TahomaVerdana

TahomaVerdana 其實是兄弟,由同1設計師 Matthew Carter,接受微軟委託而製作。

TahomaVerdana 字體結構非常相似, Tahoma 在1994年推出,字元間距較小,亦即在版面空間有限,而拼音文字又特別佔空間時,適合作標題。

Verdana 於1996年推出,在小字上強調結構清晰端整、閱讀辨識容易等表現,因而可作為內文使用的黑體字。 

Arial, Tahoma,  Verdana 大車拼

以下插欄內引文來自 stackoverflow.com,因為是專門問題,且為保留各文獻來源,避免重複,故直接引用。

總的說來,以使用者行為實驗研究,Arial, 比 Tahoma,  Verdana 受到多數使用者歡迎,且近壓倒勝。

當然,也有可能是使用者長期習慣使用 Arial,而形成的「社會相信」。 

General studies comparing Arial to Tahoma/Verdana.

Let me state beforehand that any kind of "better" is highly subjective, but yet there are studies trying to do the impossible.

The first study I want to show you comparing Arial to Tahoma/Verdana shows that from the surveyed people Arial was the most preferred font, with Verdana coming in at second place and Tahoma third (out of the three). However that Arial was the preferred choice might be due to the study at hand as the researches indicate:

[...] since it has been most preferred in our previous font studies that examined children (Bernard, Mills, Frank, & McKown, Winter/2001), older adults (Bernard, Liao, & Mills, Winter/2001), and college students (Bernard & Mills, Summer/2000)
from A Comparison of Popular Online Fonts: Which is Best and When?

Interestingly the study was conducted on a computer, so even though Verdana was designed for the screen the participants still chose Arial over Verdana - maybe because people are so accustomed to seeing Arial/Helvetica everywhere?

A newer study (2002 compared to the last study from 2001) suggests that Verdana is the best choice:

Of the fonts studied, Verdana appears to be the best overall font choice. Besides being the most preferred, it was read fairly quickly and was perceived as being legible.
from A Comparison of Popular Online Fonts: Which Size and Type is Best?

Yet another study would classify Verdana as "dull", Arial as "unimaginative, stable, conformist" which you can read all about here: Perception of Fonts: Perceived Personality Traits and Uses.

If you are looking for results for only elderly people, Arial is the way go at 14 point size, but at 12 point size Verdana wins: Determining the Best Online Font for Older Adults.

A even more recent study (2007) investigating the "Psychology of onscreen type: investigations regarding typeface personality, appropriateness, and impact on document perception" (btw that is 652 pages of font goodness!) shows that Verdana has the highest legibility ranking of all fonts, the same study also finds that 21 people voted Verdana as their favorite, but 60 voted for Arial (again maybe because they KNOW the look of Arial?).

If anything I would suggest you read the last mentioned 652-page study. As for your question why Google chose Arial over Verdana - I don't know. Verdana was designed for the screen using sub-pixels to make best use of technologies like ClearType - hence it looks smoother on screen. People are accustomed to seeing Arial everywhere though, so they might get a feeling of "being at home".

If you want to open another can of worms, look into serif vs sans-serif fonts. Serif fonts are more legible in print, but on the web sans-serif fonts predominate - several studies exist comparing these findings.

answered Nov 24 '10 at 10:39
Dennis G

Trebuchet MS 另出奇兵

1996年在 Verdana 推出時,另一位設計師也為微軟開發了 Trebuchet MS,也是一種無角字體,與以上系列有相當大的差別,尤其較為纖瘦,在網頁設計時之空間利用較佳。所以,英文版的Windows XP更將此字型設為標題列預設字型,並將其納入微軟的產品中,成為了廣泛存在的安全字型。

標題解決方案:Arial Narrow 常用 Trebuchet MS 備援

綜合以上討論,與「帥哥實驗」經驗,要決定那一種字體好看,Arial, Helvetica, Tahoma, Verdana,  Trebuchet MS 都是西裝哥時,很難有一致結果。

所以,當「對比」元素無法適用時,且資訊意涵重於視覺訴求時,在標題上的應用,較佳解決方案是:

Arial Narrow 為常用,但 Arial Narrow 並非網路通用安全字體(Web Safe Font),有些瀏覽器和主機可能無法顯示,則以 Trebuchet MS 為備援、第二選擇。

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題