《字型之美:從傳統印刷到Web 排版》是2016年1月電子工業出版社出版的圖書，作者是【美】Laura Franz(勞拉· 弗朗茨)。
基本介紹
- 書名：字型之美：從傳統印刷到Web排版
- 作者：勞拉·弗朗茨
- 譯者：石岩、吳寧
- ISBN：9787121279027
- 類別：藝術設計
- 頁數：324
- 出版時間：2015-12
- 裝幀：平裝
- 開本：16開
- 千字數：420
內容簡介,目錄信息,
內容簡介
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 檔案 .........................................................................................43
編寫 CSS 檔案 ............................................................................................44
改進版式設計 ............................................................................................46
通過創建 class 來將標題設為斜體 ..........................................................48
繼續前進 ............................................................................................................49
第4章
搭配兩種字型 ...................................................................................... 51
裝飾字型：使用第二字型 ................................................................................51
確定你需要什麼樣的第二字型 ...............................................................51
考慮一致性與對比度 ................................................................................51
正文字型：使用第二字型 ................................................................................53
確定你需要什麼樣的正文第二字型 .......................................................53
考慮平衡性與延續性 ................................................................................53
關於本章中使用的字型 ............................................................................55
課程4 一篇參考書目短文（第2部分） .............................................. 56
為標題設定裝飾字型 ........................................................................................56
使用你為標題挑選的字型 ................................................................................56
寫下你所看到的 ................................................................................................57
使用 @font-face 與字型棧 ................................................................................57
理解 @font-face .........................................................................................57
法律問題：鏈入並非嵌入 .......................................................................57
技術問題：不同瀏覽器使用不同的字型格式 .......................................57
選擇字型 ....................................................................................................58
構造字型棧 ................................................................................................60
繼續前進 ............................................................................................................62
插曲1 節奏與張力
第5章
版式布局中的節奏與張力 .................................................................... 65
重複與對位 ........................................................................................................65
焦點 ............................................................................................................66
構造強調豎線 ............................................................................................67
空間張力 ............................................................................................................69
課程5 A代表Alignment ..................................................................... 72
課程概覽 ............................................................................................................72
創造動態構圖（第1 部分） ..............................................................................73
編寫 HTML 檔案 .........................................................................................73
編寫CSS 檔案 ............................................................................................74
添加並描繪區塊（容器）..........................................................................74
添加內容並定義元素 ................................................................................79
升華版式 ....................................................................................................80
創造動態構圖（第2 部分） ..............................................................................82
利用圖片將字母A 作為背景 ...................................................................82
增加類選擇器，創造正文的對位 ...........................................................84
繼續前進 ............................................................................................................85
第2 篇 如何設計版式：帶著目的瀏覽
第6章
我們的閱讀方式（第1部分） .............................................................. 89
字號.....................................................................................................................89
行高.....................................................................................................................90
行寬.....................................................................................................................91
對齊.....................................................................................................................93
顏色（黑/ 白） ...................................................................................................95
課程6 系列電影（第1部分） ............................................................ 96
課程概覽 ............................................................................................................97
創建系列電影頁面 ............................................................................................98
編寫HTML 檔案 ........................................................................................98
編寫CSS 檔案 ............................................................................................99
編寫系列電影頁面 ......................................................................................... 102
繼續前進 ......................................................................................................... 104
第7章
信息分片：豎直方向的分隔（spacing）與鄰近（proximity） .......... 105
基礎分隔：段落 ............................................................................................. 106
構造豎直分隔體系 ......................................................................................... 106
課程7 系列電影（第2部分） ...........................................................110
課程概覽 ......................................................................................................... 110
開發豎直分隔體系 ......................................................................................... 111
確定並套用豎直分隔層級 .................................................................... 111
理解邊距疊加 ......................................................................................... 112
最佳化豎直分隔 ......................................................................................... 112
繼續前進 ......................................................................................................... 114
第8章
利用標題將信息分片：層次結構與相似性 .........................................115
層次結構 ......................................................................................................... 115
層次結構和相似性 ......................................................................................... 117
課程8 系列電影（第3部分） .......................................................... 120
課程概覽 ......................................................................................................... 120
創建標題體系 ................................................................................................. 121
確定並套用層次體系 ............................................................................. 121
如有必要，返回調整 ............................................................................. 122
繼續前進 ......................................................................................................... 124
第9章
處理版式細節 .................................................................................... 125
添加第二字型 ................................................................................................. 125
運用分割線 ..................................................................................................... 126
數字和縮寫詞 ................................................................................................. 127
處理標點符號 ................................................................................................. 127
引號 ......................................................................................................... 127
單折號和雙摺號 ..................................................................................... 128
避免寡行和孤行 ............................................................................................. 129
課程9 系列電影（第4部分） .......................................................... 131
課程概覽 ......................................................................................................... 131
照顧版式設計細節 ......................................................................................... 132
從FontSequirrel.com 下載字型 ............................................................. 132
在CSS 檔案里描述@font-face .............................................................. 133
標識需要修改的地方 ............................................................................. 134
再次檢查作品 ......................................................................................... 138
繼續前進 ......................................................................................................... 140
插曲2 列表式信息
第10章
列表信息的版式處理方式 .................................................................. 143
易讀性 ............................................................................................................. 143
相近性 ............................................................................................................. 143
相似性 ............................................................................................................. 144
讀者的閱讀方式 ............................................................................................. 144
分割線 ..................................................................................................... 144
數字 ......................................................................................................... 145
課程10 Martha的葡萄園輪渡時間表 ............................................... 147
課程概覽 ......................................................................................................... 147
通過 組織表格 .................................................................... 148
編寫HTML 檔案 ..................................................................................... 148
編寫CSS 檔案 ......................................................................................... 148
構建輪渡時間表頁面 ............................................................................. 148
構建表格 ................................................................................................. 149
找出問題 ................................................................................................. 152
找出新問題 ............................................................................................. 157
重構表格周圍的構圖 ............................................................................. 157
繼續前進 ......................................................................................................... 159
第3 篇 版式運用：休閒閱讀與持續閱讀
第11章
我們的閱讀方式（第2部分） ............................................................ 163
大小寫 ............................................................................................................. 163
風格.................................................................................................................. 164
字重.................................................................................................................. 165
顏色.................................................................................................................. 165
創造多樣的文本風格 ..................................................................................... 167
文本中的常見元素 ................................................................................. 167
多樣的文本風格幫助定義元素 ............................................................ 167
元素風格同樣關乎網站帶給人帶來的感覺 ........................................ 167
課程11 食譜（第1部分） ............................................................... 169
課程概覽 ......................................................................................................... 170
將色彩、圖片和列表結合起來 ..................................................................... 170
編寫 HTML 檔案 ...................................................................................... 170
編寫 CSS 檔案 ......................................................................................... 171
開始添加內容 ......................................................................................... 171
拆分文本才能看到元素 ......................................................................... 172
將信息分塊 ............................................................................................. 173
創建並定義食材列表 ............................................................................. 173
將烹飪原料的 div 容器變得窄一些 ...................................................... 175
創建並定義主導航列表 ......................................................................... 177
為每個文本元素設定符合其自身語意的風格 .................................... 179
繼續前進 ......................................................................................................... 181
第12章
表達結構和韻律：柵格 ..................................................................... 183
模組化的柵格與文本 ..................................................................................... 183
網頁柵格與閱讀 ............................................................................................. 184
如何建立柵格 ................................................................................................. 186
從文本需求出發 ..................................................................................... 186
手動完成實體元素塊的排布 ................................................................ 186
使用圖片處理軟體來排布頁面元素 .................................................... 187
樂於修改元素 ......................................................................................... 187
為最佳布局手工著色 ............................................................................. 188
草圖比以往更重要 ......................................................................................... 188
課程12 食譜（第2部分） ............................................................... 190
課程概覽 ......................................................................................................... 191
探索柵格並記錄過程 ............................................................................. 191
建立柵格 ................................................................................................. 191
使用嵌套的div 元素來創建複雜列 .............................................................. 191
挑選你想創建的布局 ............................................................................. 191
理解列與行 ............................................................................................. 192
讓代碼變得井井有條：CSS 中的記號 ................................................. 195
HTML 中的記號 ...................................................................................... 196
構建基礎的頁面結構 ............................................................................. 196
如何構建基礎頁面結構 ......................................................................... 197
在結構容器中擺放內容 ......................................................................... 200
重新定義內容的布局 ............................................................................. 201
如何重新排布內容 ................................................................................. 201
修復“雙倍邊距”bug ........................................................................... 205
即將完成 ................................................................................................. 206
繼續前進 ......................................................................................................... 206
第13章
幫助讀者縱覽網站內容：導航 .......................................................... 207
導航也是文本，需要具備可讀性 ................................................................ 207
點擊我，我會帶你前往目的地 ..................................................................... 207
讀者在網頁中所處的位置 ............................................................................. 208
喔，你可以去這些地方 ................................................................................. 209
你已經到過這裡了 ......................................................................................... 210
隨時待命 ......................................................................................................... 210
課程13 食譜（第3部分） ............................................................... 212
課程概覽 ......................................................................................................... 212
連結語法與偽類選擇器 ................................................................................. 213
準備開始：下載一些頁面以便於連結 ................................................ 213
添加連結語法：主導航 ......................................................................... 213
為主導航連結增加互動性 .................................................................... 216
創建並描述一個“ You Are Here” 類 ..................................................... 217
添加連結語法：區域連結 .................................................................... 218
為區域連結添加互動 ............................................................................. 220
創建並描述“You Are Here”類 ........................................................... 221
添加連結語法：廣告 ............................................................................. 222
繼續前進 ......................................................................................................... 223
第14章
系統的跨頁面套用 ............................................................................ 225
套用系統的五個原因 ..................................................................................... 225
對於讀者來說，系統使網站更易用 .................................................... 225
你已經完成了這項艱難的工作，為什麼要重新再做一次 ............... 225
不同的頁面感覺起來依然是整體的一部分 ........................................ 225
允許多人在網站上工作，且保持一致性 ............................................ 226
數據驅動的網站創建動態頁面 ............................................................ 226
一開始就為不同的頁面進行規劃 ................................................................ 227
考慮靈活性 ..................................................................................................... 227
課程14 食譜（第4部分） ............................................................... 229
課程概覽 ......................................................................................................... 230
在多個頁面中套用 CSS .................................................................................. 230
創建一個新網頁 ..................................................................................... 230
確認並解決問題 ..................................................................................... 231
如何解決系統中的問題 ......................................................................... 231
構建剩餘的食譜頁 ................................................................................. 237
繼續前進 ......................................................................................................... 238
插曲3 構建字型庫
第15章
構建自己的字型庫 ............................................................................ 241
分類.................................................................................................................. 241
五大字族 ......................................................................................................... 241
擴展五大字族分類體系 ......................................................................... 242
老式字型 ................................................................................................. 242
過渡字型 ................................................................................................. 243
現代字型/Didone ................................................................................... 244
粗襯線字型 ............................................................................................. 245
無襯線字型 ............................................................................................. 246
特排字型 ................................................................................................. 247
辨識優秀的 Web 字型 .................................................................................... 247
優秀的 Web 正文字型 ........................................................................... 247
優秀的 Web 特排字型 ........................................................................... 248
構建字型庫 ..................................................................................................... 249
免費或者開放授權的字型 .................................................................... 250
購買 Web 授權 ........................................................................................ 251
訂閱服務 ................................................................................................. 252
課程15 批判地分析字型 ................................................................. 254
課程概覽 ......................................................................................................... 255
查看新字型的哪些方面 ......................................................................... 255
使用 Font Squirrel 的 Web 字型 ..................................................................... 255
找到需要調整的地方 ............................................................................. 258
我是如何修復自己設計里的問題的 .................................................... 258
使用 Google Web Fonts 的 Web 字型 ............................................................ 260
找到需要調整的地方 ............................................................................. 262
我是如何修復自己設計里的問題的 .................................................... 262
使用 Typekit 的 Web 字型 .............................................................................. 263
找到需要調整的地方 ............................................................................. 266
我是如何修復自己設計里的問題的 .................................................... 266
繼續前進 ......................................................................................................... 268
第4 篇 版式設計：理念風格
第16章
傳統版式 ........................................................................................... 271
傳統版式的特點 ............................................................................................. 271
傳統版式有文本框 ................................................................................. 271
傳統版式使用襯線字型 ......................................................................... 272
傳統版式尋求平衡感 ............................................................................. 273
傳統版式傳達優雅感 ............................................................................. 274
排版師的角色 ................................................................................................. 275
課程16 以傳統方式設計與製作網站 ............................................... 276
課程概覽 ......................................................................................................... 277
設計過程 ......................................................................................................... 277
傳統頁面元素 ................................................................................................. 277
回顧背景圖片 ................................................................................................. 277
編寫HTML 檔案 ..................................................................................... 277
編寫 CSS 檔案 ......................................................................................... 278
添加背景圖片 ......................................................................................... 278
填入並準備文字 ..................................................................................... 279
設計版式頁面 ................................................................................................. 280
連結其他課程資料夾中的檔案 ..................................................................... 280
繼續前進 ......................................................................................................... 281
第17章
現代主義版式 .................................................................................... 283
現代主義版式的特徵 ..................................................................................... 283
現代主義版式以某種構築方式運用留白 ............................................ 283
現代主義版式使用無襯線字型 ............................................................ 284
現代主義版式使用對比來突出重點 .................................................... 284
現代主義版式傳達不對稱的、鮮活的情感 ........................................ 284
排版師的角色 ................................................................................................. 286
課程17 以現代主義方式設計並實現網站 ........................................ 287
課程概覽 ......................................................................................................... 288
設計過程 ......................................................................................................... 288
現代主義版式元素 ......................................................................................... 288
修改 CSS 來創作新設計 ................................................................................. 288
設計版式頁面 ......................................................................................... 288
修改 CSS 即修改全部 ............................................................................. 289
繼續前進 ......................................................................................................... 289
第18章
後現代主義版式 ................................................................................ 291
後現代主義版式的特徵 ................................................................................. 291
後現代主義版式會把文字放到頁面任何位置 .................................... 291
後現代主義版式使用任意可行的字型 ................................................ 291
後現代主義版式使用對比來突出內容 ................................................ 291
後現代主義版式通過形式傳達內涵 .................................................... 292
後現代主義版式傳達結構意義 ............................................................ 292
排版師的角色 ................................................................................................. 292
課程18 用後現代主義的方式設計並實現網站 ................................. 295
課程概覽 ......................................................................................................... 296
設計過程 ......................................................................................................... 296
後現代主義版式元素 ..................................................................................... 296
探索“爛”代碼 ............................................................................................. 296
設計版式頁面 ......................................................................................... 296
繼續前進 ......................................................................................................... 297
附錄A
繼續前進：推薦閱讀資料 .................................................................. 299
挑選和使用字型 ............................................................................................. 299
處理頁面中的文本 ......................................................................................... 299
開發柵格 ......................................................................................................... 299
版式設計歷史 ................................................................................................. 300
Web 版式設計前沿 ......................................................................................... 300
代碼：CSS 和顏色 .......................................................................................... 300
對版式設計的情感 ......................................................................................... 300
參考文獻 ......................................................................................................... 301
