天天看點

《網站設計 開發 維護 推廣 從入門到精通》—— 1.5 文字與圖像版式設計

本節書摘來異步社群《網站設計 開發 維護 推廣 從入門到精通》一書中的第1章,第1.5節,作者:何新起 ,婁彥傑,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

文本是人類重要的資訊載體和交流工具,網頁中的資訊也是以文本為主。雖然文字不如圖像直覺形象,但是卻能準确地表達資訊的内容和含義。在确定網頁的版面布局後,還需要确定文本的樣式,如字型、字号和顔色等,還可以将文字圖形化。

在網頁中,中文預設的标準字型是宋體,英文預設是the new roman。如果在網頁中沒有設定任何字型,在浏覽器中将以這兩種字型顯示。

字号大小可以使用磅(pt)或像素(px)來确定。一般網頁常用的字号大小為12磅左右。較大的字型可用于标題或其他需要強調的地方,小一些的字型可以用于頁腳和輔助資訊。需要注意的是,小字号容易産生整體感和精緻感,但可讀性較差。

無論選擇什麼字型,都要依據網頁的總體設想和浏覽者的需要。在同一頁面中,如果字型種類少,則版面雅緻、有穩重感;如果字型種類多,則版面活躍、豐富多彩。關鍵是如何根據頁面内容來掌握這個比例關系。

行距的變化也會對文本的可讀性産生很大影響,一般情況下,接近字型尺寸的行距設定比較适合正文。行距的正常比例為10:12,即字用10磅,則行距用12磅。如圖1-15所示,行距太小,字型看着很不舒服,而行距适當放大後,字型感覺比較合适。

《網站設計 開發 維護 推廣 從入門到精通》—— 1.5 文字與圖像版式設計

行距可以用行高(line-height)屬性來設定,建議以磅或預設行高的百分數為機關,如line-height:20pt或line-height:150%。

所謂文字的圖形化,即把文字作為圖形元素來表現,同時又強化了原有的功能。作為網頁設計師,既可以按照正常的方式來設定字型,也可以對字型進行藝術化處理。無論怎樣,一切都應該圍繞如何更出色地實作設計目标。

将文字圖形化,以更富創意的形式表達出深層的設計思想,能夠克服網頁的單調與平淡,進而打動人心,圖1-16所示為圖形化的文字。

《網站設計 開發 維護 推廣 從入門到精通》—— 1.5 文字與圖像版式設計