Page MenuHomePhabricator

Revisit Codex Typography scale
Closed, ResolvedPublic

Description

Before we do T338598, we should reconsider the Typography scale entirely based on the needs of T363845.

Event Timeline

Similarly to what was found in an audit previously conducted as a part of T344515, we found a variety of slightly different type styles across Codex, Vector, and MinervaNeue. Below is a current audit including the most up to date font modes across the listed skins.

Reading the table:
font-size/line-height
In Vector, the h1 scales down into a fixed header when the page is scrolled. The second set of numbers is the value of the h1 when in the smaller fixed header after the page is scrolled.
h5 and h6 for the skins was determined uncertain when conducting the audit on the web, but can be filled in later.

ElementCodexVector/SmallVector/StandardVector/LargeMN/StandardMN/MediumMN/Large
h128/3528.8/39.6 • 24/2428.8/39.6 • 24/2428.8/39.6 • 24/2427.2/37.427.2/37.427.2/37.4
h224/3021/28.87524/3330/41.2524/3324/3324/33
h320/2516.8/26.8819.2/30.7224/38.419.2/26.419.2/26.419.2/26.4
h418/22.514/22.416/25.620/3216/2216/2216/22
h516/20??????
h614/22.4??????
body16/25.6 / 14/22.414/2216/25.620/3016/26.418/28.820/30
small12/19.212.6/19.814.4/23.0418/2714.4/23.7614.4/23.0414.4/21.6

A current proposal, which has been tested and refined in Figma, attempts to find middle ground between all skin font modes and what was intended when the original scale was designed in Codex. It also prioritizes the most commonly used font sizes and line heights—the body size in both Vector and MinervaNeue Standard. It unifies the type scale across modes, and creates a uniform pattern for the scale between font-size and line-height as font-size increases by 2 starting at 12 and ending at 32, i.e. font-size + 8px for line-height at sizes 12 and 14, font-size + 10px for line-height at sizes 16 and 18, and font-size + 12px for line-height at sizes 20 and beyond.

Element14/Small16/Standard18/Medium20/Large
h126/3828/4030/4232/44
h220/3222/3424/3626/38
h316/2618/2820/3222/34
h414/2216/2618/2820/32
h512/2014/2216/2618/28
h6----
body14/2216/2618/2820/32
small12/2014/2216/2618/28

This newly proposed type scale influences how components scale as a part of T363846 and could potentially be implemented in Vector and MinervaNeue font mode options. The type scale and potential font tokens/mixins can also be found portrayed in this spreadsheet.

The next step with work is to begin prototyping in code, which will be apart of a new task.