Body content has 5 pre-determined sizes that can be used for paragraphs of text across the site.
Body sizes & weights
Desktop sizes are two steps up from mobile sizes. This applies to font size, line height, and paragraph spacing.
For example, a font size was Base6 (20px or 2rem) on mobile, the desktop size would be Base8 (25px or 2.5rem).
Body copy largest
Specs
font-size: Base7 (mobile), Base9 (desktop)
line-height: Base9 (mobile), Base11 (desktop)
Body Copy Largest has a line-height that is only two steps up instead of the default four steps up.
Body copy large
Specs
font-size: Base4 (mobile), Base6 (desktop)
line-height: Base8 (mobile), Base10 (desktop)
Body copy medium
Specs
font-size: Base3 (mobile), Base5 (desktop)
line-height: Base7 (mobile), Base9 (desktop)
Body copy small
Specs
font-size: Base1 (mobile), Base3 (desktop)
line-height: Base5 (mobile), Base7 (desktop)
Body copy smallest
Specs
font-size: Base0 (mobile), Base2 (desktop)
line-height: Base2 (mobile), Base4 (desktop)
Body Copy Smallest has a line-height that is only two steps up instead of the default four steps up.
Body copy line heights & paragraph spacing
Line height is four steps above the current font size base for body copy. Paragraph spacing is six steps below current font size..
Ex. If font size = Base4 then line height = Base8 and paragraph spacing = Base-2
There are two body sizes that break the default line height: Body Copy Largest, and Body Copy Smallest. Largest and Smallest have a line height only two steps up instead of the default four.
