The CSS font-size property sets the font size of any text element on your page or website. The font-size property can be applied to any class, ID, or element that includes text content. The property accepts values in px, em, rem, vw, vh, and using keywords.
Most developers use a combination of different font sizes to style a web page. For instance, a web developer may use a large font for headings, and a smaller font for body text and others. So many ask: how do you change the font size in CSS or HTML?
The CSS font-size property allows developers to set the font size in a paragraph or line of text on a web page.
This tutorial discusses, with reference to examples, how to use the font-size property. Going through this guide allows you to be an expert at changing text sizes.
CSS font-Size
Appropriate font styling is an important part of web design. Unstyled text causes reading difficulty among visitors, which almost certainly results in an unpleasant website experience.
There are many CSS styles for fonts that can be used to customize how text appears, like font-weight, font-family, text-decoration, and color. Another important property is font-size, which controls the size of a font in a block of text.
The syntax for the CSS font-size property is:
font-size: sizeValue;
sizeValue is the font size you want a block of text to use. There are a number of ways to specify the font size used by a block of text. The methods we are going to discuss in this article are:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
- pixels
- em
- root em
- viewport units
- keywords
Let us explore an example of how to use each font size approach on a web page.
Set Font Size Using Pixels
One of the most common ways to set the size of a font is to use pixels.
Pixels are a good unit of measurement because they allow you to be precise. The pixel unit is largely unaffected by operating systems or web browsers. A pixel on one screen is a pixel on another. The pixel value you specify will roughly appear the same way across different browsers.
However, using pixels to set the size of a font in a block of text does have one limitation: accessibility. Font sizes defined using pixels are not accessible because some browsers do not allow users to customize the font size. Visually impaired users, for example, may struggle to use a site that uses pixels to define font sizes.
Let’s say we’re creating a website with a font size of 28px for all <h1> elements and 12px for all <p> elements. We could use the following code to accomplish this task:
h1 { font-size: 28px; }
p ( font-size: 12px; }
In our code, we have used a CSS selector set the font size of all <h1> elements to 28px and all <p> elements to 12px. The following snippet shows how these elements appear with our new font sizes:
<style>
h1 { font-size: 28px; }
p { font-size: 12px; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
Set Font Size Using ems
Another common way of setting the size of a font in CSS is to use em sizes. The em unit of measurement refers to the font size of a parent element. If you set a font’s size to 2em, the font size will be twice that of the parent element.
An Example of CSS Font Sizing with ems
For example, suppose you have a paragraph of text stored in a box. The font size of the box is 20px. If you specified the font size of the paragraph of text to be 1em, the font size of the paragraph would be 20px. This is the same as the parent element’s font size.
If you have not set a font size for a parent element, the browser will use the default value specified for that browser. This is usually 16px. As a result, if you have not specified any font sizes, 1em is by default 16px, 2em is by default 32px.
Suppose the font size of our web page is 16px. We want all paragraphs of text to appear using that font size, which means we should use the value 1em. Also, we want all of our headings to appear with a font size of 24px, which is equal to 1.5em.
We could use the following code to accomplish this task:
p { font-size: 1em; }
h1 { font-size: 1.5em; }
In our code, the size of all paragraphs will be 16px (1em = 16px by default), and all <h1> elements will be 24px (1.5em = 24px).
Here is how our text would appear on the web page:
<style>
p { font-size: 1em; }
h1 { font-size: 1.5em; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
In the above example, you can see the new styles for both our <h1> and <p> elements.
You should note that if our <h1> appeared within a box which had another font size, the size of our <h1> would change. This is because em values inherit the font size of their parents.
Set Font Size Using Root em
Short for root em, rem is a new unit of measurement introduced in CSS3 that can be used to set font size. Values using rem are relative to the root <html> element, instead of the parent element.
rem values are useful because they allow you to specify a value relative to the entire document. This way, the size of your text won’t be affected if the parent element has a different em value.
Suppose we have a web page with the default font size of 16px. Like in our previous example, we want all <h1>s to appear in 24px and all paragraphs to appear in 16px. We could set these font sizes using the following code:
<style>
p { font-size: 1rem; }
h1 { font-size: 1.5rem; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
Our code is almost the same as in our previous example. The only difference is that the unit of measurement we use is rem instead of em. In this example, our font sizes will still be 24px and 16px for the top-level headings and paragraphs, respectively. That’s because the default font size of our web page is 16px.
Set Font Size Using Keywords
There are two types of keywords you can use to set the size of a font in CSS.
Absolute keywords are used to set a font size that remains the same, irrespective of changes to the web page. The keywords you can use to set an absolute font size are as follows:
xx-small(9px)x-small(10px)small(13px)medium(16px)large(18px)x-large(24px)xx-large(32px)
The values specified in parentheses are based on a browser whose default font size is 16px.
Relative keywords, on the other hand, set a font size that will change depending on the font sizing elsewhere on the web page. The relative keywords you can use are: smaller and larger. These keywords are useful because they allow you to change the size of your fonts as other font sizes on the page change.
Suppose we wanted to set the size of all <h2> elements on a page to 24px (x-large) and all <h3> elements to 18px (large). We could do so using this code:
<style>
h2 { font-size: x-large; }
h3 { font-size: large; }
</style>
<html>
<h2>This is a heading.</h2>
<p>This is some paragraph text.</p>
<h3>This is a lower-level heading.</h3>
<p>This is some more paragraph text.</p>
</html>
button in the code editor above to see the output of our HTML/CSS code.
The font sizes for our <h2> and <h3> tags are 24px and 18px, respectively. However, we did not specify these sizes using pixels. Instead, we used the default font size keywords offered by the browser.
Set Font Size Using Viewport Units
Viewport units are calculated as a percentage of the browser’s viewport size. The two viewport units supported by CSS are: view height (vh) and view width (vw).
Because viewport units are a percentage of the browser’s viewport size, 1vh is equal to 1% of the viewport height, for example. So, if you have a viewport 1000px wide, 1vh equals 10px.
Using viewport units is useful because the size of your fonts will change as you resize the browser window. This, in turn, allows you to deliver a more accessible user experience adaptive to different browser and device sizes.
Suppose we wanted to create a site whose headers are 4% of the viewport’s width and whose paragraphs are 1% of the viewport’s width. We could do so using this code:
<style>
p { font-size: 1vw; }
h1 { font-size: 4vw; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
button in the code editor above to see the output of our HTML/CSS code.
If you resize the browser, the size of these headings will change.
Conclusion
The font-size property is used in CSS (and therefore HTML) to change the size of fonts. It accepts a number of units of measurement in which font sizes can be displayed, including pixels, em, rem, keywords, and viewport units. It can be applied to CSS classes and IDs, as well as to elements themselves.
This tutorial walked through the basics of CSS font size. Now you are ready to start using the font-size attribute like an expert.