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

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

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

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

淺色底深色字，深色底淺色字。

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