自從 Tim Berners-Lee 在 1991 年實現了第一套超文系統,及網頁瀏覽軟體,網頁設計在網路的歷史上經有好一段時間了,從 ie 1.0 的時代只能純文字瀏覽,到現今有圖、影像及聲音(呼~~),我們更有機會製作、設計、排版更漂亮的網頁。

字體仍是網頁設計上重要的元素,字體的選擇也是一門學問,字體並不是你想說今天想用什麼字體,明天要用什麼字體那麼簡單,近期研究更發現,猴子在經過一段的時間訓練後,更能分辦出 Helvertica 這種字體 90% 的不同。

 

a1.jpg

 

今天,我們要來網頁字型排版這道菜,裡面有四樣主要的配方。如果你有試著做過「提拉米蘇」這道甜點時,你會發現食譜是很重要的,在此,請你在做網頁字型排版前,看看我們食譜內的四樣配方,準備好了,Let's Go!

 

內容索引:
1 對比(Contrast)
2 尺寸(Size)
3 層次(Hierarchy)
4 空白(Space)


對比(Contrast)

淡粉紅色的字搭配淺藍色的背景,在你的 t-shirt 上可能很適合,但是,這樣子並不好閱讀。文字發明的意義在於讓人閱讀,我們必需確認字與背景有足夠的反差。如果你不確定反差是否足夠,你可能用 Print Screen 把網頁畫面捉下來,在圖片編輯器上,將圖片轉變為灰階模式,如此去看看是否還能清楚看到字的內容。而 Robert Bringhurst 在他著作『the consummate typographer』寫道:typography exists to honor content.,意指排版的存在,在於增光內容。因此,你在排版的設計時,有考慮到內容是否易讀呢?

 

contrast-text.gif

 

以個人來說,我比較不喜歡閱讀一段反白的文字(例如黑底白字的樣式),應該很少人會喜歡看到整本書是這樣子的吧,如果是在一篇文章中少些的使用,是還可以接受。

註:Robert Bringhurst
是一位美國的詩人、設計師、作家,他在麻省理工學院研究架構學、語言學、物理學,猶他大學研究比較文學與哲學。其中,他的著作『The Elements of Typographic Style』,更是許多平面設計師的在於字體、字形、視覺及幾何方面的重要參考書。

 


尺寸(Size)


在 Web 2.0 的時代,我發現了一個惱人的小趨勢;就是小字型的使用。雖然我己經與網路的作者(部落格的版主)建議,懇請他們增加預設誤字體大小。但我收到的最多答覆是,「你最好換副眼鏡吧,我從不覺得我文章的字體太小。」很多人對於小字體的最佳辯護就是,這符合我網站的「簡約風格」這類話。我想這類的部落格的讀者大概是超人,或是有超人視力的小傑(『獵人』漫畫主角)吧。

 

big-enough-type_chinese.png

 

英文的話,請不要設定本文小於10或12px,中文則是 11 或12像素,但盡可能再大一點,中文的話目前則是16px是最適合閱讀的大小。中文在 14px 會變得不易閱讀,英文的話是沒有這個問題。

 

層次(Hierarchy)

 

不同字級的大小是區分內容的最好方法之一。不同的顏色或漂亮的方框或許也是方法之一,但不同字體的大小是最常用的方式,當你的讀者在閱讀網頁時,能更清楚的分辦出內容的重要性。如果你的讀者很趕時間,不同的層次能讓他們更快的找到重點,這意味著,他們停留較長的時間和閱讀。

 

內文排版層次 

 

展現層次也可以使用不同的方式,但我們也可以用不同的風格,例如,全大寫,或是副標題使用斜體字襯線體與無襯線體混合使用也可以達到很好的效果。

 

空白(Space)

 

讓你的字呼吸吧。不要害怕你頁面上的空白,這種消極的白色空間將有助於把注意力集中於文字,讓你的文字相對看起來比較注目,以便它更容易被聽到。然後,記得把 CSS 的行間距(line-height)設定為 140%或更高。好的設計師會去努力的微調頁面中的空白配置,他們花費不少的時間去讓畫面中的黑與白達成平衡。同樣的,我們也應該花點時間來調整畫面中的空白處,畢竟,空白也是算是頁面中的一個區塊。


space.png

 

請記住,這只是設計的指導方針(Guideline),而不是設計的規則(Rules),在排版時如果有注意到對比尺寸層次空白,就算做出好吃的提拉米蘇了。

 


創作者介紹

設計自己也設計別人

jaichang2008 發表在 痞客邦 PIXNET 留言(0) 人氣()