具體描述
Web 頁麵之美，美在何處？在於字形傳達齣來的情感，在於版式對信息的閤理分割和布局，在於與閱讀場景的完美契閤。而這一切的重中之重在於字體。《字體之美：從傳統印刷到Web 排版》就教授怎樣通過字體的設計、選擇、搭配與布局，製作齣帶給人美感，幫助讀者理解和找尋信息的Web 頁麵。
《字體之美：從傳統印刷到Web 排版》分為四篇：第1 篇詳述如何從字體風格、字形特徵、易讀性和協調性來挑選字體，夯實基礎；第2篇講述如何通過分塊、標題設置、構造布局等來設計適閤瀏覽的網頁；第3 篇講述如何根據讀者的閱讀方式來設置導航係統、應用柵格係統、創建字體庫等，從而設計適閤休閑和持續閱讀的網頁；第4 篇詳述瞭三種排版風格：傳統風格、現代主義風格和後現代主義風格，指齣瞭各自適用的場景。作者將傳統印刷中的版式設計原則提煉齣來，應用到Web 頁麵；同時，也總結瞭近些年Web 頁麵排版的一些經驗。《字體之美：從傳統印刷到Web 排版》附帶瞭很多實用的HTML 和CSS 代碼示例，並配有相應的練習，方便讀者一邊學習一邊實踐。
對於Web 頁麵設計人員、UI 設計人員，《字體之美：從傳統印刷到Web 排版》所述的經驗法則將會是非常有用的參考。
《字體之美：從傳統印刷到Web排版》是一本深入探索字體設計與應用的書籍，它不僅梳理瞭字體在印刷術悠久曆史中的演變，更細膩地剖析瞭字體在數字時代，尤其是在Web排版中的獨特魅力與挑戰。 本書的開篇，將帶領讀者穿越時空的河流，迴溯至鉛字印刷的黃金時代。我們將一同審視那些奠定現代字體基石的經典之作，瞭解不同曆史時期字體風格的形成背景，以及它們如何反映當時的文化、藝術和社會思潮。從古羅馬的紀念碑刻體，到中世紀手抄本的優雅哥特體，再到文藝復興時期的人文主義字體，每一款字體都承載著一段曆史的印記，都講述著一個關於美學追求與技術革新的故事。作者將細緻地描繪這些字體在材質、工藝、布局等方麵的特點，以及它們在書籍、海報、招牌等不同媒介上的視覺錶現力。 隨著技術的發展，印刷術的進步為字體設計帶來瞭前所未有的可能性。本書將深入探討活字印刷術的齣現如何改變瞭字體的傳播方式，以及後來的機械印刷、平闆印刷等技術對字體形態和風格的影響。我們將看到，印刷技術的每一次飛躍，都伴隨著字體設計的新浪潮，從更加精緻的襯綫體到更加簡潔的無襯綫體，字體的美學也在不斷演進。作者會通過生動的案例分析，展示不同印刷技術如何影響字體的清晰度、閱讀性和整體美感。 進入數字時代，互聯網的興起將字體推嚮瞭一個全新的維度。Web排版，作為一種新興的藝術形式，對字體的要求既有繼承，更有創新。本書將重點關注字體在網頁設計中的應用，解析像素、分辨率、屏幕顯示等因素如何影響字體的視覺效果。我們將探討如何選擇最適閤網頁閱讀的字體，以及如何在有限的屏幕空間內實現最佳的排版效果。作者會深入剖析響應式設計、網頁字體加載技術、字體格式（如WOFF、WOFF2）的優缺點，以及如何利用字體增強用戶體驗和品牌形象。 此外，本書還會觸及字體設計的前沿領域。例如，動態字體（variable fonts）的齣現，如何為Web排版帶來瞭更靈活的控製和更豐富的視覺錶現力？CSS字體屬性的不斷發展，又為設計師提供瞭哪些新的工具來駕馭字體？個性化字體、像素字體、甚至是SVG字體，它們又在哪些場景下展現齣獨特的魅力？本書將一一為您揭曉。 《字體之美：從傳統印刷到Web排版》不僅僅是一本關於字體的技術手冊，更是一部關於美學、曆史和創新的視覺史詩。它旨在幫助讀者培養對字體的敏銳感知力，理解字體背後的邏輯與美學原理，並在實際創作中，無論是傳統的印刷品還是現代的數字媒介，都能自信地運用字體，創造齣令人難忘的視覺體驗。本書適閤所有對字體設計、平麵設計、網頁設計以及視覺傳達感興趣的讀者，從初學者到資深設計師，都能從中獲得啓發和收獲。它鼓勵讀者去觀察、去體驗、去創造，去發現字體那無窮無盡的美麗。
作者簡介
Laura Franz 是馬薩諸塞州大學達特茅斯分校的設計學副教授，她已經在該校執教Web 版式設計課程12 年。
她講授多種版式設計課程，包括版式設計I，字形的曆史與構造，以及頁麵版式設計介紹；版式設計II，版式即信息；版式設計III，實際情境中的版式：印刷業與Web ；版式設計IV，以字體設計為題的本科研究項目。她還是馬薩諸塞州大學達特茅斯分校Web 與交互設計專業碩士認證的聯閤協調人。
她所做的專業設計既有針對傳統印刷的，也有針對Web 設計的。正在進行的創新研究項目包括historictype.com、goodwebfonts.com 及新Bedford 字體項目。她教授Web 版式設計，也在相關專題討論會上演講，還曾為Lynda.com 撰寫相關課程。
對於如何將這一行的藝術與責任傳授給未來的版式設計師們，她也特彆感興趣。
目錄資訊
前言 ...................................................................................................... 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
通過<table><tr><td> 組織錶格 .................................................................... 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
· · · · · · (收起)
第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
通過<table><tr><td> 組織錶格 .................................................................... 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
· · · · · · (收起)
讀後感
評分
評分
評分
評分
評分
用戶評價
评分
我一直堅信，好的排版能讓文字“活”起來。而《字體之美：從傳統印刷到Web排版》這個書名，恰恰捕捉到瞭我心中對於文字之美的最直接的理解。我一直對字體本身的設計邏輯、它所蘊含的文化基因以及不同時代背景下字體美學的發展感到好奇。書名中“從傳統印刷到Web排版”的錶述，讓我看到瞭一種跨越時代的宏大敘事，這正是我所期待的。我想要知道，那些承載瞭曆史記憶的印刷字體，是如何在數字時代找到新的生命力的。比如，那些古典的Serif字體，它們在網頁上的錶現又會有怎樣的考量？而那些為數字屏幕而生的Web字體，又有哪些獨特的語言和設計哲學？我尤其期待書中能夠深入探討排版在信息設計中的核心作用，它不僅僅是把文字堆砌起來，更是通過字體的選擇、字號的大小、行距的疏密、段落的劃分等等，來構建信息層級，引導讀者的視綫，甚至傳遞作者的情感和意圖。我設想這本書會用豐富的案例，從古籍的精美排版，到現代雜誌的高級布局，再到用戶友好型網站的界麵設計，全方位地展現字體與排版如何塑造我們的閱讀體驗，甚至影響我們的決策。這本書，我期待它能成為我理解文字之美、掌握排版藝術的一把鑰匙，讓我能夠更自信、更藝術地運用文字來錶達自己。
评分《字體之美：從傳統印刷到Web排版》這個書名，讓我立刻聯想到那些曾經在紙張上留下深刻印記的文字，以及它們如何在數字世界的浪潮中煥發新生。我一直對印刷術的曆史及其對人類文明的影響感到著迷，而字體設計無疑是其中最直觀、也最具美學價值的一環。我期待這本書能帶領我穿越時空，從活字印刷的起源開始，瞭解不同曆史時期重要的字體傢族是如何孕育和發展的，比如那些優雅的襯綫體，它們是如何在油墨和紙張上展現齣曆史的厚重感和人文的溫度。然後，我更想知道，當互聯網和數字屏幕齣現後，字體和排版發生瞭怎樣的革命。Web排版所麵臨的挑戰，如屏幕分辨率的限製、跨瀏覽器和設備的兼容性、用戶交互的需求等，都讓它的排版邏輯與傳統印刷截然不同。我迫切想知道，這本書是如何將這兩者有機地聯係起來，揭示字體在不同媒介下的演變規律和設計原則。是會有關於字體選擇的實用指南，還是關於如何通過排版來提升信息傳遞效率的技巧？我非常希望它能讓我理解，為什麼一個精心設計的字體，能夠瞬間提升一個産品的格調，或者讓一篇原本枯燥的文章變得引人入勝。
评分這本書的標題《字體之美：從傳統印刷到Web排版》瞬間就抓住瞭我的眼球。我一直對文字的形態和它所傳遞的情感有著濃厚的興趣，但關於字體設計和排版的係統性知識，我總覺得有些碎片化，零散於各種設計教程和博客文章中。這本書的名字承諾瞭一個從源頭到當下的完整視角，這正是我一直在尋找的。我對它所能提供的深度感到好奇，特彆是“從傳統印刷到Web排版”這個跨度，意味著它可能會深入探討活字印刷的曆史演變，以及不同時代的技術和審美對字體選擇和布局的影響。我特彆想知道，書中是否會講解那些經典字體的設計理念，比如襯綫體為何能帶來莊重感，無襯綫體又為何更適閤現代感強的設計。對於Web排版部分，我更關心它如何處理數字屏幕的限製，例如分辨率、響應式設計以及用戶在不同設備上閱讀的體驗。我設想這本書會用大量的實例來佐證理論，或許會包含一些著名的印刷品和網站的排版案例分析，讓我們能夠直觀地理解字體選擇和布局的精妙之處。如果書中還能觸及一些字體設計軟件的使用技巧，或者介紹一些優秀的字體設計師及其作品，那將是錦上添花。我期待它能成為我探索字體世界的一扇窗口，不僅提升我的審美認知，更能指導我的實際創作。
评分翻開《字體之美：從傳統印刷到Web排版》，我立刻被一股嚴謹而又不失藝術氣息的專業感所包圍。這本書並非那種浮光掠影的介紹，而是以一種係統性的方式，將字體從其最古老的根源——手寫和刻印，一步步梳理到如今我們習以為常的數字字體和網頁布局。我尤其欣賞它在處理曆史部分時所展現的耐心和細緻。它不僅僅是羅列字體名稱和年代，而是深入探討瞭每種字體風格誕生的社會背景、技術條件以及與之相伴的審美思潮。比如，書中對哥特體和文藝復興時期襯綫體崛起的敘述，讓我對那個時代人們對文字的理解和追求有瞭更深的體會。而當它轉嚮現代，特彆是Web排版時，並沒有簡單地將印刷排版的那一套搬過來，而是清晰地闡釋瞭數字媒體的獨特性——屏幕的像素化、交互性需求、跨平颱兼容性等等，以及如何在這種環境下選擇閤適的字體，調整字號、行距、字間距，以達到最佳的可讀性和視覺效果。我驚喜於書中對於“可讀性”和“易讀性”這兩個概念的細緻區分，以及如何通過排版技巧來優化用戶體驗，這對於我從事內容創作，特彆是需要大量文字呈現的領域來說，簡直是寶貴的指導。
评分我一直覺得，排版是一門被低估的藝術，它藏在我們日常閱讀的每一個角落，卻常常被忽略。當我在書店看到《字體之美：從傳統印刷到Web排版》時，就有一種直覺，這本書或許能填補我在這方麵的認知空白。它不僅僅是一本關於字體的“畫冊”，而更像是一本關於“如何更好地說話”的指南，隻是這裏的“說話”是用文字來完成的。我尤其期待書中關於Web排版的部分，因為在當今信息爆炸的時代，我們花費大量時間在屏幕上閱讀，而一個好的網頁設計，其排版功不可沒。我好奇書中是否會討論字體在用戶界麵（UI）設計中的作用，比如不同字體的性格如何影響用戶的情感，以及如何通過字體層級來引導用戶的閱讀路徑。書中會不會舉例說明，為什麼某些網站看起來很舒服，而另一些則令人眼花繚亂？我希望它能深入淺齣地解釋那些我們看似理所當然的排版規則，例如黃金分割在布局中的應用，或者不同字重和字號組閤的視覺衝擊力。這本書的名字，讓我感覺它不僅僅停留在理論層麵，而是充滿實踐的指導意義，我期待它能讓我從一個普通的讀者，蛻變成一個對文字傳播有更深刻理解的“使用者”。
评分非我所需要的那種字體書
评分涉及到瞭英文字體、排版、html和css代碼，但都沒有很深入，很雞肋的一本書
评分涉及到瞭英文字體、排版、html和css代碼，但都沒有很深入，很雞肋的一本書
评分非我所需要的那種字體書
评分非我所需要的那種字體書
相關圖書
本站所有內容均為互聯網搜索引擎提供的公開搜索信息，本站不存儲任何數據與內容，任何內容與數據均與本站無關，如有需要請聯繫相關搜索引擎包括但不限於百度，google,bing,sogou 等
© 2026 qciss.net All Rights Reserved. 小哈圖書下載中心 版权所有