Learn

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.

Lastly, the 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.

Instructions

1.

Set a font-size of 20 pixels to all <p> elements.

2.

Set a line-height of 1.5 for all <p> elements.

3.

Set the letter-spacing to 0.05em for all <p> elements.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?