探花精选

Fonts are a critical element of a web page. As a user, when I browse the web, I typically skim through web pages to find what I want. That becomes easier when the website has readable fonts. The right HTML font and font styling choices help users navigate the web page effortlessly to find meaningful content and increase the chances of return visits.

For example, a dark gray color over black . In that case, I would want to change the font color to make the color scheme more accessible. If I were in media, I might opt for a sans serif font since it's considered easy to read. But, if I were in the creative field, I might opt for a more decorative typeface. These are just a few considerations when building your site.

In this post, I'll show you how to change your fonts in HTML to help your copy stand out, delight readers, and drive conversions. I'll also share how to change the HTML font text color as well as its styling.

Table of Contents

• Font Handling Before HTML 5 (HTML Font Tag)
• How to Change Font in HTML
• How to Change Font Type in HTML
• How to Change Font Size in HTML
• How to Change Font Color in HTML
• How to Change Font in a <div> in HTML
• The Best Way to Change Font in HTML & CSS

Font Handling Before HTML 5 (HTML Font Tag)

Up until HTML 4, if I had to change the default font of some text, I had to wrap that text in a <font> tag and then apply attributes such as color, face, and size to modify its styling.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

The <font> tag supported all of the plus the attributes mentioned below:

• color: used to set the color of the text/font (only supports color names and hexadecimal values).
• size: used to change the font size. It accepted a range of values from 1 to 7, with 1 being the smallest size and 7 being the largest. It also accepted relative values such as +1 or -2, which were relative to the default value, i.e., 3.
• face: A comma-separated list of font names, same as specifying the values for font-family, with the first supported value being applied to the text.

Here’s an example implementation of what it looked like in HTML 4:

<font size="3" color="magenta" face="Arial,Verdana">Your Text Here.</font>

The font element was deprecated when the was published in 1999 in favor of CSS. It’s a more lightweight and flexible alternative to the HTML font tag. I do not recommend you use this tag for modern HTML development because there will be little to no browser support.

With that being said, let me walk you through the aspects of font handling in HTML 5.

How to Change Font in HTML

Updating the font on a website is not that hard. I’ll show you how you can do it with just a little bit of code.

How to Change Font Type in HTML

To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then, add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

Using Inline CSS

This approach to changing font type in HTML uses CSS (Cascading Style Sheets) — a styling language to style web pages. More specifically, this technique is called inline CSS. Inline CSS means HTML and CSS are placed together in the body section of the HTML document and the styles are declared with the help of a style attribute on an HTML tag.

I‘ll demonstrate how you can use inline CSS to change the font type of a paragraph. I’ll add the style attribute to the first paragraph element, which means the style is only applied to this paragraph.

The other paragraph and headings on the page will remain in Times New Roman, the default font type in most browsers.

Using External CSS

While inline CSS works fine for changing a single element on the page, I'd recommend other CSS styling techniques, namely external CSS, over inline. The correct way to apply External CSS is to place it in a separate CSS file from the HTML and then reference it with a link tag in the head section of the HTML document.

Not only I but most developers consider this the “right” way to change the font in HTML because then I don't need to copy and paste the same style rules into each tag. Instead, l can target all the elements of the same type with a CSS selector.

For instance, let’s say I want to change the font of every paragraph element to Arial. I could use the CSS selector “p” to target all paragraphs:

You‘re on a roll! Now, I’ll demonstrate how to update the font size in HTML.

How to Change Font Size in HTML

To change font size in HTML, use the CSS font-size property. Set it to your desired value and place it inside a style attribute. Then, add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

If you're a visual learner, this video will walk you through the steps you need to take to change your font size in HTML.

Using Inline CSS

Continuing with the example above, let me change the font size of a paragraph to 26 pixels with the help of CSS. Same as above, I'll start by adding the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will retain their default sizes.

Using External CSS

Now, let's say I want to change the font of every paragraph element to 26px. To do this, I would use a CSS selector to target all paragraphs using External CSS:

Changing Font Size Within the Same Paragraph

Another advantage of CSS is that it offers more granular control over your code. For instance, I can apply different font sizes to text inside the same paragraph.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

If I want to keep the paragraph at its default font size, I can wrap the text that I wanted to change the size of in <span> tags. Then, I'll add a style attribute with the font-size property set to the desired value.

To achieve this effect with external CSS, I‘ll still wrap the text that I want to change the size of in <span> tags. But, I’ll add an ID attribute to the span element. Using an ID selector, I set the span element to a different size.

For a more in-depth look at the properties and values you can use to change the size of the HTML text, read How to Change Font Size in CSS.

How to Change Font Color in HTML

To change font color in HTML, use the CSS color property. Set it to your desired value and place it inside a style attribute. Then, add this style attribute to an HTML element, such as a paragraph, heading, button, or span tag.

