Wednesday, March 28, 2012

letter spacing- a favorite CSS element of mine...

Hi y'all! Yep, We're actually posting here. :)
   Tonight, I'm covering letter spacing. It's a very unique way to style text.

First of all, you'll write it like this: 

letter-spacing:1px;
Of course, you can edit the 1px part any way you would like! Letter Spacing can be positive or negative- meaning you can say that letter spacing can be 3px or -3px. Be careful using negative- a little goes a long way. Also, too much letter spacing makes a blog hard to read. But it makes an interesting effect when applied to post title hovers, links, and over-all text.

Here are some examples:
letter-spacing: 4px;

letter-spacing: -2px;

You can insert this under any code in your template that specifies text style (example: place it under h3 to give your post-titles letter spacing).

Here's a few sites that used this effect!
Jamie Delaine Blog- her over-all text has letter spacing- more than usual, but just enough.
Discover Life Designs - I used a negative letter spacing on my accordion hover.

This is such a simple element, but it's so much fun. I truly enjoy this one! :) 

3 comments:

  1. a surprise post? awesome :) mind if I stick in a div with an example?

    ReplyDelete
  2. :D glad someone is posting! :)
    thanks for this, I've been 'collecting' information on all the html stuff, and pasting it into a word document, because there is NO WAY I'm going to remember all that stuff. :0 (and because if I don't put it somewhere, I completely forget where I found it. :P)

    ReplyDelete
    Replies
    1. We're glad you like it, Marcia! That sounds like a good idea. Just remember that if you copy and paste HTML code that includes quotation marks, Microsoft Word will add styling (it turns them into special curly quotation marks) so that they might not work if you copy and paste it back into your blogger template.

      Delete