Skip navigation

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 Headingsplanet earth

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.

Adding photographs to headings in WordPress

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:

Stay tuned for more blog bling!

Related Articles


Site Search Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network Feed on Lorelle on WordPress Subscribe

Member of the 9Rules Blogging Network

10 Comments

  1. Posted February 8, 2007 at 4:34 pm | Permalink

    can this be done without upgrading or is it because the mac system does not allow this kind of change!!! Im new on css, but I have used some in my hi5 page

    thanks Lorelle

  2. Posted February 8, 2007 at 5:07 pm | Permalink

    Upgrading what? There is no CSS permitted on WordPress.com blogs unless you pay for the upgrade. Using the techniques described is HTML/XHTML and has nothing to do with Mac. So I’m not sure what you are asking.

  3. Posted June 8, 2007 at 10:40 am | Permalink

    Wow, I have been trying to figure out the post editor in wordpress for days. Your imformation has made it easy! I appreciate your help and am anxious to try more.

  4. Posted July 20, 2007 at 9:46 am | Permalink

    Thanks for the good info on using CSS with WordPress. Shows you how much I know–I didn’t even know you could use a plugin to put your own CSS formatting in.

  5. Posted July 20, 2007 at 10:25 am | Permalink

    Um, Charles, you might want to read this article again. This is not about using a WordPress Plugin. Plugins are not allowed on WordPress.com blogs. This about using archaic HTML techniques on the limited WordPress.com free blogging service.

    I do not recommend these techniques for full version WordPress blogs or any other websites with access to their stylesheet except the very rare and occasional use.

  6. redsoxmaniac
    Posted October 29, 2008 at 10:48 am | Permalink

    I just read this warning. The font size thing screwed up my post. No biggie.

  7. Posted October 29, 2008 at 9:06 pm | Permalink

    @ redsoxmaniac:

    I’m glad you read through the warnings before trying these at home. :D Part of the fun of learning what to do and what NOT to do.

  8. MAN UTD FAN
    Posted May 11, 2009 at 7:52 am | Permalink

    :)

  9. MAN UTD FAN
    Posted May 11, 2009 at 7:53 am | Permalink

    :MRGREEN:

  10. MAN UTD FAN
    Posted May 11, 2009 at 7:54 am | Permalink

    :?


13 Trackbacks/Pingbacks

  1. [...] WordPress.com Blog Bling: Fun Font Bling [...]

  2. [...] WordPress.com Blog Bling: Fun Font Bling [...]

  3. [...] to the other tab to refresh and see how it looks. Don’t like the look? Check out my article on WordPress.com “font bling” to jazz up the look of text on your [...]

  4. […] WordPress.com Blog Bling: Fun Font Bling […]

  5. […] WordPress.com Blog Bling: Fun Font Bling […]

  6. […] WordPress.com Blog Bling: Fun Font Bling […]

  7. […] we? I’ve shown you how to add graphics and photographs and video, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, and…have I forgotten […]

  8. […] blog bling to your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links. Now it’s time to add some blog bling to your […]

  9. […] Bling series has covered adding graphic images, lines and smilies, social bookmarking links, and font bling. The techniques covered in this section on blockquotes will feature techniques from those previous […]

  10. […] WordPress.com Blog Bling: Fun Font Bling […]

  11. […] WordPress.com Blog Bling: Fun Font Bling […]

  12. […] WordPress.com Blog Bling: Fun Font Bling […]

  13. […] to blog bling your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, podcasts, audio, and […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,104 other followers

%d bloggers like this: