How To Change The Size Of Text In Html

To completely customize the look of your website, you can't forget about typography — how you adjust and style text. Depending on your design, business niche, and audition, you may want to change the typeface, size, or colour of your font.

For instance, if you favor a dark greyness over black in your color scheme, so you'll want to change the default font colour of your text. If you're in media, so y'all may opt for a sans serif font, which is considered the easiest typography to read. But if you're in the artistic field, so you lot may opt for a decorative typeface like Morris Troy. These are just a few reasons you might want to manner the font on your website.

Download Now: Free Intro Guide to HTML & CSS

Permit'due south wait at how yous tin change font on your site with just a bit of code. We'll cover:

how to change font type in HTML
how to change font size in HTML
- how to change font size within the same paragraph
how to modify font color in HTML
how to alter font in a div in HTML

How to Change Font Blazon in HTML

To change font blazon in HTML, apply the CSS font-family property. Set it to the value you want and place it within a style aspect. And so add this style attribute to an HTML element, similar a paragraph, heading, push button, or span tag.

This is how you use inline CSS. Inline CSS means your HTML and CSS will be placed together in the torso section of your HTML doc. So, technically, you'll be irresolute font "in HTML."

You used to be able to simply use the font tag to modify the style of text in HTML. So say you wanted to modify your font to Arial, size 20px, and a prissy orangish color. You would have written the following line of HTML:

                                          
<font confront="Arial" size="20px" color="#FF7A59">Your text here.</font>

However, this font tag was deprecated back in 1998 and so it doesn't piece of work with the latest version of HTML, HTML5. It has been replaced by a much more effective way to alter the appearance of text: namely, CSS. CSS text formatting is a more than lightweight and flexible alternative to the HTML font tag — and information technology'due south not difficult to learn.

Let'due south rewrite the example higher up using CSS to change the font type of a paragraph. It's important to note that I'k using CodePen, which uses Times New Roman as its default typeface. I'm going to add the style aspect to the offset paragraph element, which means but this paragraph volition exist styled. The other paragraph and headings on the folio volition remain as Times New Roman.

Hither's the HTML with inline CSS:

                                                                   <h2>How to Change Font Blazon in HTML [Inline CSS]</h2>
                      <p style="font-family: Arial">This is dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>Since I'm using the CodePen Editor, the default typeface is Times New Roman. That ways changing the typeface of a paragraph will require me to use a style attribute that contains the CSS font-family unit belongings gear up to "Arial." The other elements on the page are not targeted past inline CSS and therefore remain Times New Roman.
                      </p>

Here's the result:

Meet the Pen oNBMjeB past Christina Perricone (@hubspot) on CodePen.

While inline CSS works perfectly for irresolute a single chemical element on the page, other styles of CSS are recommended over inline CSS. For example, internal CSS can be placed in the caput department of the HTML doc to way multiple elements on the page.

For instance, allow's say I desire to change the font of every paragraph element to Arial. Then I could utilize a CSS selector to target all paragraphs and place it inside the head section of the page.

Here's the CSS:

                                                                   p {
                       font-family unit: Arial;
                       }

Here'due south the HTML:

                                                                   <h2>How to Change Font Type in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>Since I'm using the CodePen editor, the default typeface is Times New Roman. That means irresolute the typeface of all paragraphs on the page will require me to use a CSS type selector and set the CSS font-family belongings  to "Arial." The headings  on the page will remain Times New Roman.
                      </p>

Here'south the outcome:

See the Pen GRrBpyQ past Christina Perricone (@hubspot) on CodePen.

Now that we understand how to change font type using inline and internal CSS, permit's plough our attention to font size.

How to Alter Font Size in HTML

To change font size in HTML, use the CSS font-size property. Fix it to the value y'all desire and identify information technology inside a style aspect. Then add together this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

To continue to rewrite the get-go instance that used the obsolete font tag, permit's change the font size of a paragraph to 20px with CSS. For this instance, I'1000 still going to employ CodePen, but I'm going to load Bootstrap CSS on the page. That means, in addition to the default font type existence Helvetica, the default font size of paragraphs will be 16px, heading 2s will be 32px, and heading 3s volition be 28px.

Same as above, I'm going to showtime by adding the style attribute to the start paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will remain their default sizes.

Here's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size in HTML [Inline CSS]</h2>
                      <p fashion="font-size: 20px">This is dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more than dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'yard using the CodePen Editor but loading BootstrapCDN, then the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The default typeface is also Helvetica. That means irresolute the size of the first paragraph will require me to use a mode attribute that contains the CSS font-size property prepare to "20px." The other elements on the page are not targeted by inline CSS and therefore remain their default sizes.
                      </p>

Hither'southward the outcome:

