CSS Font

Till now, we have seen some keywords to set properties such as font-family. In this section, we will discuss the font properties.

Set font type

To set a font type, the property is font-family. Below is an example to demonstrate this.


<html>
<head>
<style type="text/css">
p.courier {font-family: courier}
p.sans {font-family: sans-serif}
p.times {font-family: times}
</style>
</head>

<body>
<p class="courier">This is paragraph with courier font</p>
<p class="sans">This is paragraph with sans serif font</p>
<p class="times">This is paragraph with times new roman font</p>
</body>
</html>

The output will be:

This is paragraph with courier font

This is paragraph with sans serif font

This is paragraph with times new roman font

Set font size

The property to set font size is font-size. The value can be a number or a percentage.


<html>
<head>
<style type="text/css">
p.size1 {font-size: 150%}
p.size2 {font-size: 100%}
</style>
</head>

<body>
<p class="size1">This is paragraph</p>
<p class="size2">This is also a paragraph</p>
</body>
</html>

The output is below:

This is paragraph

This is also a paragraph

Below are some examples to specify all the ways to set the size of the font.

font-size:normal
font-size:14px
font-size:14pt
font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large
font-size:smaller
font-size:larger
font-size:75%

The size of the font can also be set by using the aspect ratio. The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value. Higher is the aspect ratio, higher is it's legibility. E.g. Times New Roman has an aspect value of 0.46. It means when font size is 100px, it's x height is 46px. Below is an example:

<html>
<head>
<style type="text/css">
p {font-size-adjust: 0.50}
</style>
</head>

<body>
<p>This is paragraph with size 0.50</p>
</body>
</html>

Below is the output:

This is paragraph with size 0.50

Set font style

By using font-style, you can give a style to your font like italics, oblique or normal. Let's see an example to demonstrate this.

<html>
<head>
<style type="text/css">
p.italic {font-style: italic}
p.normal {font-style: normal}
p.oblique {font-style: oblique}
</style>
</head>

<body>
<p class="italic">This is italic text</p>
<p class="normal">This is normal text</p>
<p class="oblique">This is oblique text</p>
</body>
</html>

The output will be as follows:

This is italic text

This is normal text

This is oblique text

Set font variant

The font-variant property can have one of the two values - normal or small-caps. Let's see how to use them and the output they give.

<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<p class="normal">This is normal text</p>
<p class="small">This text uses small-caps</p>
</body>
</html>

The output is given below:

This is normal text

This text uses small-caps

Set font boldness

The property font-weight is used to define the boldness of a font. The values that this property can take are given below:
normal: This is the default normal font
bold: This is thick font
bolder: This is thicker font
lighter: This is lighter font
100, 200, ...., 900 This defines thickness of the font. 100 is lightest font. 400 is normal font thickness and 700 is bold. Let's see an example:

<html>
<head>
<style type="text/css">
p.thick {font-weight: bold}
p.thicker {font-weight: bolder}
p.thickest {font-weight: 900}
</style>
</head>

<body>
<p class="thick">This is thick font</p>
<p class="thicker">This is thicker font</p>
<p class="thickest">This is thickest font</p>
</body>
</html>

The output is given below:

This is thick font

This is thicker font

This is thickest font