文章

「字大」派

本站的 veryplaintext 模版大概是一年前轉用 WordPress 時安裝的。然而,我自己也做了不少調較,如字型、Margin、單篇排版等等。我是一個「字大」派,一段長文裏的字應該夠大和清晰,行高與文字間隔也應調整得宜,這樣讀者 (至少我) 才會看得舒服。

(一) 大小 (font-size) – 理論上,預設的瀏覽器文字大小應該是最適合的。但實際上,只談 Windows 的話,中文字在網頁上的大小,偏偏又只有某些數值 (如 9pt, 12pt 等等) 是比較合適,其他的會出現「爛字」情形 (IE 好一點)。而在這些字型比較美觀的數值裏,其實也只是大和小兩種。 (當然還有可作微調的 px 值,但在此省略) 。我現在的設定值是:瀏覽器預設值的 76% x 1.15 em ,很複雜吧,對於一般 windows 和 Firefox 來說大概是 12pt。

(二) 字距 (letter-spacing) – 有人認為設定成 1em,即如蘋果日報網站的字距。但事實上,蘋果的字距,是暴力地在每個字之間加入「全形空白」的字元,而非用 CSS 來設定。為甚麼呢?因為用 CSS 設定的話,就連英文字每串的字母字距也會拉長,很不好看。我自己則認為,預設一般瀏覽器所設的字距已經足夠了,所以我只是微調了 letter-space 值為 1px。

(三) 行高 (line-height) – 是可以很有效地減消文字之間的壓迫感的,看起來會比較有「呼吸」空間,跳行時也會舒服些。我的設定是 1.55em。

(四) 段落間隔 – 一般認為應用空行分段,也可以增加文字區塊間的「呼吸」空間。因為這裏使設了用 textile 為轉換器,所以段與段之間,不是 br ,而是正確地用 p 包圍著。亦因此,只要在 CSS 設定好 p 的 margin 值就可以了 (留意要計算 margin collapse 在內)。

另外,最近看到一個叫 E2R 的網站,所推的就是「簡單易讀」(並非指內容) 的文字排版。其提倡有五個要點,可以參考一下:

  1. 長篇文章使用標準字型大小
  2. 提供空白
  3. 設定行高
  4. 用清晰的顏色對比
  5. 不用圖顯示文字

當然,這不是甚麼金科玉律,但作為一個體貼讀者的 blogger,應該考慮讀者可以舒舒服服讀你的文章。無論你是選用「字大派」還是「字小派」,單單調較好行高已經令效果很不同了。

還好的是,用 Firefox, Opera 等瀏覽器的話,你可以自由設定字體大小。不會像 IE6 般被 CSS 「騎劫」了字體大小。( IE7有無問題?)

延伸閱讀:

回應

  1. 小奧:你的站應該不難改。
    試試在 littleoslov3.css
    找 .entry, .entrytext {…} 這一項 css,加入

    • font-size: 1.3em;
    • letter-spacing: 1px;
    • line-height: 1.5em;

    三個數值可以自己調節嘗試。

  2. 說起來,wordpress 有沒有 plugin 是給瀏覽者即時將字體變大/小?
    找了一會,好像沒有呢

  3. 看起來很不錯。想加插別的,

    text-align 可設定為 justify。即是「左右對齊」,段落看去較美觀。

    想修改 CSS 己很久。可是我太懶。 :P

*