字體之美：從傳統印刷到Web排版 字体之美:从传统印刷到Web排版

<內容提要>

 

Web頁面之美，美在何處？在於字形傳達出來的情感，在於版式對信息的合理分割和佈局，在於與閱讀場景的完美契合。而這一切的重中之重在於字體。本書就教授怎樣通過字體的設計、選擇、搭配與佈局，製作出帶給人美感，幫助讀者理解和找尋信息的Web頁面。全書分為四篇：第1篇詳述如何從字體風格、字形特徵、易讀性和協調性來挑選字體，夯實基礎；第2篇講述如何通過分塊、標題設置、構造佈局等來設計適合瀏覽的網頁；第3篇講述如何根據讀者的閱讀方式來設置導航系統、應用柵格系統、創建字體庫等，從而設計適合休閑和持續閱讀的網頁；第4篇詳述了三種排版風格：傳統風格、現代主義風格和後現代主義風格，指出了各自適用的場景。作者將傳統印刷中的版式設計原則提煉出來，應用到Web頁面；同時，也總結了近些年Web頁面排版的一些經驗。書中附帶了很多實用的HTML和CSS代碼示例，並配有相應的練習，方便讀者一邊學習一邊實踐。

 

<目錄>

 

前言 ...................................................................................................... 1

第1 篇 如何選擇字體

第1章

分解與易讀性：字體易讀嗎 .................................................................11

是什麽讓字體易讀 ............................................................................................11

對比 Georgia 與 Helvetica ..................................................................................11

對比更多字體 ....................................................................................................13

課程1 在線比較字體 ......................................................................... 16

在 Typetester 上比較字體 .................................................................................16

寫下你所看到的 ................................................................................................16

在 Typetester 上設置字號 .........................................................................17

理解 HTML、CSS、Web 服務器、瀏覽器及個人電腦是如何合作的 ..........17

HTML ...........................................................................................................17

CSS ...............................................................................................................17

瀏覽器 ........................................................................................................18

個人電腦與字體 ........................................................................................18

繼續前進 ............................................................................................................19

第2章

審美與情感：字體是否承載了正確的信息 .......................................... 21

選擇有恰當美學或者情感關聯的字體 ...........................................................21

襯線字體給人以傳統感覺，無襯線字體給人以現代感 ...............................22

與格式打交道 ....................................................................................................23

課程2 文字的含義 ............................................................................ 25

表達同一單詞的不同含義 ................................................................................25

寫下你所看到的 ................................................................................................26

編寫你的HTML 與CSS 文件 ....................................................................26

命名規範 ....................................................................................................26

組織文件 ....................................................................................................26

編寫 HTML 文件 .........................................................................................27

DOCTYPE 與DTD ........................................................................................27

標簽 ............................................................................................................28

Head、Title 和Body 元素 .........................................................................28

編寫 CSS 文件 ............................................................................................30

描述元素 ....................................................................................................30

創建一個 div ..............................................................................................32

繼續前進 ............................................................................................................35

第3章

對比度、字形及字符：這個字體能勝任嗎 .......................................... 37

粗體中應該關註什麽 ........................................................................................37

斜體中應該關註什麽 ........................................................................................38

選擇字體時還要考慮什麽 ................................................................................39

如果單個字體無法達到想要的所有效果，怎麽辦 .......................................40

課程3 一篇參考書目短文（第1部分） .............................................. 42

使用單一字體創建一篇參考書目 ...................................................................42

寫下你所看到的 ................................................................................................43

使用HTML 與CSS 設計參考書目 ....................................................................43

編寫 HTML 文件 ...........

 

<作者介紹>

 

Laura Franz ，是馬薩諸塞州大學達特茅斯分校的設計學副教授，她已經在該校執教Web 版式設計課程12 年。

她講授多種版式設計課程，包括版式設計I，字形的歷史與構造，以及頁面版式設計介紹；版式設計II，版式即信息；版式設計III，實際情境中的版式：印刷業與Web ；版式設計IV，以字體設計為題的本科研究項目。她還是馬薩諸塞州大學達特茅斯分校Web 與交互設計專業碩士認證的聯合協調人。

她所做的專業設計既有針對傳統印刷的，也有針對Web 設計的。正在進行的創新研究項目包括historictype.、goodwebfonts. 及新Bedford 字體項目。她教授Web 版式設計，也在相關專題討論會上演講，還曾為Lynda. 撰寫相關課程。

對於如何將這一行的藝術與責任傳授給未來的版式設計師們，她也特別感興趣。