Font Sizing

Relative Units - Percentages

Percentages

The W3C CSS 2.1 specification states:

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers.

This means that CSS percentage values are relative to different parameters depending on the property for which the percentage is being specified. You should always bear this in mind when using percentages.

For the CSS font-size property, a percentage value is computed based on the font size inherited from an element's parent.

Percentage font size values are similar to the relative-size keywords, LARGER and SMALLER. Unlike the relative-size keywords, percentages give you nearly as much fine control over font sizes as you get with pixel sizing.

Example of Percentage Sizing

p.user { font-size: 20px; } p strong { font-size: 200%; } p span { font-size: 74%; }

<p> This paragraph is rendered in your browser's default font size. It is likely to be 16 pixels if you have not changed the base font through browser preference, options, or the view menu. The following text <strong>is contained within the STRONG tag</strong>, so it is formatted as 200%. The following text <span>is contained within the SPAN tag</span>, so it is formatted as 74%. </p>   <p class="user"> This paragraph demonstrates the effect of percentage sizing if a user has changed the browser's default font size to 20 pixels. The following text <strong>is contained within the STRONG tag</strong>, so it is formatted as 200%. The following text <span>is contained within the SPAN tag</span>, so it is formatted as 74%. </p>

View the example rendered by your browser.

As you can see in the above example, the text is sized relative to the parent element. Thus, 200% in the first paragraph has a different actual size than 200% in the second paragraph. Designers take advantage of this characteristic of percentage sizing to make their designs scalable.

Another Example

For this example, we'll re-use the markup above, but let's modify the style sheet from our prior example slightly:

View the example rendered by your browser.

You shouldn't see any differences between this example and the previous example because we haven't effectively changed the design at all. We've merely specified the BODY to use the browser's default font size, and the first paragraph is scaled to 100% of the size of the BODY tag. The only paragraph that might change is the paragraph with class "user". It has been changed to 125%, which is effectively 20 pixels only if the baseline browser font size has not been altered from the typical default value of 16 pixels.

As a designer, you can simply defer to the browser default font size for your design. If the user desires a different font size, she can use the browser's View > Text Size menu to adjust the size of the text.

Typically, a browser's default font size is rather large. If you wanted more control over the page design, you can declare smaller text explicitly in your style sheet, and override the browser's default size. Rather than changing the font-sizes to smaller percentages for every rule, you only need to change the percentage size of the BODY element. Child elements will inherit the initial size of the BODY element, and will scale down relative to the BODY element.

Setting the BODY to 62.5% will make the baseline font 10px (assuming 16px browser default). This makes it easy to set text to specific pixel sizes using ems or percentages. E.g., to size text 12 pixels, simply specify 1.2em or 120%!

View the example rendered by your browser.

Designers often employ this method of scaling the BODY element to achieve the desired font size for the entire web page. Using this method does mean that you will need to do more work initially to set the size for all elements in the document/site. However, it gives you greater control over text sizing, and the web page is much easier to maintain since it only requires one simple change to the font size for the BODY, and the effect ripples throughout the entire page or site.