Responsive Typography

  • Recommended size for today’s screens is 16px for mobile and from 18 to 22 px for desktop.
  • The ideal width of a line of text is from 45 to 75 characters—including spaces.
  • For paragraphs, ideal line-height is usually between 1.3 and 1.6. So a body text set at 16px should have a line-height from 21 to 26 px.

How to calculate line height

"The line-height is determined by the font-size of the body copy. If the base font-size is 12px or 0.75em (12 ÷ 16 = 0.75, 16px is the default browser font-size), then a proper line-height could be 0.75 × 1.5 = 1.125em (150% taller than the font-size, or 18px)."

Resources to review: