WordPress.com Blog Bling: Fun Font Bling

Why not dress up your WordPress.com blog with some font bling?

So far on this series on WordPress.com Blog Bling, I’ve covered how to using images, logos, and badges to decorate your WordPress.com blog, how to add horizontal and vertical lines and smilies, and Social Bookmarking Submit Links on WordPress Blogs, including WordPress.com blogs. In this part of the series, I’m going to help you decorate your WordPress.com blog with some font bling.

There are several ways to add font bling to your WordPress.com blog. The easiest method is to separate your post content into sections using headings.

Font Bling Headings: Breaking Up The Text

Headings are like titles or sub-titles. They are usually styled to match the WordPress Theme and act as dividers, allocating your post content into sections. I’ve used them extensively in these articles to direct you to specific subjects.

Most WordPress blogs feature 2 heading tags used within the post content area. They are <h3> and <h4>, with the latter being smaller than the former, traditionally. Use the HTML editor to put some test titles in between content to see how they appear on your WordPress Theme.

An example of a heading test in a WordPress.com blog would be:

---

<h3>Header Large h3 Title</h3>

This is a test of the H3 header to see what it would look like with text below it and around it. By using headings, you create an visual outline of sections in your blog post articles.

<h4>Header Smaller h4 Sub-title</h4>

This is a test of the h4 header, a smaller header usually used as a sub-title for a sub-section of an article.

---

By breaking the post content into sections, long posts are easier to read and more visually pleasing.

Headings also serve another very important purpose: Search engines love them. Search engines check headings for keywords and compare them with the keywords you use in your post content. If they match enough times, you get “extra points”. So take advantage of the visual pleasure headings offer, and get bonus points from search engines.

Adding Graphics to Headings

You can also add graphics to headings to add emphasis and visual impact.

In the above example, the code is:

---

<h4>Adding Graphics to Headings<img src='/files/2007/01/goodearth.gif' alt='planet earth' /></h4>

---

If you are using WordPress.com CSS Extras, you can edit your stylesheet to automatically add a graphic image to your headings. The key is setting the placement to the left or right of the text so it doesn’t crowd the image which is set in the background.

The CSS for the above heading with a background color and image is:

---

h3 {display:block; position:relative;
background:url(/images/dew.jpg) no-repeat right #4d6545;
font-family:Formal436 BT, Arial, Helvetica, sans-serif;
font-weight:600;
font-size:160%;
color:#ccffff;
padding:25px 5px 3px;
letter-spacing:5px;
font-variant:small-caps}

---

Note the position of the image is set to the right within the h3 heading container.

You can see this same effect on all my h3 headings on this blog. I added a blue swirl to the right side of the headings using the CSS Extra option for WordPress.com blogs.

Even if you haven’t added the CSS option to your WordPress.com blog, you can have fun adding images to your headings, putting them in the front or end of your headings to call attention to them.

Colorful Font Styles

While a lot of style tags and possibilities are restricted on WordPress.com blogs, you still have some control over the look of fonts on your WordPress.com blog.

Before you start going crazy with this, consider font bling as accessorizing your fonts rather than a complete conversion. Use font bling with care, like adding spices and seasonings to food. Too much and the whole dish is ruined.

You can write in bold, which really puts emphasis on the text. Most people’s eyes move immediately to anything emphasized with bold letters.

Writing with italics adds emphasis to your words. It can also add expression such as “I’m really tired of bad drivers.”

Do take care to keep the sections you highlight with italic brief, as the slanted text may be difficult to read for long sections of text.

In addition to bold and italic, you can control your fonts in your WordPress.com posts by size and color.

Font Size: Font size is controlled by the font HTML tag. You can add it via the HTML editing option in the Rich Text Editor, or turn off the Rich Text Editor (which will help if you do this a lot) in your Profile panel and do this manually.

The font size tag looks like this:

<font size="+1">This is text a little 
larger than normal.</font>

