Context 意涵設計
Character Set, Font and Its Personality意涵-文字視覺-的設計 字碼‧字型‧字體與字的性格
The meaning of your content should be supported
by the visual imagination of your font style.
網站/網頁設計:意涵/文字:屬於美學的統一元素，包括字碼設定,字的預設,字的呈現:字體+字級+字比率+字變化+字間距+字顏色,字的編號,字的位置-方塊模型與定位,層疊樣式表(Cascading
Style Sheets, CSS
Default Character Set 字碼
什麼是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 版本，字碼設定較為繁複。
<meta http-equiv="Content-Language" content="zh-tw" >
'charset' will influence the font. Keep it, if you want to use Chinese.
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)
字的意涵設計
意涵經由文字表達，屬於美學的統一元素，在針對字各種特徵設計完成後的成果，英文就是 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 家族是個有利的選擇。
統雄美語神掌：什麼是美語_美國普通話 」。工藝與語言文化也有相連之處，這也是統雄老師強調「多元學習」的例證之一。
花體字/設計特用字體 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 字型。
連結所示是當前個別設計師的作品。
有角字-無角字 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種字體的差異非常細微，以當前數位顯示技術，一般人可能非常難以區別，簡介如下：
Arial 與 Helvetica 有些文獻寫Arial 源於 Helvetica，實則不是，而是兩者太相像。
Helvetica（瑞士體）是一個傳奇黑體、或稱角、無襯線體字，是2位瑞士平面設計師於1957年合作設計的，所以命名為
Helvetica，在拉丁文中意味「瑞士的」。在此之前，歐洲流行的是1896年就問世的德國 Akzidenz Grotesk 黑體字。
Helvetica
被視作現代主義設計的典型代表，字體應該「像一個透明的容器一樣」，使得讀者在閱讀的時候專注於文字所表達的內容，而不會關注文字本身所使用的字體。使得在印刷時代，黑體字也能作為內文使用，這種通用性，適合用於表達各種各樣的信息，成為了「國際字體」並且在平面設計界獲得了廣泛的應用，還有人製作了 Helvetica 的同名紀錄片。
「Arial」則是專為電腦使用而設計的字體，於1982年出品，以 Helvetica
的設計理念為範本，但在字體及字距上都作了一些細微的調整和變動，以增加它在電腦螢幕上不同解析度下的可讀性。從微軟在Windows
3.1上推出後，就成為標準配備字型，成為最常用字型之一。
Tahoma 與 Verdana Tahoma 與 Verdana
其實是兄弟，由同1設計師 Matthew Carter，接受 微軟委託而製作。
Tahoma 與 Verdana
字體結構非常相似， Tahoma 在1994年推出，字元間距較小，亦即在版面空間有限，而拼音文字又特別佔空間時，適合作標題。
Verdan a 於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.
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
為備援、第二選擇。
Meta Tag
字碼設定
For
Chinese-only Pages 
Bilingual Pages
