Font size

The font-size property defines the relative or absolute size of the font, given its family name.

The font-size property contains following information:

value: <absolute-size>, <relative-size>, <length>, <percentage> or inherit;
initial: medium;
applies to: all elements;
inherited: yes;
percentages: refers to inherited value;
media: visual;
computed value: absolute length.

The font size corresponds to 'em' square value which is often used in typography.

In <absolute-size> values can be xx-small, x-small, small, medium, large, x-large and xx-large, with the medium value is user preferred (set in browser 'option' menu).

To preserve readability it is suggested to the browsers to avoid sizes that are smaller than 9 pixels per EM unit on a computer display.

Possible values for <relative-size> are larger and smaller while other values are referring to the computed font size of the current element based on the inherited value.

Example

CSS font-size property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
p { 
	position:relative; top:5px; margin-top:-10px;
	font-family:cursive;
	font-size:12px;
}
p + p { 
	font-size:12pt;
}
p + p + p { 
	font-size:1.5em;
}
p + p + p + p { 
	font-size:130%;
}
p + p + p + p + p { 
	font-size:smaller;
}
p + p + p + p + p + p { 
	font-size:larger;
}
</style>
</head>

<body>

<p>Generic cursive family with size of 12px</p>
<p>Generic cursive family with size of 12pt</p>
<p>Generic cursive family with size of 1.5em</p>
<p>Generic cursive family with size of 130%</p>
<p>Generic cursive family with size 'smaller'</p>
<p> Arial family with weight 'larger'</p>

</body>
</html>

›› go to examples ››

Example

Comments

About

Contact

Get Connected