電腦上可取得的資訊主要都是文字。文字是有形體的語言，所以本身已有其樣式(style)。當網站設計中用到文字時，文字的樣式就變得很重要。對網頁這樣以文字為重要資訊的媒體而言，字型並非只是裝飾而已，它最重要的使命就是傳達資訊內容，並要讓品質較低的顯示器也能清楚呈現。不了解這一點，就很難有效運用文字樣式。
字型、行距、字距、文字大小、文字顏色等相關設定都是樣式。一點小小的設定，就能時而展現歡樂的氣氛、時而呈現流行感。不過對一般網頁而言，最應優先處理的是「可讀性」。
網頁標題適用的文字樣式
網頁標題的字體都會比較大，所以用的字型要像招牌一樣工整一點、穩一點。電腦分中、日文的全形字以及英數、符號的半形字兩種。在設計標題文字時就要注意這其中之不同，思考全形和半形字如何搭配。此外，中、日文字型和西歐字型不同，能否搭配得宜會影響標題效果。
設計性高的西歐字型
網頁設計上，光是標準西歐字型就非常好用了。如果您還是希望標題字再更有個姓一點，這時您可以買一些對設計很有用的西歐字型，而其中又以migre Font公司的字型以深具個性而聞名。此外，FontFont公司的字型產品、LucasFonts、T26等公司也很值得向各位推薦。至於你要問我哪種字型一定非有不可，那就是Linotype系列了。
Design Sample
http://www.kokuyo.co.jp/
KOKUYO
文字和上下保持夠寬的距離，看起來相當醒目。
http://www.inwei.jp/
廣方圓
從要素之間的間距、配色、設計架構等都要有其特色。
掌握躍動率，就掌握了設計質感
在設計當中，影響文字可讀性的並非大小或粗細等單個文字樣式設定。對人而言，東西看起來如何，本來就是要有相對比較的對象才能決定。例如，小標字體雖小，但是和內文之間只要有足夠的間距，看起來還是醒目。運用這種相對比較對象的不同，感受隨即不同的特點，就能讓設計樣式更豐富多變。
何謂躍動率？
指內文字體大小、小標字體大小或是字體高度不同。內文字體大小12pt配小標字體大小16pt的躍動率很低。如果是內文字體12pt配小標字體26pt，躍動率就會很高。可見面積大的印刷品比較適合較高的躍動率，進而產生較好的對比效果。尤其是報紙的運動版更是需要有較高的躍動率。躍動率高除了給人強烈的印象外，也可以讓人便於從標題當中找到所要的內容。躍動率的概念不只可用於文字，也可用於圖片或視覺要素。
Design Sample
http://www.frogdesign.com/
Frog design
躍動率低，可是小標題字體夠粗、間距夠寬，整體設計不會造成瀏覽的負擔。
配色和間距設定都要設定好
網頁中功能操作與文字內容常常會並列在一起。在追求網頁易讀性的同時，還要配合網頁目的來營造出包括設計風格等在內的整體樣式。尤其是提供新聞、生活資訊的網頁更要注意可讀性。設計重點在於配色要讓文字內容明顯，以及內文區塊和其他要素之間的距離，要設定得恰到好處。換句話說，最大的課題就是要讓文字與其他要素分清楚。
將視線集中於內文
如果想要強調內文部份與導覽部分間的反差對比，首先可以運用配色的技巧。內文部份的顏色如果想要設為黑色或深灰色，與背景成對比，以求畫面可讀性的話，附近的網頁組成要素的彩度就不宜太高，這樣可以避免搶過內文或畫面混亂的情形。如果再如之前所述在導覽部分與內文部份設定足夠的間距，畫面看起來就會更清爽。
文字安排要有足夠的空間
以下是要在800×600像素標準顯示器顯示時，設定三欄式樣式之各欄寬幅大小的標準數值。中間的文字資訊空間如果有左右兩欄的兩倍，瀏覽起來會比較沒有負擔。標準設定一般都是中間內文字體設為12pt(px)，每一行32個字左右，這樣會比較好看。
網站設計的死角
中文報紙都是由上到下，由右而左的編排方式，從讀者的視線移動方式我們可以推斷右上、左下的空間會形成死角。因為讀者看報會先從右上看起、看到中間再看到左下角。那麼網站又是如何呢？這就要看標題和導覽的位置而定了。在顯示範圍中，只要有一個醒目的標題，這個標題對角線上的空間就會相對地變得比較不醒目。如果設計的樣式是將導覽部分放在左邊，右下角就會形成死角；相反的，導覽部分安排在畫面上方，下面的內容再採兩欄的方式，就比較不會形成死角。
Design Sample
http://jvsc.jst.go.jp/universe/luna/
Japan Science and Technology Corporation! Return to the moon
以文字要素的易讀性為優先，採簡單的兩欄式設計。
用堆積木的方式，架構重心很穩的網站
網站LOGO就像網站的招牌一樣，具有很大的存在意義。很多企業網站乾脆就用他們公司的LOGO來當網站LOGO，但有時也會碰到需要有網站本身標誌的情形，所以大致了解LOGO製作的秘訣還是很重要的。首先要注意的就是，幾乎所有用的徒刑都不出圓形、三角形、四角形這三種。對於這點，喜歡用圓形文字等做小圖的人要特別注意了。如何讓LOGO整體能穩穩地「頂天立地」，才是設計者該考量的重點。
「長體」和「平體」
在一定的空間範圍內，如果文字數多，就要把字體調窄調長，這種手法稱為「長體」，其祕訣就是將字型調得稍微窄一點，但是又不會太明顯。如果調得太窄，字體看起來太長，就會破壞字體本身的形式。如果是由上而下讀來，字體會看起來比較長。將字型調寬的這種技巧稱為「平體」。由左而右讀起來時，文字上方的空間較大，文字下方也會比較穩的感覺。
Design Sample
http://www.mediathatmattersfest.org/mtm04/
MEDIA THAT MATTERS 4
LOGO字型很穩，下方再加一行平體的副標題，感覺就很協調。
http://www.aromatiqueltd.com/
Aromatique
手寫字型和裝飾影像搭配得很協調，畫面感覺很乾淨。
突顯大標題或小標題的基本技巧
改變文字樣式以呈現出文章重要性是大家都很熟悉的設計方式。現在我們再進一步將不同字體大小的字放在一起。為了讓人對內容的印象更為深刻，我們可加強大標題或小標題的質感。看看我們週遭的書籍或商品包裝，您一定不難發現很多商品名稱都是不同字型的組合。只要慎選合於網頁主題的字型，再注意大小設定，就可以呈現出文字的萬種風情。
全形字型呈現的風格差異
Gothic字型呈現的風格是簡單而又現代。它有個特點就是雖然字小，還是很容易辦認得，因此常用於內文或導覽標籤、圖片說明等。字體調粗時看起來就會很有力度，要強調的部分也會很清楚，調細時又給人中性的感受，不管和什麼網頁組成要素一起用，都很協調。比平面媒體更重機能性的Web網站上常常都會使用Gothic字型。
明體的字型在筆劃的結尾做了些像鬍子一樣的裝飾。正式且具知性的這種字型適合用於公文、報導等，例如平面媒體中就常使用這種字型。不過這種字型有個缺點，就是字體小一點時不易辦識，使用時要特別注意大小。另外，這種字型也不適合用在網站導覽文字。
西歐字型呈現的風格差異
Sans-serif字型相當於日文字型中的Gothic，由於沒有裝飾看起來很清爽，任何內容文字都可使用。
Serif字型相當於明體，和明體一樣給人正襟危坐的感覺。另外，明體古典的感覺也跟具現代感的serif系列字型不同。這種字型在英文報紙上很常見。
Script是指手寫字型。取自筆記書寫方式，又給人很正式的感覺，另外還有草寫的字型。
Design Sample
http://www.nttdata.co.jp/
NTT DATA-At the Forfront
分別使用了日文字型和西歐字型，感覺和印刷品一樣很有質感。
http://www.aoyagisikkiten.co.jp/
青柳漆器店
網站LOGO的手寫字型，和稍微拉長的標題明體搭配得可說是天衣無縫。
中文和英文直書的呈現法
在網路上有時候也需要表現中文情懷。而在進行這種網頁設計時，就會需要直書方式來呈現內容。電腦的世界一般都是以橫書為主，工具列的文字編排功能也是以橫書為設計基準，因此，除了改變方向外，也會需要做細微的調整，甚至還可以用適合直書的字型。了解了這些，就可以做出精緻、和影像相當協調的網頁設計。
不同的基準線設定
在電腦中輸入文字時都會有基準線來對齊文字，沒有特別設定的話那就是位於文字下方。這是根據西歐文字的特色而做的設定，只是中文也得套用一樣的設定。在直書時，如果完全不做任何調整，基準線會在文字左邊，整個文字看起來就會像是重心往左傾。如果直書的文字當中有英文或符號，基準線就會不同，這點要特別注意，看是要調整設定，或是將整段文字設定成對齊中間直線(置中對齊)。
英文的直書方式
如果是點綴性質的話，文字部分在畫面左邊時就由下而上，在畫面右邊時則是由上到下，這樣看起來比較自然。
Design Sample
http://www.busho-aichi.jp/japanese/index.html
武將的故鄉─愛知
扁長的內文和字型讓人想起古早的日本報紙。
有效運用設計空間的選單配置
畫面兩邊縱向的分區導覽，採列出數項連結文字(link text)的清單選項方式。清單的形式就是一條一條列出來，清單的區塊由標題、項目符號（如●◇★等）或數字、以及每項的文字三個要素所組成。只要依設計目的，調整這些要素的位置關係或邊距，就能有效運用設計空間。
三角形項目符號清單
標題的第一個字和三角形項目符號置左對齊。標題下方行距設為文字大小的1.5倍，三角形符號的大小要以標題首字的橫向中央位置為準。項目符號和文字之間要空一個字大小的空間。
圓形項目符號清單
如果是圓形項目符號，與項目文字之間的距離就可以比三角形項目符號和文字之間的距離窄一點。
Design Sample
http://www.hayonstudio.com/home.php
Hayon studio
上下都取很大的間距，感覺很簡單、無壓迫感。
http://www.intel.co.jp/
Intel
不同的選單用不同的項目符號，讓整體設計的外觀和感覺都很統一。
兼顧網站樣式和操作簡易度的字型
Web的導覽也可以使用文字表示。導覽用的文字我們稱之為標籤(label)，標籤設計會影響到網站整體的設計質感。導覽按鈕(Navigation button)上的標籤位置稍微有點移動、或按鈕整體樣式和標籤樣式不協調等，都會降低網站設計的品質。此外，字型也會大大影響標籤醒目與否。在設計時要避開不易瀏覽、不醒目的表現方式。
標籤字小時
網路上可讀之最小文字大小為10pt，若要以此為導覽標籤文字時，那麼用對比色較強的Gothic字型比較不會受其影響。相反的，如果對比色不明顯，又使用明體字型，就會造成瀏覽上的負擔，也不好操作。
一般的標籤
若使用12pt大小的設定，則不管是使用Gothic、或明體都可以一目暸然。10pt的粗體Gothic還是很難讀，12pt的話就好讀多了。
適用明體的按鈕樣式
使用漸層或纖細的中間色時，就很適合使用明體。這時文字可以設大一點，以避免不易瀏覽的問題，並給人知性的印象。使用漸層的按鈕顏色較與眾不同，也能給人清爽的印象。
字型的種類
可以設定文字樣式的字型資料大致分為TrueType、NewCID和OpenType三種。TrueType是Windows系統用的字型，一般而言電腦中都會內建。NewCID則是專業人士使用的字型，多用於設計工作。而OpenType的使用者也有越來越多的趨勢。本來使用者需要配合作業系統購買的字型，可是OpenType在Windows、Mac兩種系統通用，並能安裝在伺服器上，不管在哪種作業系統環境下都可使用，因此漸受歡迎。
Design Sample
http://www.locksoflove.org/
Locks of Love
標籤文字和網站可愛的風格搭配得宜到好處。
http://www.uogashi-meicha.co.jp/
日文和英文並列，具知性美。
http://www.amazon.com/
Amazon
這裡用的字型很細，但卻不妨礙閱讀。
有助理解圖片的設計要素
平面媒體上每個圖片一定都有其說明文字(caption)，以助瀏覽者了解該圖內容。雖然其屬輔助性質，但現在已經有越來越多使用者，會先透過圖片和其說明文字大致掌握訊息內容，再來閱讀內文以補充所需資訊。因為Web的設計空間有限，因此安排說明文字位置和採用的方法，都需要用點心思來設計。此外，像Flash這類設計自由度高的軟體，可以讓人做出和印刷品並無二致的說明文字設計，您不妨試試。
Web與Unicode
在做印刷品時，常需要自己造字(這些情況幾乎都是發生在人名上)，或是購買字型來使用。可是在網路上人名的顯示卻很容易發生問題，例如SMAP的「草彅剛」等就是很好的例子。由於這樣的字一般的文字碼無法顯示，所以常常都會用假名表示。可是，現在這個問題已獲得解決，因為Unicode這種字碼可以顯示全世界的文字。
Design Sample
http://www.manneken.co.jp/menu/stand.html
Manneken比利時鬆餅
包圍住文字的元件其大小關係保持絕佳的平衡。
http://www.toraya-group.co.jp/
虎屋株式會社
說明文字的位置關係呈現一種平面設計的協調。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
箭號的樣式等說明文字以外的網頁元件雖然小，但是看得很清楚。
表格的樣式種類
一件事情可分成好幾項的這種資訊，很適合用表格的方式呈現。表格名稱或分類條件可分別寫在行或列的儲存格上，再以顏色或框線來區別。這個樣式非常簡單，可是儲存格內各項對齊等需要注意的地方很多。這種樣式如果都是直線，看起來會很沒意思，所以不管是有色儲存格，或是表格中的內容都需要取足夠的間距，不要讓畫面看起來擠在一起。
XHTML和表格
現在製作Web網站的標準程式語言是XHTML。使用XHTML時，由於裝飾性的要素並不包含在標籤碼(tag code)裡，而要用CSS來指定。HTML將複雜的設計全部用table標籤來做，但是XHTML則是禁止在表格以外的部分使用table功能，而是先用標籤做出表格，再以CSS設定顏色或文字的位置。
Design Sample
http://www.thebodyshop.com.tw/
THE BODYSHOP
表格的設定讓商品看起來很美觀。
http://hmv.com/hmvweb/home.do
HMV UK
清楚區別開每一行，讓資訊更清楚易懂也更優美。
運用文字獨特的外形，架構出整個畫面的方法
以字型的外型或位置配置引人注意的設計我們稱之為字型藝術(typography)。本來這個字的意思是包含文字本身的設計，但廣義而言，文字為主的設計樣式也可算在字型藝術的範疇。文字比圓形或方形等圖形要素的外形更複雜，且文字當中又有其意義，相當適合用來做知性的表現。不過，光是排列文字是無法表現出什麼風格出來的。因此我們就從「深度的表現方式」切入，說明如何用文字來做設計。
文字藝術
電腦問世之後，字型的表現更多樣了，但在此之前就有很多將文字外形提升到藝術層次的作品。尤其是20世紀前半的作品到現在仍很具影響力。俄羅斯結構主義藝術家Aleksandr Rodchenko以像建築物一樣，從紙面上立起的字型藝術給圖像設計界嶄新的衝擊。另外Bauhaus的Paul Klee也以TYPEFACE為主要結構的油彩畫，將文字的可能性更推廣了一步。這兩位都是大家需要認識的藝術家。
Design Sample
http://www.toraya-group.co.jp/history/his02_001_02.html
虎屋株式會社
嚴謹的格線架構讓僅有導覽部分的網頁設計很有力。
http://www.adametrope.com/
Adam et Rope
故意將設計放斜，讓四四方方的格線設計展現獨特的個性。
對文字資訊而言，灰色比黑色更具功能性
有人說灰色是人類唯一不覺得刺激的顏色。內文字型顏色使用灰色最大的好處，就是較不易引起讀者眼睛疲勞吧！另外，對比的強弱也會影響可讀性。強烈的對比很醒目，清楚易讀；較弱的對比則較不醒目，不易閱讀。黑色很適合用來提供文字資訊之用，但和其他顏色仍差很多，也可能讓讀者眼睛疲累。所以在這裡，我們就來介紹如何發揮並利用灰色的優點。
Point1：在背景色明度高、彩度低的版本，可以加強文字的對比以讓整體有強弱變化。背景色、文字顏色的對比色若都很高，則整個畫面會感覺好像沒有整理好、很複雜的感覺。
Point2：中間灰色文字呈現的感覺。眼睛不易疲累的灰色最適合用來顯示文字。文字大小設為14pt，比黑色但設為12pt還更容易瀏覽。另外，以灰色為內文，以黑色的標題時，標題自然會更為明顯。
Point3：內文文字如為10pt，顏色設為黑色，行距空大一點，就會很清楚易懂。字體很小又使用灰色的話，文章整體看起來就會好像是配角一樣，這點要多加注意。
冷色系的配色與內文顏色
青色或綠色等冷色系的顏色會讓人覺得很遠、很深。背景為冷色系時內文就很適合用灰色。灰色也是讓人感到距離較遠、深度較深的顏色，所以背景和內文就會呈現一定的距離感，而這樣的距離感會讓設計很有一體感、很穩的感覺。和內文為黑色字型的版本相比，更為一目暸然。
暖色系的配色與內文顏色
背景顏色為暖色系時，內文顏色就很適合搭配用黑色字型。如果搭配灰色，看起來會很像被吸到裡面去，感覺很不協調。這時要用和暖色系一樣用很明顯的黑色，才會感覺平衡。
灰階70%是最易閱讀的文字顏色
物體存在的知覺是靠該物體及其背景亮度之差來識別。關於亮度的差或對比的區別能力，60歲的人只有20多歲的人的一半左右，所以不管哪個網站都需要很小心考量文字內容的可讀性。
亮度差在顯示器上就會變成是明度的差，所以可說文字和背景色的對比越高，便越適於所有人來瀏覽。亮度差最大的顏色搭配是文字為原色的綠(G)色、背景為黑色。這個灰度的差為了配合Web設計的目的將其轉為灰階，並將文字顏色與背景顏色反轉後，文字就變成70%的灰色。所以背景為白色的網頁搭配70%的灰色是最適合瀏覽的。
Design Sample
http://en.red-dot.org/
Red dot design
灰階設定在50%到60%的網站，灰階顏色差異不大，很易於瀏覽。
http://www.illums.co.jp/about/
ILLUMS Japan
內文部份為灰階50%、10pt的明體。整個架構看起來很舒適、很高雅。
http://www.misawa.co.jp/otikaku/index.html
MISAWA
灰階80%、亮度差恰到好處，易於閱讀。
design note
Web與字型
字型不光只是用來讀而已，還可以用形狀來表現。字體較粗的字型比字體較細的字型更醒目，感覺也較有份量。字型設計在電腦成為設計工具的90年代初期開始發展，有越來越多設計者投入數位字型的製作，字型可能的呈現方式更受到矚目。其中Neville Brody更是將字型可能性大為拓展的一位設計師，他追求的文字設計是不只要能讀，還要能讓人眼光久久不忍離去。在Neville Brody出現後，日本甚至還出現一種只有漫畫台詞的海報，只有字型樣式的表現方式蔚為流行。
然而，時序進入2000年，隨著資訊流通型態的Web網站和手機使用率增加，文字和文字表現開始被切割，原因也許是因為網路還可以有聲音、動作等過去平面影像所沒有的要素可以運用，所以很多人就朝著那些方向挑戰去了。於是，文字資訊的功能就只重視資訊取得的效率性和易讀性而已。過去有好幾度說要開發在HTML也可自由使用各種字型的技術，可是似乎又沒有使用明體(正式)或Gothic(休閒)以外字型的需求。重視字型的設計性而將部份標題影像化的做法又有很多人覺得不方便。不過，現在已經有一種可以讓文字兼具使用便利性與設計性的技術－sIFR(或是Scalable Inman Flash Replacement)問世了，樣式與功能再也不是魚與熊掌不可兼得的難題了。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
字型、行距、字距、文字大小、文字顏色等相關設定都是樣式。一點小小的設定，就能時而展現歡樂的氣氛、時而呈現流行感。不過對一般網頁而言，最應優先處理的是「可讀性」。
一目瞭然的開頭
網頁標題適用的文字樣式
網頁標題的字體都會比較大，所以用的字型要像招牌一樣工整一點、穩一點。電腦分中、日文的全形字以及英數、符號的半形字兩種。在設計標題文字時就要注意這其中之不同，思考全形和半形字如何搭配。此外，中、日文字型和西歐字型不同，能否搭配得宜會影響標題效果。
設計性高的西歐字型
網頁設計上，光是標準西歐字型就非常好用了。如果您還是希望標題字再更有個姓一點，這時您可以買一些對設計很有用的西歐字型，而其中又以migre Font公司的字型以深具個性而聞名。此外，FontFont公司的字型產品、LucasFonts、T26等公司也很值得向各位推薦。至於你要問我哪種字型一定非有不可，那就是Linotype系列了。
Design Sample
http://www.kokuyo.co.jp/
KOKUYO
文字和上下保持夠寬的距離，看起來相當醒目。
http://www.inwei.jp/
廣方圓
從要素之間的間距、配色、設計架構等都要有其特色。
標題和內文的配置要注意不要頭重腳輕或腳重頭輕
掌握躍動率，就掌握了設計質感
在設計當中，影響文字可讀性的並非大小或粗細等單個文字樣式設定。對人而言，東西看起來如何，本來就是要有相對比較的對象才能決定。例如，小標字體雖小，但是和內文之間只要有足夠的間距，看起來還是醒目。運用這種相對比較對象的不同，感受隨即不同的特點，就能讓設計樣式更豐富多變。
何謂躍動率？
指內文字體大小、小標字體大小或是字體高度不同。內文字體大小12pt配小標字體大小16pt的躍動率很低。如果是內文字體12pt配小標字體26pt，躍動率就會很高。可見面積大的印刷品比較適合較高的躍動率，進而產生較好的對比效果。尤其是報紙的運動版更是需要有較高的躍動率。躍動率高除了給人強烈的印象外，也可以讓人便於從標題當中找到所要的內容。躍動率的概念不只可用於文字，也可用於圖片或視覺要素。
Design Sample
http://www.frogdesign.com/
Frog design
躍動率低，可是小標題字體夠粗、間距夠寬，整體設計不會造成瀏覽的負擔。
內文部份要能輕鬆瀏覽
配色和間距設定都要設定好
網頁中功能操作與文字內容常常會並列在一起。在追求網頁易讀性的同時，還要配合網頁目的來營造出包括設計風格等在內的整體樣式。尤其是提供新聞、生活資訊的網頁更要注意可讀性。設計重點在於配色要讓文字內容明顯，以及內文區塊和其他要素之間的距離，要設定得恰到好處。換句話說，最大的課題就是要讓文字與其他要素分清楚。
將視線集中於內文
如果想要強調內文部份與導覽部分間的反差對比，首先可以運用配色的技巧。內文部份的顏色如果想要設為黑色或深灰色，與背景成對比，以求畫面可讀性的話，附近的網頁組成要素的彩度就不宜太高，這樣可以避免搶過內文或畫面混亂的情形。如果再如之前所述在導覽部分與內文部份設定足夠的間距，畫面看起來就會更清爽。
文字安排要有足夠的空間
以下是要在800×600像素標準顯示器顯示時，設定三欄式樣式之各欄寬幅大小的標準數值。中間的文字資訊空間如果有左右兩欄的兩倍，瀏覽起來會比較沒有負擔。標準設定一般都是中間內文字體設為12pt(px)，每一行32個字左右，這樣會比較好看。
網站設計的死角
中文報紙都是由上到下，由右而左的編排方式，從讀者的視線移動方式我們可以推斷右上、左下的空間會形成死角。因為讀者看報會先從右上看起、看到中間再看到左下角。那麼網站又是如何呢？這就要看標題和導覽的位置而定了。在顯示範圍中，只要有一個醒目的標題，這個標題對角線上的空間就會相對地變得比較不醒目。如果設計的樣式是將導覽部分放在左邊，右下角就會形成死角；相反的，導覽部分安排在畫面上方，下面的內容再採兩欄的方式，就比較不會形成死角。
Design Sample
http://jvsc.jst.go.jp/universe/luna/
Japan Science and Technology Corporation! Return to the moon
以文字要素的易讀性為優先，採簡單的兩欄式設計。
網站LOGO設計樣式豐富多變
用堆積木的方式，架構重心很穩的網站
網站LOGO就像網站的招牌一樣，具有很大的存在意義。很多企業網站乾脆就用他們公司的LOGO來當網站LOGO，但有時也會碰到需要有網站本身標誌的情形，所以大致了解LOGO製作的秘訣還是很重要的。首先要注意的就是，幾乎所有用的徒刑都不出圓形、三角形、四角形這三種。對於這點，喜歡用圓形文字等做小圖的人要特別注意了。如何讓LOGO整體能穩穩地「頂天立地」，才是設計者該考量的重點。
「長體」和「平體」
在一定的空間範圍內，如果文字數多，就要把字體調窄調長，這種手法稱為「長體」，其祕訣就是將字型調得稍微窄一點，但是又不會太明顯。如果調得太窄，字體看起來太長，就會破壞字體本身的形式。如果是由上而下讀來，字體會看起來比較長。將字型調寬的這種技巧稱為「平體」。由左而右讀起來時，文字上方的空間較大，文字下方也會比較穩的感覺。
Design Sample
http://www.mediathatmattersfest.org/mtm04/
MEDIA THAT MATTERS 4
LOGO字型很穩，下方再加一行平體的副標題，感覺就很協調。
http://www.aromatiqueltd.com/
Aromatique
手寫字型和裝飾影像搭配得很協調，畫面感覺很乾淨。
有效運用各種字型效果
突顯大標題或小標題的基本技巧
改變文字樣式以呈現出文章重要性是大家都很熟悉的設計方式。現在我們再進一步將不同字體大小的字放在一起。為了讓人對內容的印象更為深刻，我們可加強大標題或小標題的質感。看看我們週遭的書籍或商品包裝，您一定不難發現很多商品名稱都是不同字型的組合。只要慎選合於網頁主題的字型，再注意大小設定，就可以呈現出文字的萬種風情。
全形字型呈現的風格差異
Gothic字型呈現的風格是簡單而又現代。它有個特點就是雖然字小，還是很容易辦認得，因此常用於內文或導覽標籤、圖片說明等。字體調粗時看起來就會很有力度，要強調的部分也會很清楚，調細時又給人中性的感受，不管和什麼網頁組成要素一起用，都很協調。比平面媒體更重機能性的Web網站上常常都會使用Gothic字型。
明體的字型在筆劃的結尾做了些像鬍子一樣的裝飾。正式且具知性的這種字型適合用於公文、報導等，例如平面媒體中就常使用這種字型。不過這種字型有個缺點，就是字體小一點時不易辦識，使用時要特別注意大小。另外，這種字型也不適合用在網站導覽文字。
西歐字型呈現的風格差異
Sans-serif字型相當於日文字型中的Gothic，由於沒有裝飾看起來很清爽，任何內容文字都可使用。
Serif字型相當於明體，和明體一樣給人正襟危坐的感覺。另外，明體古典的感覺也跟具現代感的serif系列字型不同。這種字型在英文報紙上很常見。
Script是指手寫字型。取自筆記書寫方式，又給人很正式的感覺，另外還有草寫的字型。
Design Sample
http://www.nttdata.co.jp/
NTT DATA-At the Forfront
分別使用了日文字型和西歐字型，感覺和印刷品一樣很有質感。
http://www.aoyagisikkiten.co.jp/
青柳漆器店
網站LOGO的手寫字型，和稍微拉長的標題明體搭配得可說是天衣無縫。
內容文字直寫
中文和英文直書的呈現法
在網路上有時候也需要表現中文情懷。而在進行這種網頁設計時，就會需要直書方式來呈現內容。電腦的世界一般都是以橫書為主，工具列的文字編排功能也是以橫書為設計基準，因此，除了改變方向外，也會需要做細微的調整，甚至還可以用適合直書的字型。了解了這些，就可以做出精緻、和影像相當協調的網頁設計。
不同的基準線設定
在電腦中輸入文字時都會有基準線來對齊文字，沒有特別設定的話那就是位於文字下方。這是根據西歐文字的特色而做的設定，只是中文也得套用一樣的設定。在直書時，如果完全不做任何調整，基準線會在文字左邊，整個文字看起來就會像是重心往左傾。如果直書的文字當中有英文或符號，基準線就會不同，這點要特別注意，看是要調整設定，或是將整段文字設定成對齊中間直線(置中對齊)。
英文的直書方式
如果是點綴性質的話，文字部分在畫面左邊時就由下而上，在畫面右邊時則是由上到下，這樣看起來比較自然。
Design Sample
http://www.busho-aichi.jp/japanese/index.html
武將的故鄉─愛知
扁長的內文和字型讓人想起古早的日本報紙。
清單選項方式的選單架構
有效運用設計空間的選單配置
畫面兩邊縱向的分區導覽，採列出數項連結文字(link text)的清單選項方式。清單的形式就是一條一條列出來，清單的區塊由標題、項目符號（如●◇★等）或數字、以及每項的文字三個要素所組成。只要依設計目的，調整這些要素的位置關係或邊距，就能有效運用設計空間。
三角形項目符號清單
標題的第一個字和三角形項目符號置左對齊。標題下方行距設為文字大小的1.5倍，三角形符號的大小要以標題首字的橫向中央位置為準。項目符號和文字之間要空一個字大小的空間。
圓形項目符號清單
如果是圓形項目符號，與項目文字之間的距離就可以比三角形項目符號和文字之間的距離窄一點。
Design Sample
http://www.hayonstudio.com/home.php
Hayon studio
上下都取很大的間距，感覺很簡單、無壓迫感。
http://www.intel.co.jp/
Intel
不同的選單用不同的項目符號，讓整體設計的外觀和感覺都很統一。
導覽的標籤和字型
兼顧網站樣式和操作簡易度的字型
Web的導覽也可以使用文字表示。導覽用的文字我們稱之為標籤(label)，標籤設計會影響到網站整體的設計質感。導覽按鈕(Navigation button)上的標籤位置稍微有點移動、或按鈕整體樣式和標籤樣式不協調等，都會降低網站設計的品質。此外，字型也會大大影響標籤醒目與否。在設計時要避開不易瀏覽、不醒目的表現方式。
標籤字小時
網路上可讀之最小文字大小為10pt，若要以此為導覽標籤文字時，那麼用對比色較強的Gothic字型比較不會受其影響。相反的，如果對比色不明顯，又使用明體字型，就會造成瀏覽上的負擔，也不好操作。
一般的標籤
若使用12pt大小的設定，則不管是使用Gothic、或明體都可以一目暸然。10pt的粗體Gothic還是很難讀，12pt的話就好讀多了。
適用明體的按鈕樣式
使用漸層或纖細的中間色時，就很適合使用明體。這時文字可以設大一點，以避免不易瀏覽的問題，並給人知性的印象。使用漸層的按鈕顏色較與眾不同，也能給人清爽的印象。
字型的種類
可以設定文字樣式的字型資料大致分為TrueType、NewCID和OpenType三種。TrueType是Windows系統用的字型，一般而言電腦中都會內建。NewCID則是專業人士使用的字型，多用於設計工作。而OpenType的使用者也有越來越多的趨勢。本來使用者需要配合作業系統購買的字型，可是OpenType在Windows、Mac兩種系統通用，並能安裝在伺服器上，不管在哪種作業系統環境下都可使用，因此漸受歡迎。
Design Sample
http://www.locksoflove.org/
Locks of Love
標籤文字和網站可愛的風格搭配得宜到好處。
http://www.uogashi-meicha.co.jp/
日文和英文並列，具知性美。
http://www.amazon.com/
Amazon
這裡用的字型很細，但卻不妨礙閱讀。
圖像與說明文字
有助理解圖片的設計要素
平面媒體上每個圖片一定都有其說明文字(caption)，以助瀏覽者了解該圖內容。雖然其屬輔助性質，但現在已經有越來越多使用者，會先透過圖片和其說明文字大致掌握訊息內容，再來閱讀內文以補充所需資訊。因為Web的設計空間有限，因此安排說明文字位置和採用的方法，都需要用點心思來設計。此外，像Flash這類設計自由度高的軟體，可以讓人做出和印刷品並無二致的說明文字設計，您不妨試試。
Web與Unicode
在做印刷品時，常需要自己造字(這些情況幾乎都是發生在人名上)，或是購買字型來使用。可是在網路上人名的顯示卻很容易發生問題，例如SMAP的「草彅剛」等就是很好的例子。由於這樣的字一般的文字碼無法顯示，所以常常都會用假名表示。可是，現在這個問題已獲得解決，因為Unicode這種字碼可以顯示全世界的文字。
Design Sample
http://www.manneken.co.jp/menu/stand.html
Manneken比利時鬆餅
包圍住文字的元件其大小關係保持絕佳的平衡。
http://www.toraya-group.co.jp/
虎屋株式會社
說明文字的位置關係呈現一種平面設計的協調。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
箭號的樣式等說明文字以外的網頁元件雖然小，但是看得很清楚。
種類眾多的表格樣式
表格的樣式種類
一件事情可分成好幾項的這種資訊，很適合用表格的方式呈現。表格名稱或分類條件可分別寫在行或列的儲存格上，再以顏色或框線來區別。這個樣式非常簡單，可是儲存格內各項對齊等需要注意的地方很多。這種樣式如果都是直線，看起來會很沒意思，所以不管是有色儲存格，或是表格中的內容都需要取足夠的間距，不要讓畫面看起來擠在一起。
XHTML和表格
現在製作Web網站的標準程式語言是XHTML。使用XHTML時，由於裝飾性的要素並不包含在標籤碼(tag code)裡，而要用CSS來指定。HTML將複雜的設計全部用table標籤來做，但是XHTML則是禁止在表格以外的部分使用table功能，而是先用標籤做出表格，再以CSS設定顏色或文字的位置。
Design Sample
http://www.thebodyshop.com.tw/
THE BODYSHOP
表格的設定讓商品看起來很美觀。
http://hmv.com/hmvweb/home.do
HMV UK
清楚區別開每一行，讓資訊更清楚易懂也更優美。
魅力無比的文字設計
運用文字獨特的外形，架構出整個畫面的方法
以字型的外型或位置配置引人注意的設計我們稱之為字型藝術(typography)。本來這個字的意思是包含文字本身的設計，但廣義而言，文字為主的設計樣式也可算在字型藝術的範疇。文字比圓形或方形等圖形要素的外形更複雜，且文字當中又有其意義，相當適合用來做知性的表現。不過，光是排列文字是無法表現出什麼風格出來的。因此我們就從「深度的表現方式」切入，說明如何用文字來做設計。
文字藝術
電腦問世之後，字型的表現更多樣了，但在此之前就有很多將文字外形提升到藝術層次的作品。尤其是20世紀前半的作品到現在仍很具影響力。俄羅斯結構主義藝術家Aleksandr Rodchenko以像建築物一樣，從紙面上立起的字型藝術給圖像設計界嶄新的衝擊。另外Bauhaus的Paul Klee也以TYPEFACE為主要結構的油彩畫，將文字的可能性更推廣了一步。這兩位都是大家需要認識的藝術家。
Design Sample
http://www.toraya-group.co.jp/history/his02_001_02.html
虎屋株式會社
嚴謹的格線架構讓僅有導覽部分的網頁設計很有力。
http://www.adametrope.com/
Adam et Rope
故意將設計放斜，讓四四方方的格線設計展現獨特的個性。
如何讓文字資訊的顏色和設計保持融洽的關係
對文字資訊而言，灰色比黑色更具功能性
有人說灰色是人類唯一不覺得刺激的顏色。內文字型顏色使用灰色最大的好處，就是較不易引起讀者眼睛疲勞吧！另外，對比的強弱也會影響可讀性。強烈的對比很醒目，清楚易讀；較弱的對比則較不醒目，不易閱讀。黑色很適合用來提供文字資訊之用，但和其他顏色仍差很多，也可能讓讀者眼睛疲累。所以在這裡，我們就來介紹如何發揮並利用灰色的優點。
Point1：在背景色明度高、彩度低的版本，可以加強文字的對比以讓整體有強弱變化。背景色、文字顏色的對比色若都很高，則整個畫面會感覺好像沒有整理好、很複雜的感覺。
Point2：中間灰色文字呈現的感覺。眼睛不易疲累的灰色最適合用來顯示文字。文字大小設為14pt，比黑色但設為12pt還更容易瀏覽。另外，以灰色為內文，以黑色的標題時，標題自然會更為明顯。
Point3：內文文字如為10pt，顏色設為黑色，行距空大一點，就會很清楚易懂。字體很小又使用灰色的話，文章整體看起來就會好像是配角一樣，這點要多加注意。
冷色系的配色與內文顏色
青色或綠色等冷色系的顏色會讓人覺得很遠、很深。背景為冷色系時內文就很適合用灰色。灰色也是讓人感到距離較遠、深度較深的顏色，所以背景和內文就會呈現一定的距離感，而這樣的距離感會讓設計很有一體感、很穩的感覺。和內文為黑色字型的版本相比，更為一目暸然。
暖色系的配色與內文顏色
背景顏色為暖色系時，內文顏色就很適合搭配用黑色字型。如果搭配灰色，看起來會很像被吸到裡面去，感覺很不協調。這時要用和暖色系一樣用很明顯的黑色，才會感覺平衡。
灰階70%是最易閱讀的文字顏色
物體存在的知覺是靠該物體及其背景亮度之差來識別。關於亮度的差或對比的區別能力，60歲的人只有20多歲的人的一半左右，所以不管哪個網站都需要很小心考量文字內容的可讀性。
亮度差在顯示器上就會變成是明度的差，所以可說文字和背景色的對比越高，便越適於所有人來瀏覽。亮度差最大的顏色搭配是文字為原色的綠(G)色、背景為黑色。這個灰度的差為了配合Web設計的目的將其轉為灰階，並將文字顏色與背景顏色反轉後，文字就變成70%的灰色。所以背景為白色的網頁搭配70%的灰色是最適合瀏覽的。
Design Sample
http://en.red-dot.org/
Red dot design
灰階設定在50%到60%的網站，灰階顏色差異不大，很易於瀏覽。
http://www.illums.co.jp/about/
ILLUMS Japan
內文部份為灰階50%、10pt的明體。整個架構看起來很舒適、很高雅。
http://www.misawa.co.jp/otikaku/index.html
MISAWA
灰階80%、亮度差恰到好處，易於閱讀。
design note
Web與字型
字型不光只是用來讀而已，還可以用形狀來表現。字體較粗的字型比字體較細的字型更醒目，感覺也較有份量。字型設計在電腦成為設計工具的90年代初期開始發展，有越來越多設計者投入數位字型的製作，字型可能的呈現方式更受到矚目。其中Neville Brody更是將字型可能性大為拓展的一位設計師，他追求的文字設計是不只要能讀，還要能讓人眼光久久不忍離去。在Neville Brody出現後，日本甚至還出現一種只有漫畫台詞的海報，只有字型樣式的表現方式蔚為流行。
然而，時序進入2000年，隨著資訊流通型態的Web網站和手機使用率增加，文字和文字表現開始被切割，原因也許是因為網路還可以有聲音、動作等過去平面影像所沒有的要素可以運用，所以很多人就朝著那些方向挑戰去了。於是，文字資訊的功能就只重視資訊取得的效率性和易讀性而已。過去有好幾度說要開發在HTML也可自由使用各種字型的技術，可是似乎又沒有使用明體(正式)或Gothic(休閒)以外字型的需求。重視字型的設計性而將部份標題影像化的做法又有很多人覺得不方便。不過，現在已經有一種可以讓文字兼具使用便利性與設計性的技術－sIFR(或是Scalable Inman Flash Replacement)問世了，樣式與功能再也不是魚與熊掌不可兼得的難題了。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
