You can use Cascading Style Sheets (CSS) is to modify the font or typography of the page. There are several ways to describe font sizes.
In the font-size property, you’ll know that there are many different measurements to use when defining the size of the font.
Relative lengths
- xx-small through xx-large – relative to the default browser font size
- percentages – relative to the surrounding text
- em and ex – relative to the parent element
- pixels – relative to the screen resolution
Absolute lengths
What not to use
Many Web designers have use point sizes to define their font sizes on the screen. But points are a print unit of measure. So when you specify 14-point type, it might display much larger or smaller than you expect. You can notice the difference between Macintosh and Windows. Macintosh typically displays things almost 25% smaller than the same page on Windows. Web designers should definitely continue to use points as font-size lengths in their style sheets. But the points should be limited to style sheets for print.
What to use
The case for ems
If accessibility is your biggest concern, then you should use ems. Ems are sized so that the font size is relative to the parent element. In the case of most Web pages, this is the body element – and so the font is sized relative to the standard size of the browser.
Using ems as your font size measurement ensures that your pages will be accessible to most browsers and platforms. Plus, if your readers choose to change the default font size on the fly, your page will scale to that new size.
The problem with ems is that you lose control over the exact look of your page. Some people may have a much larger or smaller default size than you are used to, and with ems, your fonts will scale relative to that size. This can result in strange font sizes.
The case for pixels
If control over the look of your Web page is your biggest concern, then you should use pixels. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen.
Pixels are the measure of resolution, and the resolution of your customers’ monitors can affect the readability of your type. For example, most Windows machines are set at 96 dpi, while most Macintosh machines are set at 72 dpi. So, a font set at 72px will be 1 inch (approximately) tall on a Macintosh and three quarters of an inch tall on a Windows machine. Also, some OS’s (most often Linux and Unix) can make fonts extremely jagged and hard to read if they try to scale the font sizes from the pixel sizes embedded on the OS.
Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.small { | |
font-size: xx-small; | |
} | |
.larger { | |
font-size: larger; | |
} | |
.point { | |
font-size: 24pt; | |
} | |
.percent { | |
font-size: 200%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1 class="small">Small H1</h1> | |
<h1 class="larger">Larger H1</h1> | |
<h1 class="point">24 point H1</h1> | |
<h1 class="percent">200% H1</h1> |
References
font-size on Mozilla Developer Network