2015年10月24日 星期六

CSS學習第一堂課-文字樣式

1.文字大小 font-size

HTML的文字經常都會使用CSS來規範,

適當的大小與文字顏色會對網站的可閱讀性增加,

但文字的大小與顏色通常都要將觀眾的年齡考量進來,

因為25歲以下與30歲到40歲或者是45歲以上的閱讀群,

文字大小與可辨識的色彩會有些微的差異。

我們就以網頁文字的em值來說明,em等於16px的字體,

所以1em的文字大小等於16px的文字大小,

如此一來我們就可以清楚文字大小該如何規範了。



2.文字字體

依據英語語系的網頁設計中的文字,可分為襯線字serif與無襯線字sans-serif兩大類,

襯線字是一種字體的裝飾,類似於我們中文字的明體字形,

常見的襯線字型有:Caslon、Courier、Garamond、Lucida、Sabon、Times New Roman…等等

無襯線字則無裝飾,類似於黑體字形。

常見的無襯線字型有:Avenir、DIN、Frankin Gothic、Frutiger、Futura、Helvetica、Univers…等等。

3.文字字數

另外一行網頁文字的字數也是必須要考量進來的,

也就是說過長的文字閱讀與適當的文字閱讀,會影響讀者的閱讀舒適度。

舉個例子來說吧!下方兩段同的說明,哪一組文字閱讀上會比較方必閱讀呢?

1.HTML的文字經常都會使用CSS來規範與應用,適當的大小與文字顏色會對網站的可閱讀性增加。

2.HTML的文字經常都會使用CSS來規範與應用~
適當的大小與文字顏色會對網站的可閱讀性增加。

如果你認為第1段文字比較方便閱讀,那麼你可以跳過這段話,

如果你選擇的第2段文字,那麼建議一行的文字字數為21~28個字!

但是這是絕對嗎?不一定!

因為這只是建議,每個人都會有不同的閱讀習慣。

畢竟網頁的可閱讀性會間接影響觀眾的回流率,不是嗎?

4.行距 line-height

文章閱讀的順暢度、舒適度、辨識度都是網頁設計師必須要考量的因素,

因此適當的文字行距可以讓觀眾或是讀者易於閱讀,

避免太擁擠的文字編排除了可以讓讀者閱讀起來比較舒服之外,

在閱讀上也比較不會有壓迫感。

5.文字色彩 color

文字色彩也是很重要的樣式,畢竟這會影響整個網站的風格,

也會影響到閱讀時的辨識性,因此設定網頁的文字色彩也是很重要的一環。

所以當我們在設定文字色彩時,可以記住這段口訣:

淺色底深色字,深色底淺色字。

所以文字首要的目的知識與訊息的傳播,只要易於辨識就達成一半的目的了。

沒有留言:

張貼留言