See the Pen How to Alter Font Size in HTML [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

Now let's say I desire to change the font of every paragraph chemical element to 20px. Then I could employ a CSS selector to target all paragraphs and identify it inside the head section of the folio.

Hither'south the CSS:

                                                                   p {
                       font-size: 20px;
                       }

Here's the HTML:

                                                                   <h2>How to Modify Font Size in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more than dummy text. This is more than dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px.  The default typeface is also Arial. That means changing the size of all paragraphs on the page will require me to apply a CSS type selector and gear up the CSS font-size property  to "20px." The headings  on the page will their default sizes.
                      </p>

Here'due south the result:

See the Pen How to Change Font Size in HTML [Internal CSS] past Christina Perricone (@hubspot) on CodePen.

Change Font Size Inside the Same Paragraph

Another reward of CSS over the deprecated font tag is that it provides you lot more granular command over your code and then you lot can do things like change the font size of text inside the same paragraph.

If I'd like to keep the paragraph at its default font size, then I'd simply wrap the text that I wanted to change the size of in <span> tags. Then I'd add together a way aspect with the font-size property ready to the value I want.

Hither's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size Within the Same Paragraph [Inline CSS]</h2>
                      <p>This is dummy text. This is more dummy text. <span  manner="font-size: 22px">This is larger text.</span> This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                                            <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, and so the default font-size of paragraphs are 16px. To modify the font size of text within a paragraph, I will wrap the text in span tags. So, I will add a style aspect that contains the CSS font-size property ready to a value other than 16px. In this example, it's set to 22px.
                      </p>

Here's the result:

See the Pen How to Change Font Size Within the Aforementioned Paragraph [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

If I'd similar to change the font size of the paragraph and text within that paragraph to two different sizes, then I'd be better off using internal CSS. I'd notwithstanding wrap the text that I wanted to change the size of in <span> tags. And then I'd add an ID attribute to both the paragraph and span element. Using the respective ID selectors, I'd set the paragraph and span chemical element to two different sizes.

Here's the CSS:

                                                                   #larger {
                        font-size: 18px;
                      }
                      #smaller {
                        font-size: 14px;
                      }

Here's the HTML:

                                                                   <h2>How to Change Font Size Within the Aforementioned Paragraph [Internal CSS]</h2>
                      <p id="larger">This is dummy text. This is more dummy text. <bridge id="smaller">This is smaller text.</span>  This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text.
                      </p>
                                            <h3>The Caption</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of a paragraph and text within a paragraph, I will wrap the text in span tags and add ID attributes to both the paragraph and span element. And then, I volition use ID selectors and set up them to differnet font sizes in the head department of the page.
                      </p>

Here's the result:

Meet the Pen ow to Change Font Size Within the Aforementioned Paragraph [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

For a more in-depth look at the backdrop and values you tin use to alter the size of your text, read How to Alter Font Size in CSS.

How to Modify Font Colour in HTML

To change font colour in HTML, use the CSS colour property. Set it to the value yous want and place information technology inside a style attribute. So add this style attribute to an HTML chemical element like a paragraph, heading, button, or span tag.

Using the same instance as above, allow'southward now change the font color of a paragraph to Lorax orange (hex color code #FF7A59) with CSS. For this case, I'm going to utilize the CodePen Editor and not load Bootstrap CSS. Simply if yous do desire to use that framework, the default font colour is the same (ie. black) so is the process.

Same every bit in a higher place, I'm going to start by adding the fashion attribute to the commencement paragraph chemical element, which means merely this paragraph volition be styled. The other paragraph and headings on the page will remain the default colour (black).

Here's the HTML with inline CSS:

                                                                   <h2>How to Change Font Color in HTML [Inline CSS]</h2>
                      <p style="colour: #FF7A59">This is dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'thou using the CodePen Editor, the default font color is black. (This is usually the case no matter what tool or framework you're using to build your web projects.) That means changing the color of a paragraph volition require me to utilise a style aspect that contains the CSS color property set to the hex color lawmaking #FF7A59. The other elements on the page are non targeted by inline CSS and therefore remain black.
                      </p>

Here'south the result:

See the Pen How to Change Font Color in HTML [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

Now let's say I desire to alter the colour of every paragraph element to maroon. Then I could use a CSS selector to target all paragraphs and place it inside the head department of the folio.

Here's the CSS:

                                                                   p {
                       color: #FF7A59;
                       }

Here's the HTML:

                                                                   <h2>How to Change Font Color in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more than dummy text. This is more than dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'thousand using the CodePen Editor, the default font color is blackness. That means changing the colour of all paragraphs on the page volition require me to use a CSS blazon selector and gear up the CSS colour property to the hex color code for orange (#FF7A59). The headings  on the page will remain blackness.
                      </p>

Here's the consequence:

See the Pen How to Alter Font Color in HTML [Internal CSS] past Christina Perricone (@hubspot) on CodePen.

To learn how to modify the background colour of your text, read How to Change Text and Background Color in CSS.

How to Change Font in a Div in HTML

Changing font in a div is no different than changing font in a paragraph or span chemical element.

A "div" in HTML is simply an element that can carve up your web folio into sections so you can target them with unique CSS properties.

If you'd like to modify the font type, size, and color of text on a page, and then you lot could wrap it in div tags and use a CSS selector to style that chemical element. Let'due south expect at an case:

Here'southward the CSS:

                                                                   #example {
                        font-family: Arial;
                        font-size: 20px;
                        color: #FF7A59;
                      }

Here's the HTML:

                                                                   <h2>How to Alter Font in a Div in HTML [Internal CSS]</h2>
                                            <div id="example">This is dummy text. This is more dummy text. This is smaller text.This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text.</div>
                                            <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor so the default font-type, size, and colour is Times New Roman, 16px, and black. To change all these properties of a section of text, I could wrap the text in a div and add an ID aspect to the chemical element. Then, I tin employ an ID selector and set the font-family, font-size, and font-color backdrop in the head section of the page.
                      </p>

Here's the result:

See the Pen How to Modify Font in a Div in HTML [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

Changing Your Font with HTML & CSS

With some basic web blueprint knowledge, yous tin can change the type, size, and colour of your font. This can enable you to customize every detail on your site and make your content more readable. If you lot're edifice with the Bootstrap framework, check out more ways you lot can override the default settings in Bootstrap CSS to create a truly unique website.

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

New Call-to-action