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

包季真

字体、排版简明入门

字体的类型 Types of Typeface

• Sans-serif 非衬线字体o Arial, Tahoma, Calibri, Verdana，(黑体)

Types of Typeface

• Serif 衬线字体o Times New Roman, Georgia,(宋体)

Types of Typeface

• Calligraphy 手写体

• Monospace 等宽字体

• Symbol 字符字体

Styles of Typeface

• Normal 正常

• Bold 粗体

• Italic 斜体

Styles of Typeface

• 字重o font-weight (CSS)

o 100, 200, 300, 400(normal), 500, 600, 700(bold), 800, 900(bolder)

o优秀的字库会对不同字重特别提供一套设计

字体的边缘平滑

• Windows启用屏幕字体的边缘平滑的三个级别o清晰 (Default of Vista)

o标准 (Default of XP)

o无效果


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


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


• 宋体包含点阵字体

• 12px~20px中，只有17px和20px是启用了边缘平滑的

Cleartype 简介

1. ClearType线2. 普通的反锯齿线3. 1的四倍放大图4. 2的四倍放大图5. 1实际显示在液晶显示器上

的放大示意图

(Wikipedia)

单位 The Unit

• 1 Inch = 72 points = 6 picas (1 pica=12 points)

• 1 英寸 = 72 点 = 6 皮卡

• px

• dpi

• ex

• em

间距 Letterspacing

• Leading=line-height, base-line 行距

• Letter-spacing=Tracking 字间距

• Kerning 字距调整

间距 Letterspacing

段落 Paragraph

• Measuring 行长

段落 Paragraph

• Alignment 对齐– Left 左对齐

– Center 居中对齐

– Right 右对齐

– Justify 两端对齐

• 在英文排版中，当行长很短的时候，不能使用两端对齐

易读性 Readability

• 至多三种字体大小• 英文正文使用sans-serif

• 至多三种字体

• 对齐

• 对比 (#333 on #fff)

• 文字块大小– 行长越小，行距应当越小

– 每行50~80个字母，20个单词。

Readability

• Background noise 背景噪声

• Less is better 少即是多

• Makes your links look like links. 链接应当就像个链接

• White-space 利用空白空间

• 行距大于词间距

Design