CSS Fonts

In this chapter we will study the properties of fonts such as font-family, font- size, font style etc.

Font family:

We can specify many fonts separated by commas so that if one font is not supported in any browser, it can try to use alternative font. So we can start with the font that we want and should end the font-family with a generic font name. it is important to note that the font name should be put in double-quotes if it is made up of more than one word. For example,

p{ font-family: Calibri, serif;}

Font weight:

The font-weight property allows the text to be normal or bold, i.e. it specifies the weight of the font. For example, 

#thick { font-weight: normal;}

Font size:

It specifies the size of the font. If the font size is not specified, the default size is set to be 16px. Font size can be set up using three units- pixels, percentages and ems. Pixels are relative to the resolution of the screen which means that we can zoom in or zoom out the page as per our need.  For example,

h2{ font-size: 40px;}

em allows users to resize the text relative to the size of the text of parent element.ems are more likely to vary if the user has changed the default size of the browser. 1em= 16px. Example,

h2{font-size: 1.4em;}

Percentages also work in the same way as em does. Example,

h2{ font-size: 95%}

Font style:

Font-style property can have three values: normal, italic and oblique.

The examples of each are as follows,

.normal { font-style: normal;}
.italic { font-style: italic;}
.oblique{ font-style: oblique;}

Responsive font size:

It means that the font will follow the size of the browser. It is specified using ‘vw’. For example,

p{ font-size: 20vw;}