HTML Font Size Is Out (But CSS Is In): Here's How To Specify Font Size Today
- Attribute of
- <font> HTML Tag
- What does
HTML Font Size Is Out (But CSS Is In): Here's How To Specify Font Size Todaydo? - Was used to specify the size of text. Deprecated. Use CSS instead.
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:
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.
