How To Change Text Size In Css

In that location are unlike ways you can draw attending to text on a spider web page. You lot tin brand it orangish, for instance. You can assuming or underline information technology. Y'all can highlight ane phrase in a sentence.

In add-on to these formatting options, y'all can too modify the font size of text to draw the reader'southward heart and establish a visual bureaucracy. You'll notice in this blog post that the title (<h1>)has the largest font size. Next upward are my heading elements (<h2>, <h3>, and <h4>), all larger than the <p> elements beneath them. This way, the company (you) knows where unlike sections begin.

HTML headings aren't the only style to change the font size on your site. Let's say yous desire to shrink or enlarge the default heading sizes, or you want to change the font size of other elements on the page. In that case, you can alter the font size in CSS. Let's walk through the procedure below.

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. At that place are several different values you lot can use to ascertain the font-size holding. Accept a look at the example below, which includes different values and units you can use in CSS.

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

These values offering different approaches to setting the font size on your web page. The one yous choose volition depend on the needs and goals of your site. Permit's have a closer look at these values, weighing the pros and cons of each.

Font-size Holding Values to Decrease and Increase Font Size

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

Absolute-size keyword

                                          
element { font-size: small; }

Absolute-size keywords are based on the default font size. Nearly commonly, the default font size is medium (which translates to xvi pixels or 1em) though it tin can differ by browser and font family unit. Annotation that in HTML the default font size is 16px.

The absolute-size keywords are:

xx-pocket-size
x-small
small
medium
large
x-big
xx-big
xxx-large

Here's how each looks in a browser:

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

Accented-size keywords arrive piece of cake to set text to a specified size and create a font hierarchy for your page. However, they practise not let a user to change the text size in all browsers, which makes it a poor choice for accessible design. To exist more than 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 chemical 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 kid chemical element with a defined relative size of smaller will have a font size of medium. Permit's look at the code of this hypothetical.

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

Notice that I've used the form selector ".relative" to target one H2 rather than using the type selector, which would target both H2s. You tin acquire more about CSS selectors in our explainer.

Relative-size keywords make it easy to ready the size of text relative to surrounding elements. Their advantage over absolute-size keywords is that they permit users to modify 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. Here, we'll focus on the three well-nigh mutual: pixels, em units, and rem units.

Pixels

                                          
element { font-size: 32px; }

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

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

However, the fixed nature of pixels is also a drawback. They're non optimized for all devices — CSS-Tricks constitute that websites on the iPad mini render the same equally websites on the iPad, for example — and they're not an attainable length value. Because users cannot modify the font size in some browsers, there are more inclusive and responsive options you tin can apply.

Ems

                                          
element { font-size: 2em; }

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

Setting font size in em units is platonic for an inclusive design. Since european monetary system are a relative unit of measurement, users tin arrange the text size in all browsers.

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

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

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 pinnacle of the document.

Say I set the font size of the root element to 12px so that any text in the document that isn't modified by CSS will be 12 pixels. But, I also want to change the font size of a <div> element that'due south like to the 1 mentioned in the instance above. Let's look at the code for that beneath.

Notice how the nested <span> element is the aforementioned font size as the other <bridge> chemical element.

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

Per centum

                                          
element { font-size: 110%; }

A percent value sets the font size of an element relative to the parent element'south font size.

Say a <div> element that's set to 36px contains a <p> chemical element and two <bridge> elements. The font-size of the <span> elements are set to 50% and 200% respectively. Then the <bridge> element with the 50% value volition be 18px and the <span> element with the 200% value volition exist 27px. Hither'southward how that code looks in action:

See the Pen font-size: pct 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 yous'd like to set your font size to be responsive for all devices and displays, you tin can employ the viewport width unit of measurement, shortened to vw.

                                          
element { font-size: 10vw; }

The vw unit is another relative unit. It'southward not relative to a parent element or root chemical element only to the width of the viewport, 1% of the viewport to be exact. Pregnant, if the viewport is 100 cms broad, 1vw = 1 cm. If the viewport is 50 cm wide, 1vw = 0.5 cm, and then on.

Say I desire the font size of my paragraph to be 10% of the width of the browser window. Hither'south what the code looks like:

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

And here'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, exist careful that your text doesn't become too large on large screens. Unfortunately, CSS doesn't have max-font-size property, but you tin forbid your font from getting likewise big past using media queries.

You lot merely have to use the media query at a certain screen size breakpoint and force the font size back into a ready pixel value. Say I want to force my font size back to 30px when the viewport exceeds 1000px. Here's what the code looks like:

Come across the Pen font-size: vw with media query by Christina Perricone (@hubspot) on CodePen.

And here's what the text looks like when nosotros resize the viewport:

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

Controlling Font Size

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

Editor'south note: This mail service was originally published in May 2020 and has been updated for comprehensiveness.

New Call-to-action