市面上有书专门讲排版背后的設計和科学。
如果你想成为专业的設計师,这些书当然是不错的选择。但对于我这样的普通人来说,明显太过专业了。
現在你不需要去學習這些理論和技術了,我把選擇字體應該絕對避免的七大錯誤列出來了。
這些是針對網站的內容區域的(比如大段大段的說明、博客文章等)。
如果你已經在運營一個網站,那麽我建議你打開網站對照下面的七個要點仔細檢查一下。
1.【上一篇】如何應用字體樣式對訪問者産生心理沖擊--尤其是標題、logo等--向訪問者傳達出潛在信息,幫助你樹立品牌形象。
2.【您正在讀】選擇字體和布局的“七宗罪”--如果你能注意到這幾點,那你已經遙遙領先了。
1. 不要使用变形的字体。
可能孩子的生日派對邀請函上會使用這種字體,但如果你想要別人認真對待你的網站,千萬不要使用這種變形的字體。

每種字體都有自己的個性(就像前面說過的一樣)。不同的字體會讓人對你的網站和品牌産生不同的印象。
比如,Papyrus字體會讓人想到古代文明。你會聯想到埃及木乃伊電影,而不會聯想到理財網站。

當然這些字體在一些有趣的或者愛好類網站中很有市場,但如果你想要自己的網站夠專業,千萬不要選擇它們。
2. 不要使用凌乱的字体造成阅读困难
为主要内容选择字体設計和为标题、logo等选择字体是不同的。
网站内容的作用,是向阅读者传达産品或服務相关的有用信息,因此易读性是非常重要的。
要选择設計感太重的字体,以免造成阅读困难。
这些是我喜欢的免费字体风格,很多优秀的網站建設工具都能找到。
如果你有疑問,可以參考下面這幾種字體,適用于大多數場合:

仍然覺得選擇合適的字體很麻煩?
这是Basekit的字体設計流程图(Font Design Flow Chart),可以帮你为内容区域选择合适的字体:
3. 行間距太小
讓內容更便于閱讀的最簡單的方法之一,就是增加行間距。
完美的行間距應該是相應字號的150%。
比如,如果字號是24px,行間距就應該是36px(24px×150%):
完美的行間距
(字號的150%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
行間距太小
(字號的100%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
行間距太大
(字號的185%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
很明顯,最上方的看起來最舒適。
4.不要使用太多不同的字体設計
“少即是多”,設計中永远适用的准则。
网站上的字体設計不宜超过四种。
·大標題、網頁標題一種
·副標題一種(可選--這不是一個必選項。副標題可以跟主體內容使用同個字體,只需要改變一下字號,讓副標題更突出即可)
·主體內容區域一種
·引用內容一種
字體太多會讓網站看起來混亂且不專業。人們可能需要花費很多時間來弄清楚你想要傳達的信息。

所以,請不要讓網站使用的字體超過四種。
5.要使用太多字體顔色
顔色是樹立品牌形象的強大工具。
提起星巴克,你會想到什麽顔色?大部分人想到的肯定是它們logo和網站中使用的綠色。
爲字體選擇顔色時,請只選擇一到兩種品牌顔色,使用在大標題和副標題中。
多于兩種顔色看起來會很淩亂。

6. 不要随意选择字体大小
你可以隨意選擇自己喜歡的字體大小。但在開始分配字號之前,我想先介紹一下模塊化字號。
什麽是模塊化字號?
這是一系列和諧的字號,擁有完美的比例,被大衆認爲是“美麗”的。
我們会被美丽的事物吸引,而最美丽的事物则拥有的完美比例。不管你信不信,这个规律同样适用于字号。
所以不要再猜測你應該用什麽字號了,使用下面據說用于基于數學模型得出的完美比例的字號吧。
推荐的字号:8, 16, 24, 32, 48, 64, 95
16px是主體內容的理想字號。不大不小,幫助提升文字易讀性。
遵循這一准則,你永遠能得到完美比例的字號。
有用的資源:
·想要跟我們推荐的字号不一样的字号?你可以选择Modular Scale Calculator <http://www.modularscale.com/?16,95&px&2&web&text> 来打造自己的字号排列。
7.空白不夠
在網頁上擠下大量信息並不是一件難事。內容越多越好,對不對?
但是,如果網頁上沒有足夠的空白,訪問者往往會被淹沒在大量信息中不知所措,因爲他們需要花費更多精力來消化這些信息。
那麽,你應該怎麽做?
很簡單--只要確保你在段落之間和不同內容之間留有足夠的空白。
空白一般出現在頁面上的標題、副標題、主體、圖片或視頻之間。
你可以立刻行動起來讓網站上的內容更加便于閱讀。
空白如何提升網站性能?
1) 空白让网站看起来更精致、优雅
极简主义的設計给人以优雅、精致、美丽的印象。
網頁上有了空白之後,你的網頁變得更加“極簡主義”。
分享一個案例--能看出來減少內容的好處嗎?

左邊的看起來俗氣而廉價,看起來像是某本八卦雜志的一頁。
而右邊的看起來時髦而高端,就像是一本專業雜志上的。
它們是同個廣告,用了同樣的圖片和內容。它們唯一的不同就是右側的廣告有更多空白。
2) 空白帮助人们关注主要信息
精心布置大空白能夠突出重要的信息而不會顯得俗氣。
標題四周的空白,讓它在頁面上非常突出。
這是這家公司的座右銘。人們訪問網站的時候注意力會被引向這個標題。非常簡潔、直接。
3)空白對眼睛的壓力小,訪問者能閱讀更多內容,在網頁上停留更長時間
如果你經營一個博客或者網站,上面有海量的信息,空白能夠幫助你讓信息看起來不那麽擠。
比如:

在欄與欄之間加入比較寬的空白,讓頁面看起來沒有那麽淩亂。
標題與副標題之間的空白,段與段之間的空白,以及圖片與正文之間的空白,也讓頁面看起來更清爽。
使用空白是提升網站訪問者用戶體驗的簡單技巧。
檢查每一個網頁,看能不能添加一些空白。還有,坐的離電腦屏幕遠一點--這可以幫你發現頁面上的一些淩亂的地方。

結論--如何爲網站選擇合適的字體
作爲網站運營者或者企業主,你應該孜孜不倦地追求以最小的努力獲得豐厚的回報。這些小細節真的能夠改變很多。
排版(选择合适的字体設計)正是这样的小细节之一,只需要你付出很少的努力,就可以为网站和品牌新乡带来重大的积极的改变。
大多数人并不是专业的設計师,但就像你在本文中看到的,提升网站易读性、传达品牌信息并不需要你成为专业設計师,只需按照我們的指南操作即可。
所以,慢慢来,认真看看前面我們提到的要点,并一一对照自己的网站。如果你要建设一个新的网站,请收藏这篇文章。