Body text
Default: 16px or 1em
On mobile: Use the defaults, at times 10% smaller
On Desktop: go up until 24px or 1.5em
Display text (Heading 1)
Default: 40px or 2.5em for an <h1>
On mobile: 32px or 2em or smaller, since it uses up too much space.
On Desktop: go up until 64px or 4em
Functional text (captions, nav)
Default: 12px to 14px or 0.75em to 0.875em
On mobile: Don’t go below the defaults, it’s already very small
On Desktop: go up until 16px or 1em
Relative units rock
em and rem Both are relative units used in CSS; for this article, let’s treat them as interchangeable. The reason why I love relative units is that they make things easier for us typographers.
What is EM?
An EM is a unit of typography, equal to the currently specified point-size
html { font-size: 100% } /* This means 16px by default*/
html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */
What is REM?
rem This means Root EM. It’s been built to provide some relief to the em the computational problem that many people face.
p { font-size: 1rem; }
h1 { font-size: 3rem; /* 3 times the body text */ }
h2 { font-size: 2rem; /* 2 times the body text */ }
h3 { font-size: 1.5rem; /* 1 ½ times the body text */ }
figcaption { font-size: 0.75rem; /* ¾ of the body text */ }
