font


Property Description
font Allows you to combine several of the following properties into one
font - family Specifies the typeface or family of font that should be used
font - size Specifies the size of a font
font - weight Specifies whether the font should be normal or bold
font - style Specifies whether the font should be normal, italic, or oblique
font - stretch Allows you to control the width of the actual characters in a font
font - variant Specifies whether the font should be normal or small caps
font - size - adjust Allows you to alter the aspect ratio of the size of the font's characters

A typeface is a family of fonts, such as the Arial family.


A font is a specific member of that family, such as Arial 12 - point bold.



	      	< p class=”one” > Here is some text in a sans-serif font. < /p >
			< p class=”two” > Here is some text in a serif font. < /p >
			< p class=”three” > Here is some text in a monospaced font. < /p >
	      

The font - family Property


The font - family property allows you to specify the typeface that should be used for any text inside the element(s) that a CSS rule applies to.


	      	p.one {font-family:arial, verdana, sans-serif;}
			p.two {font-family:times, “times new roman”, serif;}
			p.three {font-family:courier, “courier new”, monospace;}
	      

You may notice that each list of typefaces in the previous example ends with so - called generic font names (sans - serif, serif, and monospace). The idea behind these is that each computer will have a font that corresponds to one of five generic font groups (sans - serif, serif, monospace, cursive, and fantasy), and if it cannot find the typefaces you have specified, it can use its choice of font that corresponds to that generic font group:


Generic font name Type of font
serif Fonts with serifs
sans - serif Fonts without serifs
monospace Fixed - width fonts
cursive Fonts that emulate handwriting
fantasy Decorative fonts for titles and so on

One thing to keep in mind when choosing a list of fonts is that each font can be of different heights or widths, so you will probably want to choose a list of fonts that are of a similar size (otherwise the layout could look very different to what you would expect).


The font - size Property


The font - size property enables you to specify a size for the font. You will often see the value for this property specified in pixels, like so:


p.twelve {font-size:12px;}



However, there are many other ways you can provide a value:


Length (along with pixels, there are several other units of length which you will learn about in the section "Lengths"


px em ex pt in cm pc mm


Absolute size (each of these values corresponds to a fixed size)


xx-small x-small small medium large x-large xx-large


Relative size (this value is relative to the surrounding text)


smaller larger


Percentage (a percentage is calculated as a proportion of the element that contains the text)


2% 10% 25% 50% 100%


The use of percentages rather than pixels is becoming increasingly widespread because it allows users to increase and decrease the sizes of fonts if they are having trouble reading them.


Here is an example of each of these ways to specify a value for the font - size property:


	      	p.one {font-size:xx-small;}
			p.twelve {font-size:12px;}
			p.thirteen {font-size:3pc;}
			p.fourteen {font-size:10%;}
	      

font - weight Property


Most fonts have different variations, such as bold and italic. When typographers create a new font, it is not unusual for them to individually craft a separate, thicker version of each character for the bold variation.


Despite all this careful work, rather than finding the bold version of a typeface, browsers tend to use an algorithm that takes the normal version of the font and makes it thicker. Because it uses an algorithm, it means you can also create a lighter version of fonts, too. This is what the font - weight property is for.


The possible values for font - weight are:


normal bold bolder lighter 100 200 300 400 500 600 700 800 900


	      	p.one {font-weight:normal;}
			p.two {font-weight:bold;}
			p.three {font-weight:normal;}
			p.three span {font-weight:bolder;}
			p.four {font-weight:bold;}
			p.four span {font-weight:lighter;}
			p.five {font-weight:100;}
			p.six {font-weight:200;}
	      


font - style Property


The font - style property allows you to specify that a font should be normal , italic , or oblique , and these are the values of the font - style property; for example:


	      	p.one {font-style:normal;}
			p.two {font-style:italic;}
			p.three {font-style:oblique;}
	      

In typography, an italic version of a font would normally be a specifically stylized version of the font based on calligraphy, whereas an oblique version of font would take the normal version of the font and place it at an angle. In CSS, when you specify a font - style property should be italic , browsers will usually take the normal version of the font and simply render it at an angle (as you would expect with an oblique version of a font).


font - variant Property


There are two possible values for the font - variant property: normal and small - caps . A small caps font looks like a smaller version of the uppercase letterset.


For example, look at the following paragraph, which contains a <span> with a class attribute


< p > This is a normal font, but then < span class="smallcaps" > there are some small caps < /span > in the middle. < /p >

p {font-variant:normal;} span.smallcaps {font-variant:small-caps;}


font - stretch Property


At the time of this writing, there was no support for this property in the main browsers , but I shall mention it for those interested in type. In the same way that some typefaces have condensed and extended versions with thinner or thicker characters, the font - stretch property sets the width of the characters in a font. It can take the following fixed values:


ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded


Or it can take relative values, where the value is in relation to that of the containing element:


normal wider narrower


font - size - adjust Property


At the time of this writing, the font - size - adjust property does not have any support in the main browsers , but its purpose is to allow you to change a font ’ s aspect value, which is the ratio between the height of a lowercase letter x in the font and the height of the font.


For example, Verdana has an aspect value of 0.58 (which means that when the font ’ s size is 100 px, its x - height is 58 pixels). Times New Roman has an aspect value of 0.46 (which means that when the font ’ s size is 100 px, its x - height is 46 pixels). This makes Verdana easier to read at smaller sizes than Times New Roman. By altering a font ’ s aspect value you can, therefore, change its height.