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 >