具体描述
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排版所面临的挑战，如屏幕分辨率的限制、跨浏览器和设备的兼容性、用户交互的需求等，都让它的排版逻辑与传统印刷截然不同。我迫切想知道，这本书是如何将这两者有机地联系起来，揭示字体在不同媒介下的演变规律和设计原则。是会有关于字体选择的实用指南，还是关于如何通过排版来提升信息传递效率的技巧？我非常希望它能让我理解，为什么一个精心设计的字体，能够瞬间提升一个产品的格调，或者让一篇原本枯燥的文章变得引人入胜。
评分我一直觉得，排版是一门被低估的艺术，它藏在我们日常阅读的每一个角落，却常常被忽略。当我在书店看到《字体之美：从传统印刷到Web排版》时，就有一种直觉，这本书或许能填补我在这方面的认知空白。它不仅仅是一本关于字体的“画册”，而更像是一本关于“如何更好地说话”的指南，只是这里的“说话”是用文字来完成的。我尤其期待书中关于Web排版的部分，因为在当今信息爆炸的时代，我们花费大量时间在屏幕上阅读，而一个好的网页设计，其排版功不可没。我好奇书中是否会讨论字体在用户界面（UI）设计中的作用，比如不同字体的性格如何影响用户的情感，以及如何通过字体层级来引导用户的阅读路径。书中会不会举例说明，为什么某些网站看起来很舒服，而另一些则令人眼花缭乱？我希望它能深入浅出地解释那些我们看似理所当然的排版规则，例如黄金分割在布局中的应用，或者不同字重和字号组合的视觉冲击力。这本书的名字，让我感觉它不仅仅停留在理论层面，而是充满实践的指导意义，我期待它能让我从一个普通的读者，蜕变成一个对文字传播有更深刻理解的“使用者”。
评分我一直坚信，好的排版能让文字“活”起来。而《字体之美：从传统印刷到Web排版》这个书名，恰恰捕捉到了我心中对于文字之美的最直接的理解。我一直对字体本身的设计逻辑、它所蕴含的文化基因以及不同时代背景下字体美学的发展感到好奇。书名中“从传统印刷到Web排版”的表述，让我看到了一种跨越时代的宏大叙事，这正是我所期待的。我想要知道，那些承载了历史记忆的印刷字体，是如何在数字时代找到新的生命力的。比如，那些古典的Serif字体，它们在网页上的表现又会有怎样的考量？而那些为数字屏幕而生的Web字体，又有哪些独特的语言和设计哲学？我尤其期待书中能够深入探讨排版在信息设计中的核心作用，它不仅仅是把文字堆砌起来，更是通过字体的选择、字号的大小、行距的疏密、段落的划分等等，来构建信息层级，引导读者的视线，甚至传递作者的情感和意图。我设想这本书会用丰富的案例，从古籍的精美排版，到现代杂志的高级布局，再到用户友好型网站的界面设计，全方位地展现字体与排版如何塑造我们的阅读体验，甚至影响我们的决策。这本书，我期待它能成为我理解文字之美、掌握排版艺术的一把钥匙，让我能够更自信、更艺术地运用文字来表达自己。
评分这本书的标题《字体之美：从传统印刷到Web排版》瞬间就抓住了我的眼球。我一直对文字的形态和它所传递的情感有着浓厚的兴趣，但关于字体设计和排版的系统性知识，我总觉得有些碎片化，零散于各种设计教程和博客文章中。这本书的名字承诺了一个从源头到当下的完整视角，这正是我一直在寻找的。我对它所能提供的深度感到好奇，特别是“从传统印刷到Web排版”这个跨度，意味着它可能会深入探讨活字印刷的历史演变，以及不同时代的技术和审美对字体选择和布局的影响。我特别想知道，书中是否会讲解那些经典字体的设计理念，比如衬线体为何能带来庄重感，无衬线体又为何更适合现代感强的设计。对于Web排版部分，我更关心它如何处理数字屏幕的限制，例如分辨率、响应式设计以及用户在不同设备上阅读的体验。我设想这本书会用大量的实例来佐证理论，或许会包含一些著名的印刷品和网站的排版案例分析，让我们能够直观地理解字体选择和布局的精妙之处。如果书中还能触及一些字体设计软件的使用技巧，或者介绍一些优秀的字体设计师及其作品，那将是锦上添花。我期待它能成为我探索字体世界的一扇窗口，不仅提升我的审美认知，更能指导我的实际创作。
评分翻开《字体之美：从传统印刷到Web排版》，我立刻被一股严谨而又不失艺术气息的专业感所包围。这本书并非那种浮光掠影的介绍，而是以一种系统性的方式，将字体从其最古老的根源——手写和刻印，一步步梳理到如今我们习以为常的数字字体和网页布局。我尤其欣赏它在处理历史部分时所展现的耐心和细致。它不仅仅是罗列字体名称和年代，而是深入探讨了每种字体风格诞生的社会背景、技术条件以及与之相伴的审美思潮。比如，书中对哥特体和文艺复兴时期衬线体崛起的叙述，让我对那个时代人们对文字的理解和追求有了更深的体会。而当它转向现代，特别是Web排版时，并没有简单地将印刷排版的那一套搬过来，而是清晰地阐释了数字媒体的独特性——屏幕的像素化、交互性需求、跨平台兼容性等等，以及如何在这种环境下选择合适的字体，调整字号、行距、字间距，以达到最佳的可读性和视觉效果。我惊喜于书中对于“可读性”和“易读性”这两个概念的细致区分，以及如何通过排版技巧来优化用户体验，这对于我从事内容创作，特别是需要大量文字呈现的领域来说，简直是宝贵的指导。
评分嗯，考虑培养个业余爱好
评分非我所需要的那种字体书
评分非我所需要的那种字体书
评分嗯，考虑培养个业余爱好
评分非我所需要的那种字体书
相关图书
本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于百度，google,bing,sogou 等
© 2026 qciss.net All Rights Reserved. 小哈图书下载中心 版权所有