How to Determine the Best HTML Font Sizes for Your Written Content

When creating content for your website design, you might feel confused over which are the best HTML font sizes to use. After all, the size of HTML fonts often don’t look the same on every computer.

The lettering and text size can look very different when compared using large screen versus small screen PCs, or even on laptops, iPads and mobile devices!

Let’s explore how HTML font sizes work and what the most popular trends are regarding this function in web page design.

Learn Beginner Web Design From Home

 

HTML Heading Font Sizes

When creating headings, use the “header” tags when possible. These are the H1 (for main heading), H2, H3 and so on.

These tags let the search engines know that the wording within these tags is very important and relevant to your web page.

Your main keywords should also be included in these headings for SEO purposes.

You’ll also want your headings to be bold, but not necessarily all caps.

Main Text Font SizesBest HTML font sizes

Some webmasters make the mistake of adding unreasonably small text to their web pages – they feel it gives a more sleek, professional look.

But unfortunately, it might be way too small for most web users to read! Just think…most home Internet users are surfing on their phones, iPads and laptop PCs – not the big screens!

So for these users, a small “professional” looking font might look even smaller!

Common Sense is Always Best

Use sizing wisely for your main text. This is the presentation you want others to read…make it easy but still presentable.

On the flip side, don’t make the text SO BIG that it shouts at people or looks like a child designed the page.

You can easily find middle ground when it comes to font size; HTML allows for many variations and styles to achieve the right look for any web page.

Keep in mind that Arial font looks slightly larger than the same size of the Times New Roman font, so use various styles and sizes to find what fits.

HTML font sizesVary the Font Size in HTML for Emphasis

Go ahead and make the font size a little bigger when you need to emphasize a word or phrase, or even a link.

If using a web sales page, you’ll likely emphasize many areas of the presentation to attract attention to your BUZZ words.

There are several ways to create emphasis without overdoing it in font size.

HTML attributes such as bold print, dark bright colors (red, blue, green, etc.), underlines and strike-throughs can all attract the eyes.

You can even make certain words ALL CAPS to draw attention.

Use Images to Spruce Up Your HTML Web Pages

If you want to use large size fonts to create a “special offer” section on your page, consider placing the text in an image (such as .gif or .jpg).

You can create banners or images that appear as text, and then use sizing and other emphasizing features to make your offer more noticeable.

With an image, you’ll have more flexibility as to where you can insert it on the page, using text wraparound features so it will blend with your other reading content.Best HTML Font Sizes

Using the Best Font Sizes in HTML

HTML allows for several methods of sizing your text. You can specific font sizes in points, such as 2 pt, 4 pt, etc.

Or use basic lettering sizes, such as 10, 11, 12, 14, 16, etc.

For headings, you can simply select H1, H2, etc. In some WYSIWYG design programs, a + and – are provided so you can PLUS to make it bigger or Minus to make the text smaller.

In CSS, you can specific sizing for all your menus in one location to make editing your site a cinch.

Here’s the basic font tag with a “size” attribute:

<font size=”4″>This is Font Size 4 for my text.</font>

In conclusion, the font size HTML code you use will ultimately depend on where on the page the content is located and how you plan to use the text.

HTML Font Size Best Practice

If it’s your main content, you’ll want to keep the style looking as uniform and readable as possible, with a little emphasis on certain words here and there.

If it’s a heading or special link that you need to draw attention to, then choose the font size HTML code accordingly.

What's the best html font sizesAre You Ready to Learn Web Designing from Scratch?

If you would like to really learn beginner web design, check out Web Design Mastery by Shelley Lowery. This is one of the best courses I’ve seen and you’ll be learning cool designing methods in no time at all. Go here to see the course options and bonuses.

Now that you’ve studied a bit about adding text the right way, use these ideas and tips to create an easy-to-read web page with the best font sizes calling your readers to action every time!

Filed under: Web Design