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:
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
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:-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”:
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:
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:
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
In the above-given example, the text can be resized according to the browser, and it will follow the size of the browser window.
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.