Values 4w6m73

<absolute-size>

An <absolute-size> keyword refers to an entry in a table of font sizes computed and kept by the browser. Each keyword refers to a specific font size specified in the browser. Possible keywords are: xx-small, x-small, small, medium, large, x-large, and xx-large.

<relative-size>

In addition to the above absolute keywords, two relative keywords exist: larger and smaller, which calculate the font size of an element relative to its parent’s font size. So, if, for example, the parent’s font size is set to large and the element’s font size is set to larger, the element’s font size will be x-large.

<length>

See the <length> entry for a list of possible length values. Negative values are not allowed.

When relative length units are used, the font size is determined relative to the font size of the element’s parent. For example, a font size of ‘2em’ would compute to double the font size of the element’s parent.

<percentage>

See the <percentage> entry for a list of possible values. Negative values are not allowed.

Percentage values are computed relative to the font size of the element’s parent. For example, a font size of ‘50%’ will compute to half the font size of the element’s parent.

Notes 5i3os

As mentioned earlier, keep in mind that relative font sizes have a direct effect on other aspects of an element that use relative units that are related to the font size. If the element’s padding for example is set to ‘2em’ and the element’s font size is set to ’16px’, then the padding would compute to ’32px’.

Choosing relative or fixed font sizes depends on the design you’re working on. However, fixed font sizes are better avoided because they are not scalable—the will not be able to zoom the page in and increase the font size in some browsers, so in this case, using relative units is the way to go to maintain a more accessible and -friendly interface.

With that said, you need to keep in mind that using relative font sizes has effects on the element’s font size, and on other aspects of the design that use relative units such as ems, which compute their values relative to the value of the font size.

The topic of choosing and using font sizes is a big one, and elaborating on it would turn this entry into a long article. So we strongly encourage you to read the Techniques For Responsive Typography article—it covers everything you need to know about font sizing and creating responsive typography on the web, with a list of best practices and recommendations.

font-size: 50%;
font-size: 1em;
font-size: 20px;
font-size: xx-small;
font-size: 200%;
font-size: 12pt;