How Is Font Size Measured?

Font Sizes

Fonts have several different ways of being measured in HTML. There are specific length sizes, preset absolute values, relative values and percentages. Even though you can set sizes a number of different ways, the font family used will usually have an effect on the final rendered size of the text in the browser. Other factors that can come into play would be things like the default browser text size and inherited sizes from parent HTML elements.

Relative Font Length Types

The most common way fonts are measured are by font length. A font length can be relative or absolute. This can be an integer or decimal number followed by one of the supported font length types.

Relative font length types are: "em" for ems, "ex" for x-height and "px" for pixels. An example would be "font-size: 1.2 em" for 1.2 times the inherited font size of the HTML element. Relative font lengths like "em" will inherit the font sizes of parent HTML elements in relation to the em value.

Pixel font sizes are not relative to their parent elements, but they are relative to the display resolution of the computer monitor.

Absolute Font Length Types

Absolute font length types are "pt" for points, "mm" for millimeters, "cm" for centimeters, "in" for inches and "pc" for picas. An example would be "font-size: 12 pt" for a twelve-point font size. Absolute font sizes are based on physical sizes but can still vary between font families.

Absolute Font Sizes

Absolute font sizes are: "xx-small," "x-small," "small," "medium," "large," "x-large" and "xx-large." These are all preset sizes. "Medium" is the default size of standard font size elements. Making relative font size changes will either ascend or descend along this font size list.

Relative Font Sizes

Relative font sizes are "larger" or "smaller." Relative font sizes will increase or decrease the font size in relation to the default font size and inherited font sizes. For example, if the inherited or default font size of an element is a medium size and the font size of that element is set to "larger," then the calculated font size will result in a "large" font size.

Percentage Font Size

The percentage font size is simply a percentage of the element's inherited or default font size. For example, a "font-size: 90%" would result in the element rendering at 90 percent of the size it would have without any font size explicitly set.

References

• Font Size Information