从传统印刷到Web排版
Typographic Web Design: How to Think Like a Typographer in HTML and CSS
[美] Laura Franz Tradotto da: 石岩 / 吴宁
Sinossi
Paperback. Pub 2015-12-01 324 Chinese Electronic Industry Press the beauty of the Web page. where the United States? Glyph that convey emotions that rational division layout information and layout. and read that scene perfect fit. And all this is that the top priority of the font. How to book by Professor font design. selection. and with the layout. create beauty bring people. help the reader understand and find Web pages of information. The book is divided into The first one detailing how the font style. font characteristics. readability and coordination to select fonts. lay a solid foundation; Chapter 2 describes how to block. set the title. layout design suitable for construction browse the web; Chapter 3 describes how to set up according to the reader's way of reading the navigation system. the application grid system. create a fon...
contents
前言 ...................................................................................................... 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