There are different ways you can draw attention to text on a web page. You can make it neon yellow, for example. You can bold or underline it. You can highlight one phrase in a sentence.

In addition to these formatting options, you can also change the font size of text to draw the reader’s eye and establish message hierarchy. You’ll notice in this blog post that the title has the largest font size. Next up are my h2s, h3s, h4s, all of which are larger than the <p> elements they contain so the visitor starts at the top of the different sections.

Heading levels aren’t your only option for changing font size on your site. Let’s say you want to shrink or enlarge the standard heading levels, or you want to change the font size of other elements on the page. In that case, you can use CSS. Let’s walk through the process below.

Free Intro Guide to HTML & CSS [Download Now]

Note: I’ll be using the W3Schools Online Code Editor to create the examples below. You can click any of the Source links to see the full code snippet behind the example and try your own.

How to Change Font Size in CSS

Font-size is the CSS property that controls the size of the font on a webpage. There are several different values you can use to define the font-size property. Take a look at the example below, which includes different values and units you can use in CSS.

Code demo using all font size property valyes

Source

These values offer different approaches to setting the font size on your web page. The one you choose will depend on the needs and goals of your site. Let’s take a closer look at these values, weighing the pros and cons of each below.

Font-size Property Values

In CSS, the font-size property can be specified with any of the following values. For each property value, I’ll provide an example of its syntax as well as a brief description.

Absolute-size keyword

 

 

   element {

  font-size: small;

}

Absolute-size keywords are based on the default font size. Most commonly, the default font size is medium (which translates to 16 pixels or 1em) though it can differ by browser and font family. Note that in the latest version of Bootstrap CSS, the default font-size is 16px.

Absolute-size keywords are:

  • xx-small
  • x-small
  • small,
  • medium
  • large
  • x-large
  • xx-large
  • xxx-large

Absolute-size keywords make it easy to set text to a specified size and create a font hierarchy for your page. However, they do not allow a user to change the text size in all browsers, which makes it a poor choice for accessible design. To be more inclusive of all users, try relative-size keywords.

Relative-size keyword

 

 

   element {

  font-size: larger;

}

Relative-size keywords set the font larger or smaller relative to the parent element's font size. These relative sizes are roughly based on the ratio of the absolute-size keywords described above.

So if the parent element has a font size of large, a child element with a defined relative size of smaller will have a font size of medium. Let’s look at the code of this hypothetical.

Here’s the HTML:

 

 

   <div style="font size: large">

<h2>Parent Element</h2>

<h2 class="relative">Child Element</h2>

</div>

 

Here’s the CSS:

 

 

   .relative {

  font-size: smaller;

}

Notice that I've used the class selector ".relative" to target one H2 rather than using the type selector, which would target both H2s. You can learn more about CSS selectors in What are CSS selectors & How Do They Work?

Here’s how the code would render on the front-end of your site:

Font size CSS set by relative keyword value

Source

Relative-size keywords make it easy to set the size of text relative to surrounding elements. Their advantage over absolute-size keywords is that they allow users to change the text size in all browsers, which makes it a good choice for accessibility.

<Length>

There are a few length values that can define the font-size property in CSS. We will focus on the three most common: pixels, em units, and rem units.

Pixels

 

 

   element {

  font-size: 32px;

}

Using pixels (px) as your length value will enable you to set your font size with precision, regardless of the browser a visitor is using. You can specify exactly the number of pixels in height that you want a browser to render your text and it will (although the results may vary slightly depending on the algorithms the browsers use).

However, the fixed nature of pixels is also a drawback. They’re not optimized for all devices — CSS-Tricks found that websites on the iPad mini render the same as websites on the iPad, for example — and they’re not an accessible length value. Because users cannot change the font size in some browsers, there are more inclusive and responsive options you can use.

Ems

 

 

   element {

  font-size: 2em;

}

Setting your font size in em units is ideal for an inclusive design. Since ems are a relative unit, users can adjust the text size in all browsers.

The only drawback is that ems compound. So say a <span> element with a font size of 2em contains another <span> element. That nested <span> element would be twice the size, or 4em. See the code below.

