Lesson 2: Dive Into Typography (排版)

Lesson 2: Dive Into Typography (排版)

排版是字的艺术，是关于字的一切：字体、字号、行高、行长、字重（斜体／加粗／正常）、字距（kerning）、行距（leading）可读性……

Article 1: Typography Essentials – A Getting Started Guide (排版要点——一个入门指南)

这篇文章所说的很多都不适用于中文。

基础

• The Type Size, also called the Cap Height, is the overall height of capital letters in the formation of words.
• The Ascender is the upward tail on letters like h, l, t, b, d, and k.
• The Descender is the downward tail for letters like g, q, and y.
• The Counter is the white space located inside letters like o and p.
• The X Height is the height of the letter, and does not include ascenders or descenders.
• Baselines are the boundary that the lowest part of the letter rests on. Take a look at the y, p, g, p and y letters in the illustration above. The solid line they are resting on is the baseline.

• Kerning: 字距。
• Leading: 行距。

• left alignment
• center alignment
• Right alignment 显得正式。
• Justified alignment: 左右对齐。避免出现 tracking, 也叫 river).

Type Category(字体分类)

• Serif: 衬线体。这种字体在长段的时候更易读，而且传统。（如果没有特别制定，绝大多数程序都把 Times New Roman style 作为默认字体。是衬线体。）
• San－Serif: 无衬线体。这种字体的粗体作为 labeling、headlines、titles。也易读，但是更有现代的感觉。
• Script, symbols and decorative type: 手写体、符号、装饰体通常用于具体的图像和信息。（婚礼可能使用更瘦更流畅的字体，小孩生日🎂可能使用弯曲更厉害的字。）

tips

• 不要所有的地方都用同一种字体，不同的上下文需要不同的字体。一个人浑身上下穿戴都是一个颜色。
• 要同时用不同字体时一定小心，不确定的时候最好保守些。
• 统一: 如果一开始标题使用 Arial 字体，确保整篇文章所有标题都是。
• 像报纸一样有多列的情景下，使用左右对齐看起来会更好。但是要避免出现river。river 就是这个玩意儿：
• Use an 11 or 12 point font size and a serif type for maximum readability.
• 用斜体和粗体指出感兴趣或者引用的信息。
• 对重要的信息使用颜色（比如连接一般用斜体，并且蓝色）。用得正确的话，红色最能吸引注意力。

Article 2: KernType: The Kerning Game(字距游戏😄)

Article 3: Better web typography in 13 simple steps(网站排版 13 步)

web fonts 已经被大多数浏览器原生支持，而且最新的 HTML 和 CSS 能实现更多的排版功能：网络排版新纪元。

dos & don'ts

1. Find out what your fonts can do: 调查你想使用的字体的功能（capabilites）。可能有些字体不全面（比如文不全，没有粗体、大写之类的）。
2. Subset cleverly: 机灵地使用子集：比如有个字体没有老写的数字，可以找一个合适的有老写数字的字体作为补充（fallback）。需要老写数字的时候自动使用这个子集，其它时候使用选好的默认字体。省了不需要的HTML tags 了。
3. Figuring out numerals:大多数高质量的字体都有数套数字符号（sets of numerals）。等宽、非等宽、老体等，他们都有特定用法。
   • Figuring Out Numerals
   • Figuring Out Numerals – The Sequel
4. Don’t fake styles: 如果使用标签但是所选的字体没有粗体，就会被机械地渲染两倍粗；如果使用标签但是没有泄题，就会被机械的倾斜。这样会导致很丑。
5. 但是如果需要的话，尽管去fake吧。
6. 小心犹豫字符编码不同造成乱码。
7. 了解HTML entities。“™”并不是一个“T”和一个“M”；双引号不能用两个单引号代替；乘号不要写成“x”。
8. 使用'…' and "…"（dumb quotes）就暴露了你对排版的业余，但是使用‘…’ and “…” 也是不够的。不同国家语言的“引号”也会有区别，比如有的国家会使用“{}”。
9. 破折号氛围短的（en dash）和长的（em dash）。
10. 不要定义绝对大小，而是定义各种字体的关系。页面可能被缩放，如果字号定义成像素大小，这就可能导致缩放后body 比 headline 字号还大。
11. 控制好断行。non-breaking space 可以确保相邻的两个单词在同一行。
12. 控制好空间（space）。空格有很多很多种，注意它们的用法。字符间距、字间距、行间距都对易读性有影响。
13. 这些是基础。还有更多……

Article 4: Helvetica - A Documentary About The Most Ubiquitous Typeface In The World

Article 5: Shape Type: Letter Shaping Game

Article 6: Bonus Material: "Thinking With Type"

< TODO >
Thinking With Type 官网 可以在线阅读本书。