css, html

Responsive font-size instellen met em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C !

1em is equal to the current font size. The default text size in browsers is 16px.
So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em

Dus:
10px= 0.625em
12px= 0.75em
14px= 0.875em
16px = 1em
18px = 1.125em
20px= 1.25em

The responsive solution that works in all browsers, is to set a default font-size in percent for the body-element and  use em for all the other font-size specs:

font-size

 

 

Advertisements