CSS Font size – Ways to set text size with 2 examples

The font-size property of CSS

The font-size property sets the font size of text in HTML elements. This may be required to set the heading size of top heading, for example,  to be larger than text that comes underway in your web page. With font size property, you can control the size of the text in different elements.

An example of font-size

Similarly, the font size in paragraphs <p> might be required smaller in certain paragraphs than others.

Following are a few examples of font size CSS property, let us first look at the syntax.

Syntax of font size

The syntax to use CSS font-size property is:

font-size: 15px;

font-size: 15pt;

font-size: medium;

The value of font-size CSS property can be set by the different ways. The font size can be set by using small, large, and medium values. It can also be specified by using the length in pixels (PX), pt, cm etc.

Besides, you can use the x-small, xx-small for even the smaller size and x-large and xx-large for the larger size.

The examples below shows setting the font-size by different ways.

Font-size example by length

This example sets the font-size of heading 1 in px, heading 2 in pt and paragraph in em. Where em is equal to the current font size of the document.

If you set the value as 2em in font size property then it will be double of the size of document default text.

*One pt is equal to 1/72 of an inch.”

Experience this example online

Font size example by small, large factor

This example uses the small, x small, large, x large in headings and paragraphs to set CSS text size.

Experience this example online

You can see, the h1 is given xx-large, h2 is x-large and h3 is given the large value for CSS text size. Similarly, the example shows three <p> tags where p1 is given small, p2 x-small and p3 xx-small values in CSS font size property to make the text size larger or smaller.

Also see CSS font | CSS font-weight

Was this article helpful?

Related Articles

Leave A Comment?