Deprecated in HTML5. Do not use.

HTML Font Size Is Out (But CSS Is In): Here's How To Specify Font Size Today

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Attribute of
<font> HTML Tag
What does HTML Font Size Is Out (But CSS Is In): Here's How To Specify Font Size Today do?
Was used to specify the size of text. Deprecated. Use CSS instead.
The Font Element and it’s Attributes have been Deprecated This attribute has been deprecated and should not be used. Browser support for this attribute is limited and using it may produce unexpected results. Instead, use CSS to style fonts. To learn more, see our tutorial on Fonts and Web Typography.

The font-size CSS attribute can be used to change the size of any text element. Absolute units, such as point and pixels may be used, as well as relative units such as percentages and ems. Relative font sizes allow you to specify font size relative to the surrounding text. For example, this rule sets the font of <EM> elements to 180% the size of the surrounding text, making <EM> elements a little more <EM>phasized:

em {      font-size: 180%;     } 

So this string that uses <EM>

<p>That is a <em>groovy</em> idea!</p> 

Looks like this:

.largEm{font-size: 180%;margin:0;}That is a groovy idea!

Headings and Relative Sizes

Using relative font sizes when applied to headers has a special problem that is worth understanding. Relative font sizes are usually pretty intuitive. You set a size with a percentage and the font appears that percent larger or smaller than the surrounding text. Headings (<H1>, <H2>, etc) throw a monkey wrench into relative sizes. It’s important to understand with relative fonts that they are relative to the surrounding element. For example, if you set your <H1> headers to a relative font size of 150%, you might expect that they would be fifty percent larger than normal <H1> elements:

h1 {      font-size: 150%;     } 

Surprisingly, this rule will probably make the H1 characters smaller than usual, not larger. That’s because the 150% is relative to the surrounding element, not the normal size of an H1 element. By default, most browsers render H1 elements at twice the size of normal text. A relative size of 300% will probably give the effect of a fifty percent larger <h1> element. Let’s how this works out in practice. Take these three headings for instance:

<style>    #onefifty {     size: 150%;   }   #threehundred {     size: 300%;   } </style> <h1>This is a Normal h1 Element</h1> <h1 id="onefifty">This h1 is Size 150%</h1> <h1 id="threehundred">This h1 is Size 300%</h1>  

Initially, you might have expected the second h1 to be 50% larger than the first, and the last to be three times the size of the first. However, at this point, you should know that isn’t what will happen.

See our tutorial on Fonts and Web Typography to learn more.

Adam is a technical writer who specializes in developer documentation and tutorials.