HTML Basics for Bloggers #2: Let's Talk About Fonts, Baby

Visual editors are the bees knees. But there will come a time in your blogging life, if there has not already, that a line will appear out of nowhere or an image just won't align. It's like head lice at summer camp, there's no escaping it. Might as well learn a little bit about HTML. Each week in July, I'll be offering up a quickie lesson. Today, we're looking at fonts. 

Remember, tags go around text you wish to modify and almost always come in pairs, a beginning and an end: <tag>change this, yo</tag>. In the case of fonts, you use span tags and they look like this: <span style="color: #ff00ff; font-size: 16px;">The quick brown fox was, like, quick and brown.</span> You may add three elements to your <span> tag to change text: color, font-size and font-family.

Color: <span style="color: #ff00ff;"></span>See that crazy code? That's a hex color value. You may use the color value or color name. Google hex color values or html color names to find the code/name for more colors than you will ever need.

Font-size: <span style="font-size: 16px;"></span> I prefer to use pixels to set my font size. You can use other things like ems or xx-small through xx-large, but pixels are the standard for monitors (i.e. less likely to look wonky on some monitors).

Font-family: <span style="font-family: geneva;"></span> Be careful here. If a font is not installed on the viewers computer, the font will be substituted. It's best to stick to common fonts (or turn your text into an image if you wanna be fancy). You can also use a font stack <span style="font-family: geneva, arial, helvetica;"></span>. In this stack, if the viewer does not have geneva installed, arial will be used.

You can put all three elements together in one span tag! In your HTML editor, it would look like this: <span style="color: #ff00ff; font-size: 16px; font-family: geneva;">quick brown fox</span>. The span tag would make the text look like this in your visual editor: quick brown fox. 

Wanna change part of a sentence? You can! It will look something like this:
The quick brown fox was, <span style="color: #ff00ff; font-size: 16px;">like,</span> quick and brown.

Notice how the tags are put together in each example? Equal signs, quotation marks, semi-colons. These are required. <span style="color: #ff00ff; font-size: 16px; font-family: geneva;">don't forget to close it</span>.

Clear as mud? Start a new post. Open it in your HTML editor and play. Switch back and forth between HTMlL and visual to see how your code affects your post. You can always delete it without publishing. Don't be skerd. 

HTML Basics Sponsored by Whatever is Lovely & Noble. Stop by and say hi!