Lesson 7: Responsive Typography In Action

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

排版一直都是设计和传达的基础。虽然现在的设计和印刷品设计差别很大，但核心原则还是不变的。

Article 1: Bonus: Responsive Typography Experiment

不是英语，看不明白是什么

好像是展示网页实现的人脸识别功能。

Article 2: Responsive Typography: The Basics

屏幕分辨率多了，网站设计已经从静态布局、本地字体向 动态布局、网络字体（web fonts） 转变。

以前设备分辨率相近的时候，设计网站通常先确定正文的样式；然后根据正文样式决定行宽。现在多分辨率把这事弄得更复杂了。

有不同的方式实现响应式布局：

自适应布局（adaptive layout）：根据有限的几个值调整布局。
流式布局（liquid layout）：对每个宽度值连续调整布局。

两种方式各有利弊，但是我们觉得根据尽量少的 断点 来做自适应更好，因为可读性比内容能随着视窗无极变化重要的多。当然这在复杂的场景是有争议的，但是文本可读性确实在几个固定的宽度是最好的。

选择字体

正确的腔调（The Right Tone）

选择字体的时候最主要的是腔调（tone），但是每种字体都有各自的质量、需求（或者禁忌），字体的选择产生一系列视觉和技术的后果。

2012 年我们给自己的网站选择了衬线字体，以为它符合我们的腔调，而且对应了我们内容的优雅。
而 iA Writer 选择了等宽字体。因为这个程序是帮你出第一版草稿出来，所以我们特地选择了 Nittit ——一款坚定又谨慎（strong and careful）的字体。我们选择等宽字体的另一个原因是 iPad 的操作系统不会自动调整比例字体的字距。

monospace typeface: 等宽字体。
proportional typeface: 比例字体、非等宽字体。

现在三年过去了，我们对 Nittit 的喜爱导致我们现在用了它的非等宽版本。

衬线还是非衬线

这个怎么选很复杂，有一个可能有用的法则奉上：

The serifed typeface is a priest, the sans is a hacker.
衬线字体是牧师，非衬线的是黑客。

衬线字体更佳专制，而非衬线的感觉更民主。

实际上，如果正文字体大于 12px 的话，有没有衬线的字体都能表现很好，唉…… （12px 以下的字体在现在的显示器上会很小）

字号

字号的确定不能只看个人偏好，还要考虑阅读距离。看电脑的距离比书远，所以电脑上的字体要比书上的大写。

tips：
找到一本字号看上去很舒服书，可以用 透视法 算出在电脑上用多大字号好。

行宽和对比度

字号可以用 透视法 算出来，但是由于阅读距离变大，行高通常需要比算出来的值更大些。140% 是个很好的选择，但是肯定还得综合你用的字体来考虑。

对比度不能太弱或者太艳俗（garish。比如黄底粉字。）。

iPhone 与 iPad

我们的 app iA Writer 的 iPad 和 iPhone 版本中使用的字号是不同的。为什么呢？

二者的阅读距离是不同的。同时，还有个全新的挑战是 iPad 的不同使用场景中，阅读距离也是有很大差别的。为了在所有的阅读距离都不造成阅读困难，我们选择用最大的阅读距离来定义字号。
因为 iPhone 阅读距离小，所以行高也要（比透视法算出来的）更小一点。
实际上，我们的 app 在 iPhone 上的文字区块的边距（gutter）、字符间距也更小一点。

台式机怎么办？

有人抱怨 iA Writer 电脑版上的字号太大，其实我们这么做的原因和 iPad 版本一样。

为什么不允许用户改字号呢？

绝大多数网站和 app 中的字都太小了，我们的新用户从来没有体验过 iA Writer 看上去有多舒服。我们这么做的主要原因不是要确保所有用户用起来都一样，而是不想 iA Writer 有复杂的设置，你能用它做的就是写字。

那为什么不根据设备分辨率自动调整呢？

这么做会使得软件变复杂。因此我们选择分别给 Mac，iPad 1/2 和 iPad3 不同的设置，而不是所有分辨率。

Response So Far

设计师们习惯于控制，但是网站设计有很多东西是控制不了的。网站设计不是追求完美，而是要找到最合适的妥协。

Article 3: Contrast through Scale

排版最重要的原则：对比。

对比决定了结构、强调、关系、相对重要性，同时也决定了内容读起来多顺畅。

一般有这些方式制造对比：

scale
weight
classification
case
color

本文讲 scale。

What is scale?

Scale refers to the range of values at which type is sized. The more regular the intervals between each value, the more harmonious the scale.

通过缩放（scale），能：

控制读者消费内容的步幅（pace）
指引读者
传达信息结构，帮读者导航、理解各部分内容的关系

从正文段落开始确定字号

从段落开始确定字号有两个原因：

通常网站中段落比标题、子标题之类多得多。
一般以段落为基础来确定其他元素的字号。

很多元素会影响到段落字号的确定。

受众的需求：退休老大爷和青年小伙子对字号的要求是不一样的。
阅读距离和文字量：你用27寸5k屏幕距离两英寸来设计，你的用户不一定跟你一样。

选择一个久经考验的缩放比例（scale）（musical scales 的中文是 “音阶”，排版中的 scale 的含义可以以此为参考）

想要使标题、子标题、正文、引用等之间的关系保持和谐一致的话，需要一些简单的计算。当然，想避免这些的话，直接拿现成的比例也能得到一个不错的结果。

现在仍广泛在用的 16 世纪的文字缩放比例（6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 26, 48, 60, 72）很大程度上是由当时的技术所限制的，但是现在我们已经没有这些限制了。

在 Jon Tan 的演讲 Web Type – 80% Science, 20% Art 中，他提出可以用斐波那契数列（Fibonacci Sequence）作为计算文字缩放比例的标准。

斐波那契：后一个数是前两个数的和。

思考比率

以前的排版限制（金属、单面、固定的大小）现在没有了，我们有了更大的自由度来做随便哪种一点不和谐的烂缩放比例了。添加一些限制能给你的排版很大的提升。

跟随便定字号不同，有了比率（ratio）的限制计算出来的缩放比例，能让你的排版更统一（consistent）、更和谐。就像建筑物和自然界中到处都能找到黄金比例的身影。

当然比例不知黄金比例一种，我们可以从音乐中找到灵感，Owen Gregory 的 Composing the New Canon: Music, Harmony, Proportion 一文解释了把音乐中的比例（musical scales，音阶）作为排版比例（typographic scales）的方法。

案例

非常棒！
Jeffrey Zeldman’s Web Design Manifesto, 2012

Article 4: The Great Discontent

读了这么多关于排版的文章，来看看这个博客吧。这个博客有很多非常好的响应式排版样例。

Article 5: Universal Typography

Tim Brown 的演讲视频。

排版是不是要处理墨水和纸，而是处理 黑和白的关系。
"type is a beautiful group of letters, not a group of beautiful letters."

听不明白。没听完。

Article 6: Typecast

本周学了这么多东西，用 Typecast 来实践下吧。

< TODO >

正文

Lesson 7: Responsive Typography In Action