Elements of HTML – Fonts

Continuing the HTML series, this week we take a look at fonts. Longtime readers will remember that I touched on this subject previously, but I want to take some time to go more in depth on this, and show you some neat features about fonts, and also a list of fonts that look good, fonts that are common and fonts that you should just avoid.

Fonts in HTML

In the early days, the only font you ever saw on the web was Times New Roman (or simply Times). It was the default font everyone used in their browsers (unless you knew how to change it), and most pages didn’t declare what font they wanted the page to be printed in.

However, it wasn’t too long before you started seeing pages having a variety of fonts used; the most common being the Helvetica family, most commonly reproduced as Arial in Microsoft products, as the license wasn’t acquired by MS for the use of the real font.

When Windows 95 and 98 came along, so did a whole new set of fonts – Microsoft’s own TrueType creations including some more common fonts that you still see to this day – Georgia, Tahoma, Verdana and everybody’s favorite Comic Sans MS.

Now, it could almost be classed as a free-for-all when it comes to fonts. I’ve seen pretty much any font you can imagine out there, and there are definitely fonts that, in my opinion, look absolutely brilliant on a webpage, some that are good all-rounders, and others that for the want of a better term, are just plan crap.

Using Fonts

First, however, a bit of a review on how to get fonts to change on your page.

In the “old” days (back when it was simple and there was only one way to make things appear, not 17 πŸ˜‰ ), most of the controls for your fonts were based in the <font> tag. If you wanted to change the style, you’d put face="font face", changing the size would be through size="{-7~+7}". That was about it.

Now, everything you want to control about the font is found in the “style” attribute, placed in a <span> tag. Not only is this more concise, it’s a lot simpler, as you don’t have to use arbitrary numbers for the font size, and it’s all held in one tag. Overall, while it might seem more complex, it’s a lot better.

Font sizes

The most common thing that you’ll wind up doing with the font is change the size of the displayed font. There are a couple of ways that you can do this using the <span> tag. The first is the easiest, changing the percentage of the size. To make the font larger than the rest of the page, set the size to greater than 100% and vice versa. For example, if you wanted this to appear as such –

1.5x larger, you would use this code:

<span style="font-size:150%">1.5x larger</span>

The other method is similar, but less used; it involves multiplying the display size by a number. It’s like taking the percentages used and dividing them by 100. As with the example before, here’s how you do it:

1.5x larger, use this code:

<span style="font-size:1.5em">1.5x larger</span>

Font color

There are times when you’ll also want to change the color of the displayed font, to maybe a red or a blue. Here’s how you do that:

For a lovely red font use –

<span style="color:red">For a lovely red font</span>

For blue

<span style="color:blue">For blue</span>

And, last but not least, if you want to use a custom color, and you know its numbers for red, blue, and green, you can use either of the following two combinations. The first is if you know the Hexadecimal numbers, the second if you know the 1-255 number.

<span style="color:#aabbcc">For the color matching Red: AA, Green: BB and Blue: CC</span>

<span style="color:rgb(0,0,0)">For the color black use this code; white would be rgb(255,255,255)</span>

If you want to see a set of 216 colors that are great for the web, you can check out the Visibone Color Guide

Bold, Italic, Underline and Strikethrough

These four are similar, yet somewhat different. There are a couple of ways to do each of these, and personally, I still prefer to use the “old” method as it’s easier to type for them. πŸ™‚

Bold: choose one of the following – <b>Bold</b> or <strong>Bold</strong> or <span style="font-weight:bold">Bold</span>

Italic: choose one – <i>Italic</i> or <em>Italic</em> or <span style="font-weight:italic">Italic</span>

Underline: Pick from – <u>Underline</u> or <span style="text-decoration:underline">Underline</span>

Strikethrough: Select – <s>Strikethrough</s>, or <span style="text-decoration:line-through">Strikethrough&;/span>

Font Faces

Before I get into the discussion of the fonts you should and shouldn’t use, we need to put a font into the page. For this example, I’m going to use a simple font – Times New Roman, as I did above.

To get this use –

<span style="font-family:times">To get this</span>

The awesome thing about the font-family item is that if you don’t have the exact font that is looked for, your browser will find a compatible font you have on your system to substitute for it that looks simliar to the font asked for.

Fonts I Like

From here on out, this becomes opinion. Just sayin’ πŸ˜‰

To me, there are a lot of fonts that are really good for webpages. In fact, there are a lot more fonts that I like than fonts that I don’t like. This is just a short list of the fonts that I like:

  • Lucida Sans (that’s the default font on this blog, it’s an easily read font, and quite versatile)
  • Times New Roman
  • Georgia
  • Tahoma
  • Verdana
  • Trebuchet MS
  • Courier New - a shortcut to this text is <tt>the TT tag</tt>

And, now, the fonts that I don’t like particularly much:

  • Comic Sans MS
  • Impact
  • SimSun (the default font for English text in a Chinese or Japanese encoded document)

However, just because I don’t like a font, that doesn’t mean I won’t use it – I’ve used SimSun for a form that was sent to scammers, mostly to annoy them. πŸ˜‰

Further Reading

In the companion post to this, Snoskred takes a look at the Horizontal Rule
W3 Schools: Font Tag
W3 Schools: Span Tag
What’s wrong with the Font tag
Beyond the FONT tag: Practical HTML text styling

Over to you

Take some time and experiment with using fonts on your blog and play around. Find fonts that you like; I believe you can even do some experimentation in the comment area, just use the <span style="(styling information)"> tag. πŸ™‚

One thought on “Elements of HTML – Fonts

Comments are closed.