Font Size

As you can imagine, it is important to be able to adjust the font size of an element, element type, or the entire page. Fortunately (or unfortunately as you may find out), there are many ways to accomplish this all through the font-size: css property.

In general the font-size: property may be use to set the font size of a page or specific element. You can do so through units of measure that you are likely already familiar with, such as pt (point, i.e. 12pt) or px (pixel i.e. 16px).

User Zooming

An important thing to remember is that users have the ability to zoom in and our of your website. They can increase/decrease the font size, typically by going to View ➡ “Zoom In”/”Zoom Out”. This has the effect of changing a browser/pages text size.

In addition, users on most modern computers and mobile devices may “pinch” and zoom. This does not change the text size, but instead just zooms in the whole page.

If you are coming from a print world, the amount of flexibility this offers your end-users may be unsettling. But, it is powerful for them, and something you should embrace as well.

Just be aware of this while working on web development.

Fixed Sizes

font-size: may be passed “fixed-size” declarations or “relative-size” declarations. A fixed size declaration is one tries to specify the absolute size of text in a measurable unit. The most commonly used are pixels (px) and points (points).

A default size for much print based, text content, is 12pt. This is roughly equivalent to 16px. These values also tend to be the starting defult for most browsers to display text.

p.one {
    font-size: 12pt;
}
p.two {
    font-size: 16px;
}

<p class="one">Playing with Font Size.</p>
<p class="two">Playing with Font Size.</p>

Font size is an inherited property. So, setting the font size for a parent element will cause it to be inherited by all child elements. When setting relative sizes, the parents must also utilize relative sizes, or they will override all other declarations.

.parent {
    font-size: 8pt;
}

<div class="parent">
    I am the parent element. My font size was set, and all subsequent elements will get the same size.
    <p>I am a direct-child paragraph element of the 'parent element'.</p>
    <div class="div-child">
        I am a direct-child div element of the 'parent element'.
        <p>I am a direct-child paragraph element of the 'div-child' element.</p>
    </div>
</div>
<div class="neighbor">
    I am the "parent" elements neighbor. My font size was not set, so I am inheriting the font size of this website.
</div>

Relative Size

Another approach, and the one often suggested, is to use “relative size” measurements for font size instead of absolute sizes. These set the font size of an element as a ratio to the parent’s font size.

There are a few ways to accomplish this, but we will focus on two.

• percent %
• ems em

Both are relatively similar in how they work. A value of 100% or 1em will both leave the font size the same as the parent element. Likewise a value of 50% or 0.5em will reduce the font size by half.

What is an ‘em’

An em is described as being the width of the letter ‘m’. So 1em is the width of an ‘m’ in the specified font.

Why use relative sizes?

The reason for using relative sizes is that everything in your page is then in relationship from the top (*) element or wherever you set your font size. If you are using ems, and then decide that everything is too small/large, you simply need to change the base element’s size and everything else will also adjust.

NOTE: If you intend to use ems or %, you must set the base size for the elements you are using also in ems or %. I.E. The parents elements must also use these relative sizes, all the way up to the html selector.

html {
    font-size: 100%;
}

This is particularly true for headings, which are typically set in relation to the base paragraph size. If you choose to overwrite the size of headings in a page, make sure you do so relative sizes and not absolute sizes.

{ TODO: }

Please read the following to get a better sense of how to use absolute and relative font sizes, as well as the differences between the various units.

• CSS Font-Sizing: a Definitive Guide
• CSS Font-Size: em vs. px vs. pt vs. percent

Example

In the following example, the html element is set to 120% its normal size. This has the effect of making all of the text on the page larger.

The h1 and h2 elements are set to be 0.5em and 2em, respectively, in relation to the parent element. This allows them to stay in relation to their main elements font size. Essentially, all h1 elements will be half the font size, and all h2 elements will be double the font size.

On the other hand, the h3 element has been set to an absolute value of 40px. Therefore it will not adjust in size when the containing parent element is changed. As you see in the example, whereas the h1 and h2 elements both remain in proportion to the paragraph size, the h3 elements are the exact same size in both div blocks.

Finally, the relative size of parent-1 and parent-2 have been set uniquely so as to demonstrate the ability of relative sizes to maintain their relationships.

html {
    font-size: 120%;
}

div {
    background-color: #c7c2e7;
    margin: 1%;
    padding: 2%;
}

h1 {
    font-size: 0.5em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 20px;
}

.parent-1 {
    font-size: 2em;
}

.parent-2 {
    font-size: 0.8em;
}

<div class="parent-1">
    <h1>A Heading</h1>
    <p>Download this code and playaround with the relationships of font-sizes using relative sizes (ems or %).</p>
    <h2>Another Heading</h2>
    <h3>Heading 3</h3>
</div>

<div class="parent-2">
    <h1>A Heading</h1>
    <p>Notice how the relationship of headings to paragraphs stays the same. Even when you change the relative size of these elements.</p>
    <h2>Another Heading</h2>
    <h3>Heading 3</h3>
</div>