[POST] note for: Typography Handbook

[Rplus]

Typography Handbook
by Kenneth Wang
http://typographyhandbook.com/

A concise, referential guide on best web typographic practices.
github repo: https://github.com/kennethwang14/TypographyHandbook

這一份排版指南主要分三大部份及其下各小分節
介紹詳細，且參考資源眾多

• Typographic Design
• Fonts
• Web Style Guide

---

1. Typographic Design 排版設計

1-1. Visual Hierarchy 視覺層次

變因有五：

• Size
• Weight
• Positioning
• Typeface
• Color

1-2. 完形(Gestalt Law)

• Law of Proximity(鄰近)：講的是定位、留白的區隔來分群
• Law of Similarity(相似)：功能雷同、樣式相似

2. Fonts

2-1. 選字體

這邊有很多測試字體的服務~

2-2. web fonts

2-3. font loading

三種狀況

• non-matched -> fallback
• matched, waiting for loading
• matched & loaded

一需避免，三要拍拍手
第二種比較多討論空間

他這邊舉三種對應方式

1- Flash of Unstyled Text ( FOUT )
第一種就是先 fallback font 到目標字體加載完畢後再切換，畫面會閃

2- Flash of Invisible Text ( FOIT )
第二種是先把字隱藏不見，字體載完後秀出來
體感較好，但有可能加載失敗造成永遠不可見

3- The Whitescreen Approach
先白畫面，通通載完再秀

他推薦第一種，理由是「content is king」

這幾類都可以搭配 web font loader
異步處理 & 加載時機判斷

這邊他提到有個 W3C spec 在推：CSS Font Loading Module Level 3

• FOUT
  有兩個資源不錯：
  • fallback fonts： 整理了各種相似字型的 fallback list!
  • ffffallback： 可直接比較字型差異的 bookmarklet
• Whitescreen
  • Pace： 一款不錯的 loader status 樣式

2-4 OpenType Features

字型都有一些特徵來歸類
而 font-feature-settings 這個 CSS 屬性就可以宣告各邊用到的是哪一種特徵的字型
讓瀏覽器能盡量選有這種特徵的字型做為 fallback

• font-feature-settings | CSS-Tricks
  這篇介紹最詳細~
• [font-feature-settings | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings …)
• CSS 3 Font-Feature-Settings OpenType demo
  這頁可以實測網頁效果的 playground ~
• font-feature-settings | CSS Fonts Module Level 3 | W3C
  W3C spec 反而寫得不多哩
• CSS font-feature-settings | CANIUSE
  IE10+, Safari 9.1+, Blink, Firefox, iOS Safari 9.3+, Android 4.4+
• Typotheque: OpenType features in web browsers
  — Tests by Gustavo Ferreira
  這篇直接將結果一次全呈現出來，很猛！棒棒！(不過網頁好長~

3. Web Style Guide

3-1 Relative Units

這邊他提了一些大小、距離單位的建議用法

• font-size: em, rem
• spacing: em, rem, %
• media-query: em
• viewport unit 他反而不太喜歡，因為沒法縮放…

3-2 Containers

• 用 box-sizing: border-box; 他這邊推的作法是 inherit 的處理方式~
• max-width + padding-x: mobile-friendly page
• 外層寬度不要太寬

3-3 Font Sizing

Modularscale： 輔助調整各級字級，有相關 Sass & PostCSS 實作 plugin

3-4 Vertical Spacing

line-height + margin-bottom + padding

建議遵守前面提過的 Law of Proximity

• Vertical Rhythm： 元素垂直距離單位化
• Bottom Aligned Baseline Grid： 所有的基線對齊
  建議搭配套件使用： sassline、megatype

※ 這個參考就好，不要鑽牛角尖…

3-5 Color

• 參考別人用色
• Law of Similarity
• #000 -> dark-gray
• lighten -> rgba，適應性會更高~
• 對比度檢測

3-6 Underlining

CSS trcik: underline -> background-image + text-shadow

記得處理 ::selection 的樣式