Lesson 5: Typography in Product Design

Lesson 5: Typography in Product Design

Article 1: Interactive Guide to Blog Typography

布局（Layout）

用空白（white space）突出内容，或者说使用大量空白（empty space）使内容看起来框架清晰。

不要有太多分散注意力的东西，特别是侧边栏（sidebar）中的文本。

尺寸（Measure）

一行多少个字母（不是汉字）？大概 50～80 个会有最好的可读性，太多的话换行的时候就瞎了。

行高（Line Height）

对于正文来说，字体高度的 1.5 倍是个不错的起始值。

行的长度越长，需要对应的行高越高。因为越长越难找到下行的开头，用大行高来抵消这种影响。

视觉层级（Visual Hierarchy）

一篇文章或者随便什么内容，都可以划分出不同重要程度。视觉层级就是划分出的重要程度的体现。

没有一个清晰的视觉结构，读者很难阅读你的东西，想快速浏览就更难了。有些人只想读一部分内容，没测次不好找。

Blog 中想要有个清晰的层级最容易的方法是使标题、副标题、正文有个合适的对比。

标题（title）

（标题可能折行，行距）使用比正文（1.5倍）小的行距，“我”用 1.1倍。

段落（Paragraph）

浏览器默认在一块文字顶部和底部添加间距，表示这是一个段落。想与众不同可以使用缩进表示段落（indented paragraph）。

字体（Fonts）

你可以只用一种字体，前提是这字体有足够多的字重可用。

还有种常见做法是，用两种字体，一个做标题，一个做正文。这么做要保证两个字体有足够明显的对比，或者直接用一对 无衬线／衬线 字体。

千万别超过两种字体，除非你知道你在干什么……😱

Hinting

< 没看懂 >

字号（Font Size）

正文使用足够大的字号。推荐最少 16px，如果 x-height 占的比例小的话，字号要更大。

不同级别的标题要用字号明确区分。别随便选择字号，那样感觉会很乱，可以用模式化拉伸（modular scale）按照一定比例（ratio）计算字号。有个超好的计算器：modularscale.com。

颜色

不要用纯黑（darkest black，#000）。可以给正文用 #444，给标题稍黑点的 #222。 （不考虑 websafe 的话，直接用 #444444 、 #222222；考虑 websafe 的话，不知道是不是也是直接#444444 、 #222222。）

差别很微妙，它保持文字之间对比度的同时呈现得更柔和一点。

小型大写字母（Small Caps）

缩写需要用大写字母，为了避免这些大写字母在它所在的文字里过于显眼（stand out），使缩写更易读，我们把它弄小（Small Caps）。

Article 2: Reminder - Design is still about words

Designing for the web is still about words。
网站设计的关键也还是文字。

Article 3: Choosing The Right Font

设计网站时有一个前提，就是“内容是会变的”，所以不可能调整所有的东西（比如每个标题的字距）。你必须放弃对一些东西的控制。

看完这篇文章后，可以试试使用 Typekit 选择字体，然后用 Typecast 排版。

可读性

Typefaces

决定使用什么字体的时候不要考虑太多。因为 Helvetica 到处都被用，所以你不考虑它？别想这么多，如果合适的话还得用啊。

• 正文是对可读性要求最高的，如果你找的字体在 10px 下仍然能辨认出来，它可能就是个可读性比较好的字体了。
• 标题相对简单，能立刻明白是什么，它可读性就足够了。

选择字体没什么公式可循，一般你用用试试，然后对比一下你觉得行就行。这个还真是拼直觉。不过 90% 以上的情况下，用户都不管你什么字体，所以可读性可以的话，就它吧。

字体配合（Pairing）

几乎没有网站只用一种字体，通常不错的网站都是正文一种字体，标题一种。

选择一对（pair）字体时，也没什么好招。足够像么？太像了？区分度够么？没招，把它们一一试过👀之后，才能决定。

有时候最合适的是两种非衬线（sans-serifs）字体一起用；有时候非衬做标题，衬线做正文。这两种字体是否相似不太重要，重要的是他们的行为（act）相似。不管选择什么字体都是传达你的信息的，如果需要差异大的字体，那就用差异大的呗。

Size

• 正文 14px 起。
• 标题可以试着来。当你试到一个字号正好像你期望的一样足够吸引注意力之后就不要再试了。

Hierarchy

通常标题都是大字。

一定要是大字吗？做大并不是吸引注意力的唯一方法。颜色、字重、位置对建立一个清晰的视觉结构（visual hierarchy）同样重要。标题只要能突出于别的文字就可以了。

行距（Leading）

对大块的文字来说，1.5倍行距挺好。

Generally speaking, for large blocks of text, 1.5 times the size of the text is a good size. Smaller text should have tighter leading, and huge text should have a lot.

Tracking

正文用不着，标题里可能会用。一般加添加 1 个或者 2 个像素就足够。

What’s the Difference Between Leading, Kerning and Tracking?

Kerning 是字母之间的距离；
Tracking 是字母之间的距离。区别是，Tranking 是给一个单词各个字母之间设置同样的距离；Kerning 可以是同一个单词里任意两个字母的距离。

Color

用的最多的就是白底黑字和浅底黑字，这样能有很好的可读性，但是并不知只能这样。设计的时候有文字之间有个好的对比度（contrast）就行。

The Grid

在我看来，使用网格实际网站排版的时候最重要的思想。

