How To Change Text Size In Html

To completely customize the wait of your website, you tin't forget about typography — how you suit and style text. Depending on your design, business concern niche, and audience, yous may desire to alter the typeface, size, or color of your font.

For example, if you favor a nighttime gray over black in your color scheme, then you'll want to change the default font color of your text. If you're in media, and so yous may opt for a sans serif font, which is considered the easiest typography to read. But if you're in the creative field, so y'all may opt for a decorative typeface like Morris Troy. These are merely a few reasons you might desire to style the font on your website.

Download Now: Free Intro Guide to HTML & CSS

Allow'southward look at how you can change font on your site with just a chip of code. Nosotros'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 change font colour in HTML
how to modify font in a div in HTML

How to Change Font Type in HTML

To modify font type in HTML, use the CSS font-family property. Ready information technology to the value you lot desire and place information technology inside a way attribute. Then add together this style attribute to an HTML element, similar a paragraph, heading, button, or span tag.

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

You lot used to be able to simply use the font tag to change the style of text in HTML. And so say you wanted to change your font to Arial, size 20px, and a nice orange color. You lot would accept written the following line of HTML:

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

However, this font tag was deprecated back in 1998 then it doesn't work with the latest version of HTML, HTML5. It has been replaced past a much more effective way to modify the appearance of text: namely, CSS. CSS text formatting is a more lightweight and flexible alternative to the HTML font tag — and it's not difficult to learn.

Let's rewrite the example above using CSS to change the font type of a paragraph. It'south important to note that I'm using CodePen, which uses Times New Roman every bit its default typeface. I'one thousand going to add together the mode attribute to the first paragraph chemical element, which means only this paragraph will be styled. The other paragraph and headings on the folio will remain as Times New Roman.

Here's the HTML with inline CSS:

                                                                   <h2>How to Alter Font Type in HTML [Inline CSS]</h2>
                      <p style="font-family: Arial">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 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.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'm using the CodePen Editor, the default typeface is Times New Roman. That means changing the typeface of a paragraph volition require me to use a style aspect that contains the CSS font-family unit property set 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:

See the Pen oNBMjeB by Christina Perricone (@hubspot) on CodePen.

While inline CSS works perfectly for changing a unmarried chemical element on the page, other styles of CSS are recommended over inline CSS. For example, internal CSS can exist placed in the head section of the HTML doc to way multiple elements on the page.

For case, permit's say I desire to change the font of every paragraph element to Arial. And then I could use a CSS selector to target all paragraphs and place it inside the head section of the page.

Here's the CSS:

                                                                   p {
                       font-family: Arial;
                       }

Here's 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 than 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 than dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'm using the CodePen editor, the default typeface is Times New Roman. That ways changing 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 result:

Meet the Pen GRrBpyQ by Christina Perricone (@hubspot) on CodePen.

Now that nosotros understand how to change font type using inline and internal CSS, allow'due south plow our attention to font size.

How to Alter Font Size in HTML

To alter font size in HTML, use the CSS font-size property. Prepare it to the value you want and identify information technology within a style attribute. Then add this manner attribute to an HTML element, like a paragraph, heading, button, or bridge tag.

To continue to rewrite the first example that used the obsolete font tag, allow'south change the font size of a paragraph to 20px with CSS. For this example, I'm still going to utilize CodePen, just I'g going to load Bootstrap CSS on the page. That means, in add-on to the default font type being Helvetica, the default font size of paragraphs will be 16px, heading 2s will be 32px, and heading 3s will exist 28px.

Same every bit higher up, I'one thousand going to start by adding the manner attribute to the first paragraph chemical element, which means only this paragraph will be styled. The other paragraph and headings on the page will remain their default sizes.

Hither's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size in HTML [Inline CSS]</h2>
                      <p style="font-size: 20px">This is 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 than dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, and then the default font-size of the trunk 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 volition crave me to use a way attribute that contains the CSS font-size property set to "20px." The other elements on the folio are non targeted by inline CSS and therefore remain their default sizes.
                      </p>

Here's the result:

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

Now permit'south say I desire to change the font of every paragraph element to 20px. Then I could use a CSS selector to target all paragraphs and place it inside the caput department of the folio.

Here's the CSS:

                                                                   p {
                       font-size: 20px;
                       }

Here'southward the HTML:

                                                                   <h2>How to Change Font Size 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 than dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, and then the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px.  The default typeface is too Arial. That means changing the size of all paragraphs on the page volition require me to use a CSS type selector and set the CSS font-size holding  to "20px." The headings  on the page will their default sizes.
                      </p>

Here's the issue:

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

Change Font Size Within the Same Paragraph

