In this example, 4 different display variations for h1 are defined: 3em; 2.5em; 2em; 1.5em. The font size called into action depends on the width of the browser window in use, which is determined by the max width. In this example, the max-width is defined by the unit em. Since no fixed text size was defined in advance, the value of em is defined by the standard settings of the browser used (generally 16 pixels.) In this case, 1em = 16px. This allows a calculation of different widths, to which the font size can be adjusted; the number of pixels in the window width are simply divided by 16. In our example, the h1 display size is defined by 4 different window widths:
- up to 1024 pixels (1024 : 16 = 64em)
- up to 800 pixels (800 : 16 = 50em)
- up to 480 pixels (480 : 16 = 30em)
Needless to say, you can insert many more of these breakpoints, to realign the typeface, enabling you to adjust your headline perfectly.
In small browser windows, longer headlines can be wrapped across lines. If this is the case, you should adjust the line spacing in relation to the headline. Find out how to do this in the next section.