网格体现了所有的排版思想：符合几何，一致，可用，还有美(It's geometric, consistent, usable, and above all: beautiful.)。

对文本使用网格是建立视觉结构（visual hierarchy) 的关键方法。

tips:

• 不一定要先设计好网格，再填内容；也可以是设计出布局，借助网格修改增强结构化。
• 12栅格：2、3、4、6的倍数

脱颖而出（Standing Out）

Fonts

如何脱颖而出？
你想用个不常用的字体，我更关心这字体是否传达了独特的信息和感觉（message or feeling）。

选择一个独一无二的字体靠的是感觉。

The Design Cubicle

做个非主流（Be Unorthodox）

跟我刚才的观点不同，这次就是要看“表面”。看看别人家怎么做的，然后反着来。这么着容易被记住，虽然没什么用。

组合你的设计（Match Your Design）

排版不是独立的事，它只是网站设计的一部分——最重要的事内容。

对于成功的网站设计来说，它的成功是由各个部分组成的。排版、颜色、内容都不能独立成功。

情感化排版（Emotional Type）

There's no way to teach emotional design, it's something you have to experience, and then play with in your own designs.

人有很多情感，高兴、难过、生气等等，唤起这些情感也是咱们设计师的工作。

嗯。这条很难表达，展示给你看。我看到那个 G 就想笑，哪次看都笑，觉得很亲切：

Article 4: Checklist for Better Web Typography

在你要最终完成你的网站设计的时候，检查下这个列表，它总结了你要做的关键事项。

Layout - Did you

1. 大块的文本有标题、小的段落、无序列表、侧栏、整段缩进、醒目的引用。（Chunk content with headers, small paragraphs, bulleted lists, sidebars, indenting an entire a paragraph of text, or pull quotes?）
2. 通过分为多列，把行宽限制在 350－550 px。
3. 增加行距来提高 长行 文本的可读性、使页面干净.
4. 增加字母间或单词间的距离来表达 强调(emphasis)。
5. 给段落开头使用缩紧或者段落之间使用两倍行距（double spacing），但是不要同时使用这两种方式。
6. 不要缩进标题下的第一个段落。（英文排版的时候，标题下第一段是不缩进的。）
7. 标题上方使用两倍行距（double spacing），标题和正文之间使用单倍行距。

Typefaces and Formatting - Did you:

1. 对正文使用非修饰（non-decorative）、屏幕优化过（screen-optimized）的字体，并且选择的字号要够清晰。
2. 对长行的文本，或为了强调（emphasis）、降低页面密度的目的，可以合理使用宽松的行距。
3. 使用大点的字母间距和单词间距来表达“强调”。
4. 正文左对齐，右参差。
5. 通过以下这些元素的对比来强调特定内容：字体、字号、字重、颜色、表格、结构、粗体、斜体、文字与背景用对比色、全大写、纹理（texture）、方向、节奏、间距、装饰（embellishment）。
6. 不要乱用上条列出的这些元素。（Use restraint on those elements just listed?）
7. 使用 CSS 设置大写规则（全大写、全校鞋、首字母大写……）。
8. 正文不要全大写。
9. 只对链接使用下划线。
10. 灰度模式（grayscale）下测试网站的前景文本与背景文本大对比度是否足够。
11. 如果是在暗色背景上用浅色文本，考虑使用粗体或者字体自带的粗点的样式（thicker strokes）。
12. 不要使用 这样的 删除线，除非你想显示编辑过的版本。
13. 考虑用 CSS 对首字母或者首行进行装饰（decorative effect）。

Content - Did you:

1. 检查拼写、语法和句子的结构。
2. 限制 感叹号 的使用。
3. 使用合适的排版字符（typographic characters）：短划线、长划线、弯引号、省略号、大小写数字。

Graphic Text - Did you:

1. 会花费很多下载时间，所以必要的时候才用。
2. 选择合适的装饰、抗锯齿、字母间距（kerning）。
3. ？ 对于特别小的字，对不同的字号进行字体设计，并且关闭抗锯齿。

< TODO >
All In One Design Checklist

Article 5: On Web Typography

- Video -

< 只能听懂很少部分，也只记录了一部分 >

什么决定了字体的好坏？

没什么字体生下来就是坏的（born evil），上下文决定了一切。

怎么看待字体

“Type is a beautiful group of letters, not a group of beautiful letters.”
不要掰开看单独的字母是否漂亮，需要看单词、看段落、或者整篇文章地看。

阅读和感知（read and perception）

< 完全听不懂 >

设计时的注意事项

• No rules：一些原则、手册、最佳实践有时候很有用，有时候却不合适。
• Imperfect precision：没有一套固定的排版是完美的。
• Reduction：限制一些东西的使用，有时能避免视觉语言的混乱。
• In parctice：

  • Bigger is better

  • Contrast

  • The longer the line, the more linespacing

  • More color(颜色越重), more line height

    

  • Greater control

选择字体的方法

前提

• for what? 网站、书、杂志……
• How will it be used?
• Under what conditions？

注意事项

• Dimensions: 是不是有规定文本块的尺寸？
• Special Features: 是不是有 多字重 、 老体字 、 small caps 等要求？
• Prolonged Reading
• Internationalization: 选的字体是否包含所有需要的语言的字符？

tips：

• Developing your personal palette（这里指字体的。也要有其他的，颜色、纹理、装饰等）。
• Try it out: 很多时候，试试看，不行再换。
• The term readability doesn't ask simply "can you read it?" It asks "do you want to read it?"

Article 6: WEB DESIGN IS 95% TYPOGRAPHY