Here’s the HTML:

 

 

   <div>

<span>I am <span>larger</span> than the rest of the sentence.</span>

</div>

 

Here’s the CSS:

 

 

   span {

font-size: 2em;

}

Here’s how it would render on the front end of your site:

Font size CSS set in responsive unit em

Source

Rems

 

 

   element {

font-size: 2rem;

}

Rems are a relative unit like ems — but they don’t compound. That’s because ems are font-relative units, meaning the font size is relative to the parent element's font size, while rems are root-based. Meaning, the font size is relative to the size of the font used by the root element, or <html> element at the top of the document.

Say I set the font size of the root element to 16px so that any text in the document that isn’t modified by CSS will be 16 px. But I want to change the font size of a <div> element that’s similar to the one mentioned in the example above. Let’s look at the code for that below.

Here’s the HTML:

 

 

   <p>The font-size of this document is 16px.</p>

<div>

<span>I am <span> not larger</span> than the rest of the sentence. But I am three times larger than the root element.</span>

</div>

 

Here’s the CSS:

 

 

   html {

font-size:16px;

}

span {

font-size:3rem;

}

Here’s how it would render on the front end of your site:

Font size CSS set in the responsive REM

Source

Notice how the nested <span> element is the same font size as the other <span> element.

<Percentage>

 

 

   element {

font-size: 110%;

}

A <percentage> value sets the font size of an element relative to the parent element's font size.

So say a <div> element that’s set to 36px contains a paragraph element and two span elements. The font-size of the span elements are set to 50% and 200% respectively. Then the <span> element with the 50% value will be 18px and the <span> element with the 200% value will be 27px. Let’s look at the code of this hypothetical.

Here’s the HTML:

 

 

   <div class="parent">

<p>Full-size text (36px)</p>

<p><span class="smaller">50% (18px)</span></p>

<p><span class="larger">200% (72px)</span></p>

</div>

 

Here’s the CSS:

 

 

   .parent {

font-size:36px;

}

.smaller {

font-size: 50%;

}

.larger {

font-size: 200%;

}

Here’s how the code would render on the front-end of your site:

Font size CSS set by percentage value in pixels

Source

Responsive Font Size in CSS

The property values described above all share one thing in common: they are not responsive. If you’d like to set your font size to be responsive for all devices and displays, you can use the viewport width unit, shortened to vw.

Vw is another relative unit. It’s not relative to a parent element or root element but to the width of the viewport (1% to be exact). Meaning, if the viewport is 100 cms wide, 1vw = 1 cm. If the viewport is 50 cm wide, 1vw = 0.5 cm and so on.

Say I want the font size of my paragraph to be 10% of the width of the browser window.

Here’s the HTML:

 

 

   <p>See how the font size changes as the width of the browser window does?</p>

 

Here’s the CSS:

 

 

   p {

font-size: 10vw;

}

Here’s how the code would render on the front-end of your site:

Font size CSS set in the responsive unit viewport width

Source

Max Font Size in CSS

When setting your font size in vms, you have to be careful that your text doesn’t get too big on large screens. Unfortunately, CSS doesn’t have max-font-size but you can prevent your font from getting too big by using media queries.

You just have to use the media query at a certain screen size breakpoint and force the font size back into a set pixel value. So say I want to force my font size back to 30px when the viewport exceeds 1000px.

Here’s the HTML:

 

 

   <div>See how this text will stretch and stretch and stretch — until the browser hits 1000px. Then the text will shrink again.</div>

 

Here’s the CSS:

 

 

   body {

font-size: 10vw;

}

@media screen and (min-width: 1000px) {

body {

font-size: 30px;

}

 

Here’s the result:

Setting max font size in CSS using media query and breakpoint

Source

Controlling Font Size

Changing font size in CSS is complex when compared to the ease of changing font size in Google Docs or Microsoft word — but it can be be mastered with some practice in HTML and CSS.

New Call-to-action

 css introduction

Originally published May 18, 2020 7:00:00 AM, updated May 18 2020

Topics:

Bootstrap CSS