Hierarchy works when people can see the difference between levels. Pick a body size and a ratio, and every level of your type scale follows from it. See it live, check a design you already made, and copy the numbers into Figma or CSS.
Click or tap any line in the specimen to type your own words.
T-02Your scale
Type scale: each level with its size, line height, and size relative to body text
Level
Steps
px
pt
rem
Line height
Times body
Size bar
Headings use 1.2 line height and body text uses 1.5, because large type needs less space between lines.
T-03Same body size, every ratio Tap one to use it
T-04Check a design you already made Biggest to smallest
T-05Logo lockup proportions
These are starting proportions. Clear space keeps other elements from crowding the mark. Test the lockup at its smallest real use, such as a favicon or a social avatar, and adjust by eye.