From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Font-size and accessibility

Font-size and accessibility - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Font-size and accessibility

“

- [Instructor] Setting font sizes in pixels is a common practice, but using relative sizing is often a better choice for accessibility. I'm going to demonstrate how relative font sizing works in the browser using the example HTML file from exercise 01_03. I'm using Firefox, but this will apply to other browsers as well. This is how the default font size of the text looks before we add any CSS. As mentioned before, the text is equal to 16 pixels except for the headings, which range in size according to the heading level. In the browser settings under fonts, we can confirm that the default size is 16 pixels. I'll change it to 20, then refresh the browser tab containing the HTML file. With this setting updated, the default font size for the browser is now equal to 20 pixels. The heading text is also larger, but maintains the same sizing hierarchy. This is because default browser styles are defined using the relative M…

Contents