Font-size

Contact Us or call 1-877-932-8228
Font-size

Font-size

One of the nicest benefits of CSS is the precise control it gives designers over the font size. While HTML limits you to seven different relative font size, CSS gives you the ability to specify exactly how big or small you want text to appear. You literally have infinite control.

Font-size Units

All the units of measurement can be used. The following screenshot illustrates the relative size of different units:Font Size Units

Relative Font-size Terms

In addition, font size can be defined using the following relative terms:

  • xx-large
  • x-large
  • large
  • medium
  • small
  • x-small
  • xx-small
  • smaller
  • larger

The terms xx-small to xx-large work similarly to font sizes 1 through 7 in HTML, though they don't match up exactly. The terms smaller and larger change the font size of an element relative to its parent element's font size. The following code illustrates this:

Code Sample:

Fonts/Demos/FontSize.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Font Sizes</title>
</head>
<body>
<div id="smaller">
	This text is <span style="font-size: smaller;">smaller and
	<span style="font-size: smaller;">even smaller and
	<span style="font-size: smaller;">even smaller</span>
	</span></span>.
</div>

<div id="larger">
	This text is <span style="font-size: larger;">larger and
	<span style="font-size: larger;">even larger and
	<span style="font-size: larger;">even larger</span>
	</span></span>.
</div>
</body>
</html>

The above code will output the following:Font Sizes

Best Practices

Most experts agree that font size should be defined in relative units (e.g., em, rem, or %) or in terms (e.g., large, small, etc.). This is because absolute font sizes can make pages inaccessible to people who have difficulty seeing. In most browsers, a user can change both the "zoom" of the page and, separately, the default font size. While "zooming" will increase the size of all elements (font included) on the page, changing the default browser font size won't have any affect on fonts whose size in CSS is specified using absolute, rather than relative, units.

Unfortunately, there is a downside to using relatively defined font sizes and that is that you have less control over design. This can cause text to wrap when you don't want it to or table cells to expand beyond what you had intended.

Next