CSS Font-size

The font-size property in CSS is used to specify the height and size of the font. It affects the size of the text of an element. Its default value is medium and can be applied to every element. The values of this property include xx-small, small, x-small, etc.

Syntax

The font-size can be relative or absolute.

Absolute-size

It is used to set the text to a definite size. Using absolute-size, it is not possible to change the size of the text in all browsers. It is advantageous when we know the physical size of the output.

Relative-size

It is used to set the size of the text relative to its neighboring elements. With relative-size, it is possible to change the size of the text in browsers.

NOTE: If we do not define a font-size, then for the normal text such as paragraphs, the default size is 16px, which is equal to 1em.

Font-size with pixels

When we set the size of text with pixels, then it provides us the full control over the size of the text.

Example

Font-size with em

It is used to resize the text. Most of the developers prefer em instead of pixels. It is recommended by the world wide web consortium (W3C). As stated above, the default text size in browsers is 16px. So, we can say that the default size of 1em is 16px.

The formula for calculating the size from pixels to em is em = pixels/16.

Example

Responsive font size

We can set the size of the text by using a vw unit, which stands for the 'viewport width'. The viewport is the size of the browser window.

1vw = 1% of viewport width.

If the width of the viewport is 50cm, then the 1vw is equal to 0.5 cm.

Example

Font-size with the length property

It is used to set the size of the font in length. The length can be in cm, px, pt, etc. Negative values of length property are not allowed in font-size.

Syntax

Example