讓人「讀得進去」的文字安排

把文字安排得讓人讀得下去

字型、大小、行距、對齊：四種文字安排的重要概念

二組不同文字安排對比

數位文本是一種用來「螢幕閱讀」的資訊呈現形 式。螢幕閱讀要求快速掃瞄、快速理解大意，再來決定是否要花時間往下「吸收」更詳細的資訊。 所以，文字呈現的安排就「非常重要」。文字呈現處理的不好，讀者馬上就會跳走，對文字連看都不會再看一眼。 因之，在螢幕上文字就不應長成「一坨」的樣子，而因是有一些「被呼吸」的空間，讓讀者可以「走入文字」。這就要能有好的文字呈現安排。

Rin YANO: 文字間距離影響易讀性 大部分的使用者都是貪圖方便才會使用網路，因此，必須將資訊編排成可以輕鬆閱讀的資訊量才行。 矢野りん／許郁文譯（2010）。《設計的世界》，頁76。台北：悅知文化。

數位文本是一種用來「螢幕閱讀」的資訊呈現形式。螢幕閱讀要求快速掃瞄、快速理解大意，再來決定是否要花時間往下「吸收」更詳細的資訊。 所以，文字呈現的安排就「非常重要」。文字呈現處理的不好，讀者馬上就會跳走，對文字連看都不會再看一眼。 因之，在螢幕上文字就不應長成「一坨」的樣子，而應是有一些「被呼吸」的空間，讓讀者可以「走入文字」。這就要能有好的文字呈現安排。

<td style="vertical-align: top; width: 60%; font-family: 微軟正黑體; font-size: 120%; line-height: 1.5em; text-align: justify;">

如何安排行高的高度呢？　　矢野りん：……⊿

標題和內文區的間距要和標題字體大小相同或是大個1.5倍來做為比較標準。內文由於文字量較多，所以字體愈小，行距就能取得愈大，這樣瀏覽起來就比較沒有負擔。

矢野りん／王煦淳譯（2006）。《WEB LAYOUT 設計的美學》，頁2-8。台北：旗標出版。

如何思考 web 上文字的數量？　　Jakob Nielsen & Hoa Loranger：……⊿

通常，當你為Web而寫作時，文字的數量應該是為印刷出版物寫作的一半。如果目標讀者是包括了範圍更廣的、沒有經過或只經過很少教育的讀者，最好將文字數量的目標定為印刷出版物寫作的25%。

Nielsen, J. & Loranger, H.／張亮譯（2008）。《設計好網站的黃金準則》，頁79。台北：悅知文化。

影音教學 with Kompozer

影音內容重點說明：
(1)font-family: XXXX；字體的選擇：微軟正黑體，標楷體。
(2)font-size: xxx%；字的大小，120%是指1.2倍大。
(3)line-height:行高；line-height: 1.5em，是指1.5倍字的高度。em是指「字」，一個英文是半型，為0.5em，一個中文字是全型，為1em。
(4)text-align: justify；是指對齊形態，justify是指左右對齊。還有，left, center, right，居左、居中和居右。一般而言，中文大都用左右對齊

Nielsen, J. & Loranger, H.／張亮譯（2008）。《設計好網站的黃金準則》，頁79。台北：悅知文化。

整塊的文字就好像是烏龜那種堅硬的外殼。很多掠食者會放棄這個行動緩慢的傢伙，因為根本不值得花費時間和力氣來打開它的外殼以便吃到肉。同樣的道理，Web使用者也會認為不值得花費那麼多時間在密集的文字中搜集資訊。

＃　引用範例語法，請直接copy下列語法並更動中文內容即可：

<div style="padding: 0.5em; width: 640px; font-family: 微軟正黑體; font-size: 1.21em; font-weight: normal; line-height: 1.8em; text-align: justify; letter-spacing: 0.1em;">
數位文本是一種用來「螢幕閱讀」的資訊呈現形式。螢幕閱讀要求快速掃瞄、快速理解大意，再來決定是否要花時間往下「吸收」更詳細的資訊。 所以，文字呈現的安排就「非常重要」。文字呈現處理的不好，讀者馬上就會跳走，對文字連看都不會再看一眼。<br>
</div>

---