Font Color and Size

Everyone wants to highlight words or sentences in their text when writing the Great American Blog Post or New Article on their website. Businesses want to grab attention for sales or marketing campaigns to highlight key components of their new product or services.

For websites using HTML editors, these types of configurations are often built into the tool that allows you to increase font size, change colors for certain words or designate certain font sets be used for browsers that support them.

Blogs provide these abilities to, but sometimes what’s in the “Kitchen Sink” tool set lacks some of these potential settings. So it’s good to know what you can do with the behind the scene code, that you may not be able to do from the upfront Visual editor.

In the HTML 101 – The Bare Minimum Basics I shared how you can modify the code behind your page. But to share a bit of that here so you don’t have to go back and look it up, let me duplicate a piece of that article here.

Whither you’re using a HTML editor, or adding a new post or page to your blog, both editing systems will have a way to look at the code. The HTML editor will probably have some form of “Source” view, you simply have to find where it is. For instance, the editor I recommend, Kompozer, the Source option is at the bottom of the screen. In a WordPress blog post, you’ll typically type your text in the Visual editor, and up in the right hand corner you’ll see a tab that says Text. That text is the source code, behind your page.

There are two HTML tags that are used to define the characteristics of your text. The first comes from the old way of doing things, Web 1.0 and using static HTML. The second comes from the new way of doing things, which is often used by blogs, in the Web 2.0 format.

Color Values
Setting the color value can be done in two ways. Using the red, green, blue values, which is honestly a pain in the butt. Or using the HEX color code.

Here is the red, green, blue value for the background color here on my blog:

• rgb(109, 37, 56 – which looks like this in the tag
  rgb(109, 37, 56);”>rgb
• and here’s the HEX color code. #6D2538 which looks like this in the tag
  <span style=”color: #6D2538″>hex</span>

Finding the color you want to use is pretty easy if you have a graphics editor. Most graphics tools have a way for you to pick the color you want to use and then look at its properties. This is what it looks like in PaintShopPro v8.

If I wanted to use the HEX color for this lighter magenta, all I’d have to do is change the #6D2538 to #B14562 with a simply copy/paste and I’m done. But I’d have to try to remember and change 3 numbers for the rgb. Frankly I’ve got too much to remember already, when I’m editing a web document, I don’t want to remember more than I have to.

Type Face
Setting the Type-Face is easy in an HTML editor. Most have some form of font configuration setting tools that will help you select the text you want to define for your page or post. The key thing to remember here is that viewers of your page must also have that same font on their pc, tablet or smart phone to see your special characterization.  Because of that, I’ve always found this parameter a little useless.

But there are font families that are typically installed across the board, such as Arial, New Times Roman and various other commonly used fonts. One of the most reliable sources to find the fonts that are “Safe Fonts” is from W3Schools.

Good luck, and happy creating!
.

© 1997-2014 Springwolf, D.D., Ph.D., Springwolf’s Kosmos. All Rights Reserved.