CSS font-size: A Definitive Font-Sizing Guide

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the CSS font-size property until it looks right only to find it’s different in another browser. A little understanding can go a long way…

Key Takeaways

The CSS font-size property can be assigned different size parameters, including absolute, relative, or length size parameters. An element will inherit the font-size of its parent unless specifically overridden, which is crucial when specifying relative sizes.
Absolute font-sizing keywords are available, but their exact sizes can differ across browsers, making them a crude method of font sizing often avoided by developers. Relative font-sizing keywords, on the other hand, size the font according to its parent element. Absolute lengths can be assigned to the font-size property, but they have their own issues, with pixel being the most suitable despite potential accessibility issues.
The general consensus among developers is that using ’em’ or ‘%’ is the best solution in most situations for web fonts, as they can be finely scaled relative to each other and support browser text sizing. It’s also recommended to use a percentage font-size on the body tag for better text-sizing in older browsers.

The font-size Property

The font-size property can be set for any HTML tag (even if it would not normally contain textual content like br). It can be assigned a variety of absolute, relative, or length size parameters.

An element will inherit the font-size of its parent unless you override it. This is especially important when you specify relative sizes.

Absolute Font Sizing Keywords

Several absolute font-sizing keywords are available. The font size is determined from a browser preset and the element will not inherit its parent’s size.

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

Although most browsers support these keywords, the exact sizes will differ. They are a fairly crude method of font sizing and are generally avoided by most developers.

Relative Font Sizing Keywords

Two relative font-sizing keywords are available. The font is sized according to its parent element:

font-size: smaller;
font-size: larger;

For example, if the parent has a font size of ‘medium’, a value of ‘larger’ will set the element to ‘large’. Other font units are normally altered by a factor of around 1.2 but, again, there is no standard and browser results will differ.

Absolute Lengths

The font-size property can be assigned an absolute length:

mm: millimeters, e.g. 10mm.
cm: centimeters, e.g. 1cm ( = 10mm).
in: inches, e.g. 0.39in ( ~= 10mm).
pt: point, where 1pt is generally assumed to be 1/72 inch e.g. 12pt.
pc: pica, where 1pc is 12pt
px: pixel, e.g. 14px.

In general, there are issues with all these measurement units. Millimeters, centimeters and inches are inaccurate for a screen-based medium. Points and picas are unreliable since systems can use different dpi settings. Pixel appears to be the most suitable, but it can lead to accessibility issues because the text cannot be resized in IE.

Relative Lengths

The font-size property can be assigned a unit that it relative to its parent’s font size:

em: 1em is equivalent to the current font size, so 2em is twice as large.
%: 100% is equivalent to the current font size, so 200% is twice as large.
ex: 1ex is equivalent to the height of the letter ‘x’ in the current font.

Few developers use ‘ex’, but it can be useful in some situations where you need fine-grained font sizes, e.g. 1ex rather than 0.525em.

Percentage and ’em’ sizes are equivalent, e.g. 50% = 0.5em, 100% = 1em, 120% = 1.2em, etc. Some browsers exhibit subtle differences but it’s rarely a major problem. If you want to save every byte, you could choose the shortest definition, i.e. 50% is shorter than 0.5em and 1em is shorter than 100%.

Text Sizing and Page Zooming

This is where additional complexity creeps in. Most browsers allow the user to:

increase or decrease the base text size (image dimensions are not changed)
zoom the page in or out so all the text and graphics change accordingly, or
allow both text sizing and page zooming.

Just to complicate matters further, Internet Explorer does not allow text resizing on elements which have a font size defined in pixels (px).

If you’re a designer moving to the web from a print background, it’s disconcerting to give the user that much power. Your design could be ruined by a user zooming in 200% but reducing the text size to 50%. And — no — there is nothing you can do to prevent it. Nor should you.

CSS Font Sizing Recommendations

The general consensus is that ’em’ or ‘%’ is the best solution in most situations. Web fonts can be finely scaled relative to each other and browser text sizing is supported. I would also recommend using a percentage font-size on the body tag; it results in better text-sizing in some older browsers.

There are a couple of other recommendations I would suggest when you’re developing a site:

reset the font size and page zoom to their default values in all your browsers before testing (it’s caught me out a few times!)
try reasonable combinations of text sizing and page zooming in a variety of browsers to ensure the text remains readable.

Has font sizing ever caused you problems? Do you have any other tips?

Frequently Asked Questions (FAQs) on CSS Font Sizing

What is the difference between absolute and relative font sizes in CSS?

In CSS, font sizes can be set using absolute or relative values. Absolute values are fixed and do not change based on the size of the parent element. They are defined using units like pixels (px), points (pt), or centimeters (cm). On the other hand, relative values are dynamic and change based on the size of the parent element. They are defined using units like em, rem, or percentages (%). The choice between absolute and relative font sizes depends on the design requirements and responsiveness of the webpage.

How does the ’em’ unit work in CSS font sizing?

The ’em’ unit is a scalable unit in CSS used for font sizing. It is relative to the font size of its closest parent element. For instance, if the parent element has a font size of 20px, then “1em” would be equal to 20px for that element’s children. If no font size is defined, the default is usually 16px, so “1em” would be 16px.

How can I use the ‘rem’ unit for font sizing?

The ‘rem’ unit stands for “root em”. It is relative to the root element (html) rather than the parent element. This means that 1rem equals the font size of the root element. If the root element’s font size is 16px (the default size for most browsers), then 1rem would be equal to 16px.

What is the ‘vw’ unit in CSS font sizing?

The ‘vw’ unit stands for viewport width. It is relative to the width of the viewport, where 1vw is equal to 1% of the viewport’s width. This unit allows the font size to adjust based on the width of the screen, making it a great tool for responsive design.

How can I make my font size responsive using CSS?

To make your font size responsive, you can use relative units like em, rem, or vw. These units adjust the font size based on the size of the parent element, the root element, or the viewport width, respectively. This allows the font size to change dynamically based on the screen size or the size of the parent element.

How does the ‘calc()’ function work in CSS font sizing?

The ‘calc()’ function in CSS allows you to perform calculations to determine the font size. It can be used with different units, making it a powerful tool for creating responsive designs. For example, you can use ‘calc()’ to set a font size that is a mix of a fixed pixel value and a relative viewport value.

What is the impact of the ‘font-size-adjust’ property in CSS?

The ‘font-size-adjust’ property in CSS allows you to adjust the x-height (the height of lowercase letters) of a font. This is useful when you are using a fallback font, as it ensures that the x-height is preserved, keeping the readability consistent regardless of the font used.

How can I use the ‘ch’ unit in CSS font sizing?

The ‘ch’ unit in CSS is relative to the width of the “0” (zero) character of the font being used. This unit is useful when you want to set the width of elements with respect to the characters contained in them, such as setting the width of a button based on the length of the text inside it.

What is the ‘lh’ unit in CSS font sizing?

The ‘lh’ unit stands for “line height”. It is relative to the line height of the element. This unit is useful when you want to set the height of elements based on the line height, such as creating a vertical rhythm in your design.

How can I use the ‘ex’ unit in CSS font sizing?

The ‘ex’ unit in CSS is relative to the x-height of the current font. The x-height is typically the height of lowercase letters like ‘x’. This unit is useful when you want to set the height of elements based on the x-height, such as aligning elements vertically based on the text inside them.