Font Properties in CSS

Tweet

Font properties in CSS help to make a difference in the text, by changing the size and style of texts in HTML. The texts can be changed in five ways by changing the values like size, family, style, weight and variant. There is also a font-shorthand property where all the five values can be included in one.

1. Font-Family

Just like people have different hand writing, a web developer can also set a default font hand writing( font-family ) for his/her website.

body {
font-family : Arial;
font-family : Verdana;
font-family : Sans-Serif;
}

Here, if the users computer pre-installed Arial font, the webpage will be showed in Arial. But, if Arial was not installed, then it will check for Verdana and then Sans-Serif and it will show the first installed font in the users computer. The above code can also be shortened into,

body {
font-family : Arial, Verdana, Sans-Serif;
}

2. Font Size

Font Size property is used to change the font size of the texts and it can be represented in three type of values.

Absolute values are represented in pixels or inches in which the values cannot be changed when tried to maximize the screen.

Relative Values are the values which are in percentage and ems in which the size of the text changes when the user maximizes the screen accordingly.

Keywords values are presented in keywords instead of numbers like x-small, small, large and xx-large.

p {
font-size: 14px;
}

p span {
font-style : italic;
font-size : 1.5em;
}

p span.small {
font-style : italic;
font-size : small;
}

3. Font Style

The font style is used to change a font into italics or convert a font into normal from italics.

body p {
font-style : italics;
}

em {
font-style : normal;
}

.intro p {
font-style : oblique;
}

4. Font Weight

The font weight property is used to make the font either lighter are bolder. The values can either be numerical from 100 to 900 or words like lighter, normal, bold and bolder.

a {
font-weight: 300;
}
p {
font-weight: lighter;
}
em {
font-weight: normal;
}
span {
font-weight: bold;
}
span .code {
font-weight: bolder;
}

5. Font Variant

This property can be used to make font into small capital letter or small capital letters to normal fonts.

p {
font-variant: small-caps;
}
em {
font-variant: normal;
}

Font Shorthand Property

All the font property declared above can be used in a single shorthand property with certain rules,

1. When using font shorthand property, the values of font-size and font-family must always be declared.
2. The first three values should be font-weight, font-style and font-variant in any order, followed by a font-size and a font-family properties.

p {
font: bold italic small-caps .75em verdana, arial, sans-serif;
}