There are different ways yous can draw attention to text on a spider web folio. You can make it orange, for case. Y'all can bold or underline it. You tin can highlight one phrase in a judgement.

In addition to these formatting options, you can as well change the font size of text to draw the reader's center and establish a visual hierarchy. You'll notice in this blog post that the title (<h1>)has the largest font size. Next up are my heading elements (<h2>, <h3>, and <h4>), all larger than the <p> elements below them. This mode, the visitor (y'all) knows where different sections begin.

HTML headings aren't the only mode to change the font size on your site. Let's say y'all want to shrink or overstate the default heading sizes, or you want to change the font size of other elements on the page. In that case, y'all can change the font size in CSS. Let'due south walk through the process beneath.

Download Now: Free Intro Guide to HTML & CSS

How to Change Font Size in CSS

font-size is the CSS property that controls the size of the font on a webpage. In that location are several different values y'all can utilise to define the font-size holding. Take a look at the example below, which includes different values and units y'all can employ in CSS.

See the Pen font-size: different values past Christina Perricone (@hubspot) on CodePen.

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

Font-size Property Values to Decrease and Increase Font Size

In CSS, font-size tin exist specified with any of the following values. For each property value, I'll give an instance of its syntax and a brief description.

Absolute-size keyword

                                          
element { font-size: small; }

Accented-size keywords are based on the default font size. Most unremarkably, the default font size is medium (which translates to 16 pixels or 1em) though information technology tin can differ by browser and font family. Note that in HTML the default font size is 16px.

The absolute-size keywords are:

  • xx-small
  • x-small
  • modest
  • medium
  • large
  • 10-large
  • xx-big
  • thirty-large

Here'south how each looks in a browser:

See the Pen font-size: absolute size past Christina Perricone (@hubspot) on CodePen.

Absolute-size keywords make it like shooting fish in a barrel to set text to a specified size and create a font hierarchy for your page. Nevertheless, 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'due south 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 chemical element with a defined relative size of smaller will have a font size of medium. Allow's look at the code of this hypothetical.

See the Pen font-size: relative size by Christina Perricone (@hubspot) on CodePen.

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 virtually CSS selectors in our explainer.

Relative-size keywords brand information technology easy to set up the size of text relative to surrounding elements. Their advantage over accented-size keywords is that they allow users to modify the text size in all browsers, which makes it a adept option for accessibility.

Length

There are a few length values that can define the font-size property in CSS. Here, we'll focus on the iii most common: pixels, em units, and rem units.

Pixels
                                          
chemical 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 peak that you desire a browser to render your text (although the results may vary slightly depending on the algorithms the browsers utilise).

See the Pen font-size: px by Christina Perricone (@hubspot) on CodePen.

Yet, the fixed nature of pixels is besides a drawback. They're not optimized for all devices — CSS-Tricks plant that websites on the iPad mini render the same equally websites on the iPad, for case — and they're non an accessible length value. Because users cannot change the font size in some browsers, there are more inclusive and responsive options y'all tin can use.

Ems
                                          
element { font-size: 2em; }

The em unit sets the font size relative to the font size of the parent element. And then, giving text a font-size of 2em will brand this text twice the size of its surrounding text.

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

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

Come across the Pen font-size: em by Christina Perricone (@hubspot) on CodePen.

Rems
                                          
element { font-size: 2rem; }

Rems are a relative unit like ems, simply they don't compound. That's because ems are font-relative units, meaning the font size is relative to the parent chemical element's font size, while rems are root-based. Significant, the font size is relative to the size of the font used by the root element, or <html> element at the height of the certificate.

Say I prepare the font size of the root element to 12px so that any text in the document that isn't modified by CSS volition be 12 pixels. But, I also want to modify the font size of a <div> chemical element that's similar to the one mentioned in the example above. Let'due south look at the code for that beneath.

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

See the Pen font-size: rem by Christina Perricone (@hubspot) on CodePen.

Percentage

                                          
element { font-size: 110%; }

A per centum value sets the font size of an element relative to the parent element's font size.

Say a <div> element that'due south set to 36px contains a <p> chemical 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 l% value will exist 18px and the <span> element with the 200% value volition exist 27px. Here's how that code looks in action:

Come across the Pen font-size: percent by Christina Perricone (@hubspot) on CodePen.

Responsive Font Size in CSS

The property values described above all have 1 thing in common: They are not responsive. If you'd similar to gear up your font size to exist responsive for all devices and displays, you tin use the viewport width unit, shortened to vw.

                                          
element { font-size: 10vw; }

The vw unit is another relative unit. It's non relative to a parent chemical element or root element but to the width of the viewport, 1% of the viewport to exist verbal. Pregnant, if the viewport is 100 cms wide, 1vw = 1 cm. If the viewport is fifty cm wide, 1vw = 0.5 cm, and and then on.

Say I want the font size of my paragraph to be 10% of the width of the browser window. Here's what the lawmaking looks like:

Meet the Pen font-size: vw past Christina Perricone (@hubspot) on CodePen.

And hither'south what the text looks like when we resize the viewport:

a visual demonstration of font size changing as the browser viewport changes

Max Font Size in CSS

When setting your font size in vm units, be conscientious that your text doesn't get besides big on large screens. Unfortunately, CSS doesn't have max-font-size property, but you can prevent your font from getting besides large past using media queries.

Y'all just have to use the media query at a certain screen size breakpoint and force the font size back into a set pixel value. Say I want to force my font size dorsum to 30px when the viewport exceeds 1000px. Here'south what the lawmaking looks like:

See the Pen font-size: vw with media query past Christina Perricone (@hubspot) on CodePen.

And hither'southward what the text looks like when we resize the viewport:

a visual demonstration of font size changing as the browser viewport changes, then shrinks at the 1000px breakpoint

Decision-making Font Size

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

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.

New Call-to-action

css introduction

Originally published May 28, 2021 7:00:00 AM, updated August 23 2021