How to Determine the Best HTML Font Sizes for Your Written Content
When creating content for your web 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 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.
Vary 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.
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.
