Did you know that HTML fonts determine how your content or text will look, even when you learn to design your web pages for WordPress blogs or even business websites? This piece teaches how to choose HTML fonts for best results so pay close attention.
Fact is, many 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?
HTML Fonts – How to Choose HTML Fonts for Your Website
Why are fonts such a dilemma?
Two reasons:
- Not every computer has ALL HTML fonts installed.
- 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 5 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.
A Word about Other Designer’s Fonts
If you search and find new HTML fonts online, be sure you have permission from the designer to use them. This could save you lots of headaches (and maybe legal action).
Why Do Computers Fail the HTML Font Test?
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 Website 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 Your HTML 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.
I hope you enjoyed this tutorial about how to choose HTML fonts and will apply this to your next web design project. Oh, some of the products I suggest above are affiliates so I receive a small commission at no extra charge to you. Thanks again and hope to see you again soon!