平面设计 – 字体
前言
平面设计的基础是排版, 字体, 颜色, 这篇是字体的学习笔记.
参考:
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
10 Excellent Font Pairing Tools For Designers (font pairing tools)
fontpair.co (我用着的)
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: The Future of Digital Typesetting
但目前支持度还不高, 而且它直接把 leading 给去掉也容易引起其它问题啊, leading 是我们需要的东西丫.
游览器总是落后于印刷
无意间看到一篇文章说
视乎也对应了上面这个例子.
Font Size
参考:
Youtube – Typography sizing and line height in web design (font size scale)
Font size 有 3 个比较重要的划分.
Body Paragraph
它是要被 reading 的. 所以不能太小, 也不能太大.
手机的话一般上会用 16px. 大一点到 18px 也是可以.
电脑的话可以大一些, 18 – 21px 都是可以接受的范围. 像 medium.com 是 20px.
line-height 通常是 1.4 或 1.5, 也是要看 font-family 啦. 不过通常 1.2 会太密.
Display & Heading
Display 是用来抓眼球的, 64 – 80px. material3 是 64px.
Heading 要可以让用户眼睛 scan, 36 – 40px 左右
sub display 副标题通常是 display 的一半在小一些.
sub heading 通常是 heading 的一半大一些. (因为 heading 本身就不大, 小一半太多了)
Button & Caption
比 body paragraph 还小的, 通常是按钮, 提示, 注释, 注解, copywirte 这些.
手机通常是 12 – 14px
电脑 14 – 16px
button / nav 一般上会用 uppercase, 除非字数很长.
套路
首先会有很多 size, 这些 size 需要一个 scale 弧度.
在线工具 type-scale.com
然后给它们命名, 比如 material3: display, headline, subhead, button, body
一般做网站不需要分那么细. 然后就可以放进去看看效果了.
Font Pairing
title 和 description 通常会用不同的 font, 这样就可以有对比衬托的 feeling 了.
如果选好 font pair 可以参考
10 Excellent Font Pairing Tools For Designers 和 fontpair.co
我没有研究原理, 用那些 popular 的就可以了.
中文 font
宋体
Songti 宋体就是中文的 Serif, 有角的
比如:
SimSun (Windows XP 和以前 Windows 的默认简体字)
黑体
Heiti 黑体就是中文的 Sans-serif, 没有角的.
比如:
Microsoft Yahei (Windows Vista 和以后 Windows 的默认简体字)
STXihei (macOS 最早的中文字体)
Heiti SC (macOS, IOS 早期的中文字体)
PingFang SC (IOS 9 和以后的中文字体)