Another advantage of CSS over the deprecated font tag is that it provides you more granular control over your code then you can exercise things like change the font size of text within the same paragraph.

If I'd like to keep the paragraph at its default font size, and so I'd merely wrap the text that I wanted to change the size of in <span> tags. And so I'd add a way attribute with the font-size holding set to the value I want.

Here's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size Inside the Same Paragraph [Inline CSS]</h2>
                      <p>This is dummy text. This is more dummy text. <span  fashion="font-size: 22px">This is larger text.</span> 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>I'm using the CodePen Editor only loading BootstrapCDN, then the default font-size of paragraphs are 16px. To alter the font size of text within a paragraph, I will wrap the text in span tags. So, I will add a mode attribute that contains the CSS font-size property set to a value other than 16px. In this instance, information technology's set to 22px.
                      </p>

Here's the result:

Encounter the Pen How to Alter Font Size Within the Same Paragraph [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

If I'd like to modify the font size of the paragraph and text within that paragraph to two unlike sizes, then I'd be better off using internal CSS. I'd still wrap the text that I wanted to modify the size of in <span> tags. Then I'd add an ID attribute to both the paragraph and span element. Using the respective ID selectors, I'd fix the paragraph and span element to two unlike sizes.

Here's the CSS:

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

Hither'south the HTML:

                                                                   <h2>How to Change Font Size Inside the Same Paragraph [Internal CSS]</h2>
                      <p id="larger">This is dummy text. This is more dummy text. <span 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 dummy text. This is more dummy text.
                      </p>
                                            <h3>The Explanation</h3>
                      <p>I'yard using the CodePen Editor merely loading BootstrapCDN, and so the default font-size of paragraphs are 16px. To change the font size of a paragraph and text within a paragraph, I volition wrap the text in span tags and add together ID attributes to both the paragraph and span element. Then, I volition use ID selectors and prepare them to differnet font sizes in the head department of the page.
                      </p>

Here'due south the result:

Encounter the Pen ow to Change Font Size Inside the Same Paragraph [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

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

How to Change Font Color in HTML

To modify font color in HTML, utilize the CSS colour property. Set it to the value you desire and identify it inside a style aspect. And so add this style attribute to an HTML element like a paragraph, heading, push button, or bridge tag.

Using the same example every bit above, let'south at present change the font color of a paragraph to Lorax orange (hex color code #FF7A59) with CSS. For this example, I'one thousand going to employ the CodePen Editor and not load Bootstrap CSS. But if you exercise want to use that framework, the default font color is the aforementioned (ie. black) so is the procedure.

Same equally to a higher place, I'one thousand going to offset by calculation the style aspect to the beginning paragraph element, which ways merely this paragraph volition be styled. The other paragraph and headings on the page will remain the default colour (blackness).

Here's the HTML with inline CSS:

                                                                   <h2>How to Alter Font Color in HTML [Inline CSS]</h2>
                      <p way="color: #FF7A59">This is 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 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.
                      </p>
                      <h3>The Caption</h3>
                      <p>Since I'm using the CodePen Editor, the default font color is black. (This is usually the instance no matter what tool or framework you're using to build your spider web projects.) That means changing the color of a paragraph will require me to use a mode aspect that contains the CSS colour property set to the hex color code #FF7A59. The other elements on the page are not targeted by inline CSS and therefore remain black.
                      </p>

Here's the upshot:

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

Now allow's say I want to alter the color of every paragraph element to maroon. Then I could utilize a CSS selector to target all paragraphs and identify information technology within the head section of the page.

Here'south the CSS:

                                                                   p {
                       color: #FF7A59;
                       }

Here's the HTML:

                                                                   <h2>How to Alter 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 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. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'k using the CodePen Editor, the default font color is black. That means irresolute the color of all paragraphs on the folio will crave me to utilize a CSS type selector and gear up the CSS colour property to the hex colour code for orange (#FF7A59). The headings  on the page will remain black.
                      </p>

Hither's the upshot:

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

To learn how to change the background color of your text, read How to Change Text and Background Colour 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 chemical element that tin divide your web page into sections so y'all can target them with unique CSS backdrop.

If you'd similar to change the font type, size, and color of text on a folio, then you could wrap it in div tags and use a CSS selector to manner that chemical element. Let's look at an example:

Here's the CSS:

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

Here's the HTML:

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

Here'due south the result:

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

Changing Your Font with HTML & CSS

With some bones web blueprint knowledge, y'all can modify the blazon, size, and colour of your font. This can enable y'all to customize every detail on your site and make your content more readable. If yous're building with the Bootstrap framework, cheque out more ways you can override the default settings in Bootstrap CSS to create a truly unique website.

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

New Call-to-action