From the course: CSS Essential Training
Schalten Sie den kompletten Kurs noch heute frei
Join today to access over 23,300 courses taught by industry experts.
Font-size and accessibility - CSS Tutorial
From the course: CSS Essential Training
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Inhalt
-
-
-
-
-
-
-
-
Typography for the web3m 11s
-
(Locked)
Changing fonts with font-family2m 59s
-
(Locked)
font-weight and font-style3m 3s
-
(Locked)
Web fonts with @font-face2m 31s
-
(Locked)
Web fonts with Google Fonts3m 18s
-
(Locked)
Project: Google Fonts4m 5s
-
(Locked)
The font-size property4m 6s
-
(Locked)
Font-size and accessibility6m 39s
-
(Locked)
Text-align and text-transform3m 26s
-
(Locked)
Line-height and letter-spacing3m 22s
-
(Locked)
Project: Typography styles6m 56s
-
(Locked)
Project: Buttons and spacing9m 23s
-
-
-