An Introduction to Typography 字体、排版简明入门 by 包季真 www.om19.com

1. 包季真
字体、排版简明入门

2. 字体的类型 Types of Typeface
• Sans-serif 非衬线字体
o Arial, Tahoma, Calibri, Verdana，(黑体)

3. Types of Typeface
• Serif 衬线字体
o Times New Roman, Georgia,(宋体)

4. Types of Typeface
• Calligraphy 手写体
• Monospace 等宽字体
• Symbol 字符字体

5. Styles of Typeface
• Normal 正常
• Bold 粗体
• Italic 斜体

6. Styles of Typeface
• 字重
o font-weight (CSS)
o 100, 200, 300, 400(normal), 500, 600,
700(bold), 800, 900(bolder)
o 优秀的字库会对不同字重特别提供一套设计

7. 字体的边缘平滑
• Windows启用屏幕字体的边缘平滑的
三个级别
o 清晰 (Default of Vista)
o 标准 (Default of XP)
o 无效果

8. 字体的边缘平滑
• Windows字体的边缘平滑示例(微软雅
黑, Calibri)

9. 字体的边缘平滑
• 宋体(Simsun)12px~20px的边缘平滑示
例

10. 字体的边缘平滑
• 宋体包含点阵字体
• 12px~20px中，只有17px和20px是启
用了边缘平滑的

11. Cleartype 简介
1. ClearType线
2. 普通的反锯齿线
3. 1的四倍放大图
4. 2的四倍放大图
5. 1实际显示在液晶显示器上
的放大示意图
(Wikipedia)

12. 单位 The Unit
• 1 Inch = 72 points = 6 picas (1
pica=12 points)
• 1 英寸 = 72 点 = 6 皮卡
• px
• dpi
• ex
• em

13. 间距 Letterspacing
• Leading=line-height, base-line 行距
• Letter-spacing=Tracking 字间距
• Kerning 字距调整

14. 间距 Letterspacing

15. 段落 Paragraph
• Measuring 行长

16. 段落 Paragraph
• Alignment 对齐
– Left 左对齐
– Center 居中对齐
– Right 右对齐
– Justify 两端对齐
• 在英文排版中，当行长很短的时候，不能
使用两端对齐

17. 易读性 Readability
• 至多三种字体大小
• 英文正文使用sans-serif
• 至多三种字体
• 对齐
• 对比 (#333 on #fff)
• 文字块大小
– 行长越小，行距应当越小
– 每行50~80个字母，20个单词。

18. Readability
• Background noise 背景噪声
• Less is better 少即是多
• Makes your links look like links. 链接
应当就像个链接
• White-space 利用空白空间
• 行距大于词间距