Font size has a large impact on the readability of content on a web page. If the font is too small or large, it can become difficult to read depending on the user’s distance from the screen. Over time, the
font-size property has increased to match these accessibility concerns—arising, in part, from the introduction of multi-size devices to the digital space, including Smart TVs, tablets, phones, etc. While the size of a web page’s text largely depends on the typeface used, a minimum size between 18 to 20 pixels is recommended for smaller screen sizes.
Line height, or the spacing between lines of text, also contributes heavily to readability. If the
line-height property’s value is too small, lines will appear too close together. If the
line-height is too large, lines will be separated by too much distance. The default value of
line-height in browsers is around 1.2—however, Web Content Accessibility Standards recommend a minimum of 1.5 within paragraphs.
letter-spacing property provides additional visual clarity by controlling the space between individual letters in a word—the value of
letter-spacing property defaults to
normal in browsers. Providing a value to this property (for example,
0.5em) will expand or contract the space between letters. Letter spacing is also accessible from screen readers’ perspective as it allows characters to be spaced without the use of actual space characters (
). Some screen readers will read each letter individually if spacing characters are used, which will make the text incomprehensible to users.
font-size of 20 pixels to all
line-height of 1.5 for all
letter-spacing to 0.05em for all