html

CSS Font Size Property | Explained

In Cascading Style Sheets (CSS), font size property possesses great importance. It ensures the text stands out and enriches the sheet with a visual hierarchy. The hierarchy helps in distinguishing headings and sub-headings from normal text. The CSS font-size property uses multiple size units like pixels, em, width, and percentage values. Moreover, it also utilizes different headings ranging from <h1> to <h6>.

This write-up will discuss the font-size property in CSS. We will also teach how to explicitly use the predefined and custom font-size properties for text elements. So, let’s start!

CSS font-size property

In CSS, the font-size property is utilized for setting the size of a text element, and its value can be “predefined” or “custom size”.

In the below-given sections, we will briefly talk about the predefined and custom font size CSS values in font-size property.

CSS font-size property using predefined values

CSS provides predefined values for setting font sizes of texts. The CSS font-size property is utilized when we have the information related to the physical size of the output. Moreover, browsers do not permit modifying the text size because of bad accessibility reasons.

Check out the following list of the CSS predefined font-size property values:

  • XX-small
  • X-small
  • Small
  • Medium
  • Large
  • X-large
  • XX-large

Now, let’s have a look at the Syntax of providing predefined values to font-size property:

Syntax of providing predefined values to font-size property

font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

Here, we must add a specific value for the “font-size” property.

Example: providing pre-defined values to font-size property

In this example, we will specify different predefined font-size property values for paragraph elements:

<p style="font-size:xx-large">This is XX-Large text.</p><p style="font-size:x-large">This is X-Large text.</p>

<p style="font-size:-large">This is Large text.</p>

<p style="font-size:medium">This is Medium text.</p>

<p style="font-size:small">This is  Small text.</p>

<p style="font-size:x-small">This is X-Small text.</p>

<p style="font-size:xx-small">This is XX-Small text.</p>

Open the HTML file in a browser after adding the specified code. Upon doing so, the text of the paragraphs will have the following format:


In the next section, we will demonstrate the usage of “custom” Font-size property values.

CSS font-size property using custom values

By providing the custom values to the font-size property, you can set the size of a font according to the surrounding elements, and this property also permits a user to change the font size in browsers.

In CSS, the font-size property comprises the following custom values:

CSS font-size property with pixels

In this method, “pixels” are used to set the value of the font-size property, offering full control of the text size control to the user. It is a static value that is totally OS-independent.

Example: CSS font-size property with pixels

Now, we will set the font-size of the paragraph elements according to different pixel values such as “50px”, “40px”, and “30px”:

<p style="font-size: 50px">We assign "50px" to this text.</p><p style="font-size: 40px">We assign "40px" to this text.</p>

<p style="font-size: 30px">We assign "30px" to this text.</p>

Output

As you can see from the given output, the text size of the paragraphs is set according to specified pixel values.

CSS font-size property with em

The “em” values of the CSS font-size property are used to set the size of the text according to the parent font size in browsers. Many developers prefer “em” over “pixels” because it offers a good compatibility level for the browsers.

Note: In a browser, the default text size is set to 16 pixels and one em, which means that 1 em = 16 pixels.

Have a look at the below-given example:

Example: CSS font-size property with em

In this example, we will set the “em” value for the text elements same as the preceding example. To do so, we will divide the number of pixels with “16” and then specify the resultant value as font-size property value of the added elements:

<!DOCTYPE html>

<html>

<head>

    <style>

        h1 {

            font-size: 3.1em;

        }

        h2 {

            font-size: 2.5em;

        }

        p {

            font-size: 1.875em;

        }

    </style>

</head>

<body>

    <h1>This is heading 1</h1>

    <h1>This is heading 2</h2>

    <p>This is a paragraph.</p>

</body>

</html>

The given output signifies that we have successfully applied the font-size property “em” values:

CSS font-size property with percentage values

We can also set the font size with respect to percentage, and in this method, the percentage of font can be increased from 100%.

Example: CSS font-size property with percentage values

Now, we will assign different percentage values to the “font-size” properties of the paragraph elements:

<!DOCTYPE html><html>

<body>

    <p style="font-size:130%">This has 130% font-size text.</p>

    <p style="font-size: 120%">This has 120% font-size text.</p>

    <p style="font-size:90%">This has 90% font-size text.</p>

    <p style="font-size:70%">This has 70% font-size text.</p>

</body>

</html>

Output

CSS responsive font-size property

Using CSS responsive font-size property, you can also set the text size according to the width of the viewport of your browser window. For this purpose, the “vw” unit value is utilized, whereas 1vw = 1% of the viewport width.

Note: If the user does not define the font size of text, then the default size of a text is equal to 16 px or 1em.

Example: CSS responsive font-size property

<!DOCTYPE html><html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

<h1 style="font-size:11vw;">Example Responsive Text</h1>

<p style="font-size:10vw;">Resize the browser window to check the scalability of text.</p>

</body>

</html>

Output

In the above-given example, the text can be resized according to the browser, and it will follow the size of the browser window.

Conclusion

In CSS, the font-size property is utilized for setting the size of a text element, and its value can be “predefined” or “custom”. Multiple units of measurement such as pixels, em, viewport, width, and percentage values are specified as the values of the font-size property. This write-up discussed the CSS font-size property and demonstrated the method to explicitly use the predefined and custom font-size property values for text elements.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.