Which Css Property Configures The Size Of Text?

The CSS font-size property sets the font size of any text element on your folio or website. The font-size property tin be applied to any course, ID, or element that includes text content. The property accepts values in px, em, rem, vw, vh, and using keywords.

Most developers apply a combination of dissimilar font sizes to style a web page. For instance, a web programmer may utilize a large font for headings, and a smaller font for body text and others. And so many enquire: how practice 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.

Find Your Bootcamp Friction match

Career Karma matches you with top tech bootcamps

Access exclusive scholarships and prep courses

Select your interest
First name

Last proper name

Electronic mail

Phone number

By continuing y'all concur to our Terms of Service and Privacy Policy , and y'all consent to receive offers and opportunities from Career Karma by telephone, text bulletin, and email.

This tutorial discusses, with reference to examples, how to use the font-size property. Going through this guide allows you lot to be an expert at changing text sizes.

CSS `font-Size`

Advisable font styling is an important office of web design. Unstyled text causes reading difficulty amidst visitors, which almost certainly results in an unpleasant website experience.

At that place are many CSS styles for fonts that can be used to customize how text appears, similar 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 holding is:

sizeValue is the font size you lot want a block of text to use. There are a number of ways to specify the font size used past a block of text. The methods we are going to discuss in this commodity are:

"Career Karma entered my life when I needed it virtually and quickly helped me match with a bootcamp. Two months after graduating, I found my dream chore that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

pixels
em
root em
viewport units
keywords

Let us explore an example of how to use each font size approach on a spider web folio.

Ready Font Size Using Pixels

One of the most mutual ways to set the size of a font is to utilise pixels.

Pixels are a adept 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 prepare the size of a font in a block of text does take one limitation: accessibility. Font sizes divers using pixels are not accessible because some browsers practice not let users to customize the font size. Visually impaired users, for case, may struggle to use a site that uses pixels to define font sizes.

Let'due south 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 take used a CSS selector set up 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>

Click the button in acme-correct corner of the window to a higher place to run the code.

Set Font Size Using ems

Another mutual way of setting the size of a font in CSS is to apply em sizes. The em unit refers to the font size of a parent chemical element. If you ready 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 fix 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 apply the value 1em . Also, we want all of our headings to appear with a font size of 24px , which is equal to 1.5em .

Nosotros could apply the following lawmaking to reach this task:

p { font-size: 1em; } h1 { font-size: i.5em; }

In our lawmaking, the size of all paragraphs will be 16px ( 1em = 16px past default), and all <h1> elements will be 24px ( one.5em = 24px ).

Hither is how our text would appear on the spider web page:

<way>   p { font-size: 1em; }   h1 { font-size: one.5em; } </fashion>  <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.

Y'all should notation that if our <h1> appeared within a box which had some other font size, the size of our <h1> would modify. This is because em values inherit the font size of their parents.

Ready Font Size Using Root em

Short for root em, rem is a new unit of measurement introduced in CSS3 that can be used to gear up 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 afflicted if the parent element has a dissimilar em value.

Suppose we accept a web page with the default font size of 16px . Like in our previous example, nosotros want all <h1> due south to appear in 24px and all paragraphs to appear in 16px . Nosotros could set these font sizes using the following lawmaking:

<fashion>   p { font-size: 1rem; }   h1 { font-size: 1.5rem; } </mode>  <html>   <h1>This is a heading.</h1>   <p>This is a paragraph of text.</p> </html>

Our lawmaking is near the aforementioned equally in our previous example. The just difference is that the unit of measurement nosotros utilise is rem instead of em . In this instance, 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 ii types of keywords y'all can use to set the size of a font in CSS.

Absolute keywords are used to prepare a font size that remains the same, irrespective of changes to the spider web page. The keywords you can utilize to set an absolute font size are as follows:

20-pocket-size (9px)
ten-small (10px)
small (13px)
medium (16px)
large (18px)
10-large (24px)
xx-big (32px)

The values specified in parentheses are based on a browser whose default font size is 16px .

Relative keywords, on the other manus, prepare a font size that will modify depending on the font sizing elsewhere on the web folio. The relative keywords you can use are: smaller and larger. These keywords are useful because they permit you to change the size of your fonts as other font sizes on the page modify.

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; } </fashion>  <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>

Click the 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 past the browser.

Ready Font Size Using Viewport Units

Viewport units are calculated as a percentage of the browser'southward 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 case. So, if yous have a viewport 1000px wide, 1vh equals 10px.

Using viewport units is useful because the size of your fonts will modify as you lot resize the browser window. This, in plow, allows you to deliver a more than accessible user experience adaptive to unlike 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'southward width. We could do and then using this code:

<mode>   p { font-size: 1vw; }   h1 { font-size: 4vw; } </mode>  <html>   <h1>This is a heading.</h1>   <p>This is a paragraph of text.</p> </html>

Click the push 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 holding 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 exist 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.