可能很多人都要問，網頁的文字還需要設計嗎？

對於很多的網站來說，字在整個網站的內容中佔了80%以上甚至更多，或者換個角度上說，網站可以沒有顏色，沒有圖片，但唯獨不能沒有文字。

一個產品團隊，有一個角色叫做Content Design，ucdchina有過一期話題叫做 注意界面上的文字 ，非常精彩，我在寫本文之前，再次通讀一遍，一方面是學習，另一方面，是避免寫重複的內容。如果你按照裡面的觀點對照你的網站，相信一定會有所幫助的。


先看看網站以外的中文字體設計，英文的正文字體有很多可以選擇，但中文的正文字，總的來說就兩種：細明體和黑體。在傳統的版式設計中，網頁設計師們都喜歡做英文的排版，為什麼？從視覺上來看，英文的組合很容易形成線和面的關係，而且字母有節奏感，比如aby這三個字母放一起有高矮區別。中文字相對來說，單調、孤立、不流暢。

回到網頁中文字的設計，網頁設計師基本上不用考慮在字體上做選擇，只有細明體。前文說：單個字成點，一行字成線，一段字成面。這是版式設計最基本的原理，我們需要做的就是強化這樣的感覺。拿微軟雅黑和細明體來舉例子，本人非常喜歡微軟雅黑的設計。




將12號的細明體和雅黑放大，注意以下細節：

1. 雅黑要比細明體寬一像素
2. 雅黑讓每個筆畫往四周撐，比如「是」上面的「日」，雅黑顯得就要飽滿

這麼做的目的只有一個，讓中文字體更容易形成線，從而讀起來更流暢。我們可以看到，儘管雅黑不是真正的正方形，但它看起來要比細明體方一些。

看完上面這個例子，我的觀點也就出來了：別把你的文字看成字，而是看成點，文字的視覺設計其實就是處理點線面的關係。

下面是具體設計方面的點：

1. 字體的單位用em而不用px，儘管12px和0.8em大小差不多。
updete:感謝網友 Dreamcolor 推薦文章 95%的中國網站需要重寫CSS ，該文很詳細的解釋了px和em的差別和原理。這點寫之前是我想當然了，沒有深入理解em單位。只看到很多用em的視覺效果不好看，現在明白了，是因為沒有把em單位和px對上號。結論是應該用em而不是px，但需要把em的值設置好。
2. 在css文件body中的font-family裡面保證」細明體」前面有Arial或者verdana，個人推薦這麼寫：font-family:Helvetica,Georgia,Arial,sans-serif，細明體。這樣能保證你界面中的字母、數字、符號看上去美觀一些，更重要的是更加易讀。
3. 12號細明體時，我們一般使用18-20像素的行距。14號細明體通常使用22-24像素的行距。

很贊同，這個行距大小隨著單行字數的多少而上下浮動。我認為12px字如果單行字數少的話，17也是可以接受的。
4. 正文一行字數最好不超過50，首頁的標題文字以8-20字為佳。
5. 12和14px字相對來說最精緻，13px在需要的時候可以做正文字，word裡面默認的字的大小相當於網頁的13px字。
6. 對於一段文字，尤其是正文部分，保證左右至少有15px的留白，便於用戶換行時不受到干擾。
7. 文字和背景對比要足夠明顯，保證最弱文字的可讀性。

文章來自: Blueidea