website development

HTML Fonts – How to Choose HTML Fonts for Your Website

HTML fonts determine how your content or text will look when you learn to design your web pages for WordPress blogs or even business websites. Most designers and site owners face the dilemma of which font family and size to use from the very start of their design project for websites?

Why is this a dilemma? Two reasons:

  1. Not every computer has ALL HTML fonts installed.
  2. Some HTML fonts are simply hard on the eyes and difficult to read.

Let’s tackle the first issue. Computers have come a long way, and there are many fonts available on newer computers today that weren’t available 10 years ago.

But, on the flip side, graphic artists are always creating new fonts. These new innovative fonts may look great, but it doesn’t mean every computer in the world will display them correctly.

Why Do Computers Fail the HTML Font Test?

html fonts

HTML fonts

While your computer might be fairly new and have all the latest bells and whistles, this doesn’t mean it will display every font that’s ever been designed.

And, you must think of the millions of other Internet users in Cyberland, along with the variety of computers or cellphones being used…. from different brands to different ages of computers!

So just because you CAN include a certain HTML font on your website, this doesn’t mean you should.

Think of the audience to your site.

And, think of whether or not their computer will display the font at all. Play it safe and stick with common fonts such as Arial, Times New Roman and a few others that are popular and pleasant to the eye.

The Look and Appeal of HTML Fonts

While it might be tempting to use a fancy font on your web pages, it’s not recommended by most reputable designers.

Why? Fonts with curls, fancy cursive writing, etc. can damage your site’s readability to users.

The font might appear “pretty” on the page while using your own computer, But, some people will have a difficult time actually reading it.

Also, you don’t really know how it might appear on their page with colors, size, etc.

Font Family and Size

The font family is the type of font being used, such as:

  • Courier
  • Times New Roman
  • Arial
  • Verdana
  • Helvetica, etc.

The font size determines how large or small your text will be.

When coding an HTML font, it’s important to specify both family and size.

Keep in mind that size will work differently, depending on the font family. For example, a size “10” lettering will appear slightly larger for Arial fonts than for Times New Roman.

Headline Fonts

When sizing fonts, always use “Heading” designations in your HTML code when typing a web page headline or a subheading in your content.

This tells Bing & other search engines that it’s an important statement to help boost your SEO! In code, these fonts

are written as …

<H1>Your Headline</H1>

<H2>Your Headline</H2> – for slightly smaller headlines, etc.

You can watch a video which teaches more about HTML heading tags here.

Using Alternate HTML Font Families ( This is a <H3>Headline Font</H3> )

In CSS design, you can also designate alternate font families within your code. This lets website or blog browsers know which alternative font family to use if a person’s computer isn’t working with a certain type of font.

As Always, the KISS Method Rings True with Choosing a Font

Make an effort to keep your web design and page text simple, using common fonts that every computer will display.

Being able to reach your target audience in a practical way should be your top priority when designing your web page and when choosing HTML fonts!

Choosing your font for designing better web pages is just one class of many you’ll learn when you search my website design course for beginners. Check back often, and get started in learning more web designing skills.

html fonts

Filed under: Web Design