CSS FONTS

To make HTML documents (webpage) more readable and easy to overview we have different size, forms, shapes and different other visible properties of texts.

We can provide texts of these different properties using CSS font properties.

The CSS font properties are as follows:

1. CSS font family
2. CSS font size
3. CSS font style
4. CSS font-weight
5. CSS font-variant

1).CSS font family

It is divide into two parts:

• Generic family: This family includes Monospace, serif and sans-serif.
• Font family: This includes font family like Monospace, serif and arial, Monospace, serif and New Times Roman etc.

sans-Serif

• Arial, sans-serif:
• Helvetica, sans-serif:
• Gill sans, sans-serif:
• Lucida, sans-serif:
• Helvetica Narrow, sans-serif
• sans-serif

Serif

• Times, serif:
• Times New Roman, serif:
• Polatino, serif:
• Bookman, serif:
• New Century Schoolbook, serif
• serif

Using CSS property font-family we specify family to the HTML elements.

h1 {
    font-family:"sans-serif";
}
h2 {
    font-family:"monospace";
}
p {
    font-family:"Times New Roman";
}

Output:

2).CSS font size

CSS font-size property is used to set font size.

Using this property we can resize the font choosing any scale like px,em,%(percentage) etc.

h1 {
    font-size:40px;
}
h2 {
    font-size:1.8em;
}
p {
    font-size:120%;
}

3).CSS font style

CSS font-style property is used to set the font style of an HTML document.

Using this property we can choose font style like normal,oblique or italic.

• normal - font is normal.
• oblique - font is little leaning.
• italic - font is italic.oblique and italic looks similar.

h2 {
    font-style:normal;
}
h3 {
    font-style:oblique;
}
p {
    font-style:italic;
}

4).CSS font weight

CSS font-weight property is used to define weight of font and manages the boldness of font.

font-weight ranges from 100 to 900 and three more values i.e bold,bolder and lighter.

<h2 style="font-variant:normal">This heading has normal font-variant property.</h2>
<p style="font-variant:small-caps">This line has small-caps font-variant property.</p>

5).CSS font variant

CSS font-variant property is used to define whether or not text be displayed in capital letters.

font-variant:small-caps makes small text capital but those tests which convert to capital are smaller in size than those of original capital text present in paragraph.

<h2 style="font-variant:normal">This heading has normal font-variant property.</h2>
<p style="font-variant:small-caps">This Paragraph Has Small-caps Font-variant Property.</p>