html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS font-size property

Definition

The CSS font-size property allows us to vary the size of the text on our web pages.

Applies To

All elements.

Property Values

inherit - The font size properties are inherited from the parent element.

length - Defines a font size in a unit measurement such as em or pixel.

n% - A percentage value relative to the parent element where n is a number.

CSS allows absolute sizing of fonts of browser defaults or as set by the User Agent which can have the following values.

xx-small - The smallest available font size browser default or as set by your local UA.

x-small - A very small font size browser default or as set by your local UA.

small - A small font size browser default or as set by your local UA.

medium - A medium font size browser default or as set by your local UA (default).

large - A large font size browser default or as set by your local UA.

x-large - A very large font size browser default or as set by your local UA.

xx-large - The largest font size browser default or as set by your local UA.

CSS also allows relative sizing of fonts compared to the font size of the parent element.

smaller - The font size is set to a smaller font size than the parent element.

larger - The font size is set to a larger font size than the parent element.

Default Value

Default value of font-size is set to medium.

Inheritance

The font-size property is inherited from the parent element if none is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS font-size property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS font-size Property</title>

<!-- Valid values for CSS font-size Property are:
	
	inherit, length, percentage, smaller, larger, xx-small, 
	x-small, small, medium, large, x-large and xx-large. 
	
--> 

<style type="text/css">

/* Body font size set to small to show inheritance */
body {
  font-size: small;
}

/* h1 headings font size set to 150% of parent element */
h1 {
  font-size: 150%;
}

/* h2 headings font size set to 16 pixels length */
h2 {
  font-size: 16px;
}

/* Paragraph font size set to inherit (inherits from parent element) */
p {
  font-size: inherit;
}

/* A Paragraph font size set to xx-small */
.paraxxsmall {
  font-size: xx-small;
}

/* A Paragraph font size set to xx-large */
.paraxxlarge {
  font-size: xx-large;
}

</style>

</head>
<body>
<h1>H1 Headings Set To 150% of Body Element</h1>
<h2>H2 Headings Have A Font Size Length Of 16 Pixels set</h2>
<p>Paragraph Font Size Will Inherit From The Body On This Occasion. 
   The body font size has been set to small.</p>
<p class="paraxxsmall">Paragraph font size set to xx-small.</p>
<p class="paraxxlarge">Paragraph font size set to xx-large.</p>
</body>
</html>

How It Looks

The results of using the font-size property with the values above will look something like the following:

notepad
CSS font-family    << Prev          Next >>   CSS font-style

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.