Let me now change the font color of a paragraph to Lorax orange (hex color code #FF7A59) with CSS.

Using Inline CSS

Same as above, I will start by adding the style attribute to the first paragraph element, which means only this paragraph will be styled. The other paragraph and headings on the page will remain the default color (black).

Using External CSS

Now, let's say I want to change the color of every paragraph element to maroon. I could use a CSS selector to target all paragraphs with external CSS:

To learn how to change the background color of HTML text, read How to Change Text and Background Color in CSS.

How to Define the Font Color in HTML

There are multiple ways in which I can define the font color value in CSS. I'll walk you through them now.

1. Color Names

This is probably the most self-explanatory option. All I have to do is use the name of the color to define the font color. — offering a wide range of options — from turquoise blues to bright pinks to demure greys.

That being said, I still can’t get shades of colors or set the transparency with this approach — that’s why it’s only good for discrete colors.

If you want to check out the color names CSS supports, . You'll also see the Hex & RGB identifier listed with the color name, which brings me to my next point.

2. Hex Colors

A hex color code is a designated number that is assigned to the color I am selecting. Because of this, I can input the hex color code and easily populate the color I am looking for.

The first two numbers indicate how intense the red color will be. The middle specifies the green's intensity, and finally, the last two detail the blue color intensity. It is essentially a hexadecimal value that includes letters ranging from A to F and numbers between 0 and 9.

Here's the Hex color code for the orange color 探花精选 uses, for instance. , I was able to identify the exact Hex color code I'd input for 探花精选 orange.

3. RGB Values

Another way to define a color value is with RGB values. RGB stands for — you guessed it — red, green, blue. The color is identified with a series of three numbers.

The first number indicates the amount of red, the second indicates the amount of green, and finally, the third indicates the amount of blue. The value of each number ranges from 0 (color isn't there at all) to 255 (highest intensity).

When combined, these three values can produce 16 million colors. me to determine RGB values effortlessly. (There are plenty of other free options available, too.)

4. HSL

Lastly, there are HSL values, meaning hue, saturation, and lightness. With hue, you'll notice it uses degrees ranging from 0 to 360. Red is 0/360, green 120/360, and blue 240/360 on a typical color wheel.

I used and other ways to determine the color you seek to add. I love that this tool offers complimentary colors, too.

Tips for Choosing Font Color for Text in HTML

By now, you have all the technical knowledge you need to efficiently choose the font color HTML style. Now, I'll share some of my top tips to help you tackle doing so.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

1. Make sure you're considering accessibility

For folks with color blindness or low vision, insufficient color contrast can make or break their ability to read the content I am creating. Therefore, I must select a color with sufficient contrast.

The good news is that there are plenty of free tools available online for me to quickly check the color contrast. I've had great success with . That way, I can rest assured that my site is as accessible as possible. (This web accessibility checklist can also help you take additional steps to guarantee compliance with best practices.)

Source: WebAIM Contrast Checker Tool

2. Take notes of color combinations you love

When surfing the web, I tend to jot down notes of color combinations that I love when I come across them on other sites. Doing so is simple, as I can inspect the code and gain insight into what colors the site owner elected to use.

Then, when it comes time to launch or redesign my site, I already have some ideas for color combinations I love. While I don't suggest you copy them exactly, you can use them for inspiration. My colleague put together a list of color combinations we love to help you get your creative juices flowing, too.

3. Consider how color impacts your overall branding.

When selecting the font color HTML, I recommend you consider how it accentuates (or detracts) your overall branding. Think of it this way: You‘re on the Dunkin website, and the font is hunter green. That doesn’t feel very on-brand with the rest of Dunkin's branding, does it?

You want to use color — all color, including font — to add to your cohesive branding, not detract from it. I'd urge you to consider this when selecting your font color.

How to Change Font in a <div> in HTML

A div in HTML is simply a generic element that can divide a web page into sections so I can target them with unique CSS properties. Changing the font in a div is no different than changing the font in a paragraph or span element.

If I want to change the font type, size, and color of text on a page, I can wrap it in div tags and use a CSS selector to style that element.

The Best Way to Change Font in HTML & CSS

For me, the best way to change the font of the text or its styling is to use CSS effectively in an educated way. There’s no universal best way to do that. It really depends on your use case. If I have a limited number of instances that need font styling and modification, I would go for internal or inline CSS, but if I have to style a lot of text elements, then external CSS with the CSS selectors is the way to go. CSS is extremely flexible and customizable.

Also, you need to keep accessibility in mind when picking up a font or doing something as simple as changing the text color of an HTML element. I use tools like WebAIM to ensure my site is accessible or not. I also use Google Lighthouse to ensure my site follows web standards.

With some basic web design knowledge, you can change your font's type, size, and color. This can enable you to customize every detail on your site and make your content more readable, accessible, and on-brand.

Searching for CSS effects or boilerplate templates? Here are some including CSS templates which you can use.

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

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.