CSS Fonts

In the domain of styling text, styling the font is a whole category in itself. CSS can alter the font family, size, boldness and text style. Some of the CSS properties we’ll study in here are:

  • font-family
  • font-style
  • font-size
  • font-weight
  • font-variant


font-family

Font families have two types in CSS:

generic family: A look-wise group of fonts like Serif or Monospace
font family: Specific families for different type of fonts like, Verdana and Times New Roman

The font-family property has what is called a ‘fallback’ system. As per this feature, if the browser does not support the

specified font, it tries the next possible font to render the text.

Thus, while giving the value to this property, we start with the specific font and then carry on to end with the generic family so that the browser can choose from the available options.

font-style

It is mostly used to italicise the text. We can provide three values here:
normal: No italics
italic: Renders in italics style
oblique: Somewhat similar to italics but not supported by all browsers

font-size

The font-size can be of two types – Absolute and Relative.

The Absolute size is given when you know the physical size of the output. Since the physical size is given here, the size remains same and unchangeable for all the browsers. On the other hand, Relative size is more flexible as it is set as per the surrounding elements and also allows the user to change the size of the browser. Some permissible values are:

Pixel length: Given in px
em: It comes under the relative category. 1em is equal to the current size of the font. Since, the default font-size is 16px, we often consider 1em=16px and therefore we can calculate the relation as pixels/16=em
Percentage: If you put the default font-size in percentage you and rest in em everywhere else, your font size would work in all browsers.
vw: The ‘viewport-width’ value allows the font to follow the size of the browser. This resizing the browser will automatically resize the font’

font-weight

Basically, alters the boldness. The value can either be normal or bold.

font-variant

The font is rendered in small-caps when all the characters are in upper caps and the first letter in each word is slightly larger than the subsequent ones. This can be done using the font-variant property.