Javatpoint Logo
Javatpoint Logo

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.


The font-size can be relative or absolute.


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.


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.


Test it Now

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.


Test it Now

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.


Test it Now

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.



Test it Now

Next TopicCSS font-family

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA