平面设计 – 字体
前言
平面设计的基础是排版, 字体, 颜色, 这篇是字体的学习笔记.
参考:
How to Choose Fonts For Your Designs
Youtube – Improving Web and Mobile App Typography - 5 basic guidelines
Youtube – Designers Only Need These 6 Fonts. Trash the Rest
Youtube – The power of typography | Mia Cinelli | TEDxUofM
font usage guilde
Youtube – Typography 101 - Web Design For Beginners
The Responsive Website Font Size Guidelines
Font Sizes in UI Design: The Complete Guide
Legibility 易读性
易读性指的是一个单字是否容易被识别.
显然, 左边更容易被识别. 单字(或者几个字)通常出现在网页里的标题, 导航, 按钮上.
Readability 可读性
可读性指的是一个句子是否容易被识别(读).
显然, 右边更容易读一些. 句子就是网页里的 paragraph 咯.
字体的感觉
色彩心理学里面说到, 不同颜色会唤起人心中不同的感觉. 字体也有这种能力.
右边更开心一点.
右边更有自信一点.
右边更值得信赖一点. 这也是为什么人们发明了这么多字体 (不过现在很多都会配上 emoji.)
什么影响了易读性, 可读性, 情绪?
1. font-family 字体
有成千上万的字体, 字体通常会直接影响情绪, 但大师建议不要乱用, 尽量用哪些已经被广泛使用的. 后面我会介绍一些 popular 的.
2. size 大小. 太大太小都影响阅读. 基本原则是重点要大, 字多要小, 字少可以大. 网站手机通常是 16px 作为 paragraph. 电脑大约是 18-21px.
3. weight 重量. 重量有 100-900. 常用的 300 light, 400 regular, 500 medium, 700 bold, 重要就重咯
4. line-height 上下间距. 太密太宽都不好读, paragraph 通常是是 120%-150% base on font size.
5. letter-space 左右的间距. 太密太宽都不好读. 通常不会去调这个, 除非是单字, 有可能调宽一些.
不同的字体, 上面这些完全会不一样. 有些字体本身的 letter-space 就很宽, 或者 line-height 很宽. 所以要依据不同的情况来调.
Serif, Sans-serif, Scripts
参考: Serif vs. Sans Serif Fonts
Serif 就是有角的 把脚去掉就是 Sans-serif Scripts 的特色是有尾巴, 通常是手写字, handwriting
Serif 给人的感觉是经典, 正式. 印刷基本都会用它.
Sans-serif 的感觉是极简和休闲, digital 会比较喜欢它 (以前还有一个原因是 resolution 的问题, 所以 Sans-serif 会比较好识别, 但近年来 retina 屏幕, resolution 都很高了, 所以 Serif 也是比较常看到了)
还有一个特点是 Serif 比 Sans-serif 更有识别性 (因为那么角), 所以如果读者是儿童, 会推荐用 Serif.
Font 结构术语
参考: How to Tame Line Height in CSS and Leading Trim is in the works!
CSS half-leading problem?
这个视频的 designer 用 grid line 来控制 line heigh 使得整个 spacing 很整齐. 但是在做 CSS 的时候会比较难做到这一点.
具体原因看这篇: 4px baseline grid
大概就是 leading space 的位置搞的鬼, CSS/Figma 都是 half-leading, 和传统 design tool (for 印刷) 的 leading 是不一样的.
这一篇文章也是有讲到: The Thing With Leading in CSS
虽然 padding 都是 6px, 但是眼睛看上去却是 12px, 10px 这就是它的问题.
还有一个类似眼睛的问题, 顺便提一下: Optical Effects in User Interfaces
解决方案:
Leading Trim is in the works!
Leading-Trim: The Future of Digital Typesetting
但目前支持度还不高, 而且它直接把 leading 给去掉也容易引起其它问题啊, leading 是我们需要的东西丫.