On Web Typography 读书笔记

Higher-contrast typefaces tend to be useful in small bursts or headlines, because the extreme variation in stroke width is burdensome in long text. 高对比度文字不适合长文，更适合标题什么的。高对比度指笔画粗细不一，字母间距和字母内部空白不一致。

多数用作长文阅读的字体拥有 medium 或者 low 对比度。提供了一种稳定的视觉效果。

太低的对比度也不好。字母可能不容易辨认。降低了可读性。比如 Helvetica。

low x-height 提高了大小写字母之间的对比度。

当用作文本的时候，high x-height 更加适合。more space for the letterform means more information to help the reader。

x-height 太高也不好。某些字母可能难以辨认。比如 a 和 d，n 和 h。

大写数字可能太引人瞩目。在文本中，小写数字更加 fit in。

Curly quotes 是正确的用法。Dumb quotes 是不专业的，丑的。

Helvetica 的特点：笔画粗细对比度低，基本上一样粗。较高的 x-height。字母由基本几何图形组成。The aperture, or openings inside of the letters, are nearly closed。笔画末尾是直角。

Helvetica 的适用度：Helvetica 非常的 clear 和 geometric，但是不是在任何情况下都易读的。由于字母的 variation 很小，很容易混淆。不适合小字号或者长文。

Georgia 的特点：笔画粗细对比度适中。It has a generous x-height, counters, and spacing across letters; It has some sharp and pointy angles; It has beefy, almost slab-like serifs.

Georgia 的适用度：间距不紧凑，x-height 高，笔画粗细对比度低，适合长文阅读。

字体选择分为两大类：type for a moment and type to live with。前者可以夸张，醒目，用作标题什么的，一时的。后者是适用于长文阅读的，要让人忘记字体的存在，可以舒适的阅读。

Futura 用作标题很好，用作小字号的正文就可能不容易辨认。a 和 o 很像，间距太紧，x-height 太小。

长文阅读的字体不能要有太多的个性。

长文阅读的字体要求：足够的 x-height；低或者中度对比度；字母要看得清，可区分。

Gill Sans 的1，l，和 大写 i 傻傻分不清。（1lI）

选择字体前先问问自己，这个网站要表达什么情绪。

当心免费字体。免费字体常常字库不全。

写一份自己的常用字体 list

字体搭配最简单办法就是一个 serif 和一个 sans serif。

搭配的原则：distinction 和 harmony

可以尝试用同一款字体的 serif 和 sans serif。

可以尝试用同一个设计师创造的两种不同字体。有区别又有相似性。

一行文字比较长的话，行间距要稍微大一些来提高可读性。

line-height 很重要，对于 responsive website 来说。屏幕尺寸改变，行长度改变，行间距也要适当调整。

比较合适的行间距是 1.2 - 1.8。

段落之间如果用空白行来区分，空白行大小应该和字体一样或者稍微小一点。

用作标题的字体为了避免换行，可以选择间距紧凑的字体。比如用sans serif 是个很好的方法。

对于大字号标题，可以用插件实现在不同尺寸屏幕上的合适换行。

sans serif 很适合做 UI。放到 button 上面。Because they can be set smaller and a little tighter than serifs.

字体颜色（灰度）比较浅的需要 tighter line-height。

好的 typography 在于留白。

At least around 1.5 - 2 ems of margin.

黄金比例来进行网页布局。斐波那契数列。1，1，2，3，5，8，13，21，34，55，89，144，233，377，610，987。。。。。type is 13 px, headings at 34 px. 987 as layout width, with a main column of 610 px and a side bar of 377 px.