i

Learn HTML and CSS in 10 Days

Font Size, Font Style, Font Variant, Font Weight And Line Height

Font Size

The font-size offers with an option to set the size of text using common length value, including percentages, em units, points, pixels, or font-size keywords.

body {

  font-size: 14px;

}

Font Style

To convert text into italics or to cease it from getting italicized, the font-style property is used. It takes in 4 keywords i.e., italic, normal, inherit, and oblique. Among them, the most popular ones are normal and italic.

.special {

  font-style: italic;

}

Font Variant

It occurs most often, but sometime text will be required to set in small capitals, otherwise called small caps. For this purpose, we need font-variant property. It takes in 3 values i.e., small-caps, normal, and inherit. 

.firm {

  font-variant: small-caps;

}

Font Weight

Sometime it may be needed to make our text bold or provide it with some specific weight of a typeface. For this, we are going to use the property called font-weight. This property either accepts numeric or keyword values.

The keyword values include bold, normal, inherit, bolder, and lighter. It is advised to use bold and normal as your primary keyword. As opposed to utilizing the keywords lighter or bolder, it's smarter to utilize a numeric incentive for increasingly explicit control.

.daring {

  font-weight: bold;

}

The numeric values incudes 100, 200, 300, 400, 500, 600, 700, 800 and 900. 100 refers to the thinnest weight and 900 refers to the thickest weight.

.daring {

  font-weight: 600;}

Line Height

To define the distance present between 2 lines of text, we use the line-height property. It is recommended to keep the value of line-height as one and a half times that of a font-size value.

body {

  line-height: 22px;

}

Line height also helps in making a single line of text within an element vertically.

.btn {

  height: 22px;

  line-height: 22px;

}

This process may be noticed with alert messages, buttons and other single-line text blocks.