You can try forcing a font size, but I recommend you stick with a relative font size reference, as shown below. This method uses the default font size for the WordPress Theme and enlarges or reduces it based upon a relative percentage from the original default font size. I have not been able to get an actual percentage (font size="50%") to work on WordPress.com blogs, only the plus and minus relative font sizes.

Here is an example of the font sizes available in WordPress.com blogs:

• font size="-3"
• font size="-2"
• font size="-1"
• font size="+1"
• font size="+2"
• font size="+3"
• font size="+4"

Font Colors: You can add colors to your fonts for emphasis, too. The font color tag looks like:

<font color="red">This is red text.</font>

Colors come as words and letter/number combinations. Here are a few examples:

• red – #FF0000
• blue – #0000FF
• green – #008000
• white – #FFFFFF
• purple – #800080
• pink – #FFC0CB

You can find more color resources in Designing a Rainbow – Sexy Hot Colors.

You can also use combinations of these font bling styles in your posts to highlight a point or blockquote.

---

<font size="+3" color="red"><em>This is Red in +3 size italics</em></font>

---

Which would look like:

---

This is Red in +3 size italics

---

Adding Font Bling For Fun

Let’s create some interesting font bling for your WordPress.com blog by creating a variety of font bling graphic elements.

1. If you would like to add dramatic numbers to your post content, you can add them with a large and colorful font. Here, I’ve added a +4 font in blue for the number 1 to emphasis this is paragraph 1 in my list.

2. What about adding a keyword or phrase in large text to promote your next topic instead of just using a heading?

Using CSS in purple gives the reader a clue that this paragraph might be about Cascading Style Sheets, adding color and emphasis to your content.

The code for creating these is:

<font size="+4" color="blue">1.</font> If you would 
like to add dramatic numbers...

Maybe you might want to use the old fashioned book technique of starting your opening paragraph with the first letter larger than the rest of the text.

Sometimes in the middle of a paragraph, there is a keyword you would like emphasize. Use this technique carefully as it will push around your text, but is it great FUN to play around with, adding some colorful font bling to your blog posts.

Use your imagination and some fun font bling to add drama to your WordPress.com blog.

There’s More WordPress.com Blog Bling to Come!

So far this series on WordPress.com Blog Bling has covered:

• WordPress.com Blog Bling: Decorating Your WordPress.com Blog
• WordPress.com Blog Bling: Lines and Smilies
• Social Bookmarking Submit Links on WordPress Blogs

Stay tuned for more blog bling!

Related Articles

• Adding Images to Your WordPress.com Blog
• CSS Unleashed – Experiments with CSS Designs
• CSS Experiments Playing With CSS Blocks
• CSS Experiments with CSS Logo Designs
• CSS Experiments with Background Images and Backgrounds
• CSS Experiments with Lists, Menus, Tables of Content, and More
• CSS Experiments – Web Fonts and Embedded Fonts
• CSS Unleashed – Experiments with Quotations, Pull-quotes and Blockquotes
• CSS Unleashed – Experiments Showcasing Your Photography
• CSS Experiments – Variations on a Theme
• CSS Experiments – How They Were Done and More
• More Website Design Mistakes
• WordPress Design Details
• Free Text Only Editors for Templates, PHP, HTML, CSS, and More
• Designing Themes for WordPressMU – Fill In All The Details
• Buttons, Bows, and Badges for Your Blog
• Designing a Rainbow – Sexy Hot Colors
• The Battle Between Image Width and Column Width
• Creating Effective, Attention-Getting Headlines and Titles
• One Year Anniversary Review: Web Design
• One Year Anniversary Review: Designing WordPress Themes
• Free Photos for Your Blog

---

Site Search Tags: blog bling, wordpressdotcom, wordpress.com, wordpress.com tips, wordpresscom, decorate your blog, blog design, blog design elements, wordpress blogs, wordpress themes, wordpress theme design, post design, post design elements, writing posts, blog writing, writing tips, post graphics, free photos, graphics, images, blog graphics, blog images, blog design, design elements, writing blogs, pretty blogs
Copyright Lorelle VanFossen, member of the 9Rules Network Subscribe