Blog Font Style with CSS - Text Effects

This is part five of the five part Blog Font Style series.

You've learned so much this week! Now you can find the CSS selectors for your text, specify your font families, and set your font's size, weight, and style. And, you can set the line height, spacing, and alignment of your text with the best of them. Now you're ready to start getting decorative with some CSS text effects!

I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.

Color

It's easy to set text color with CSS. Here's an example of a CSS text color declaration:

p { color: #A071AD; }

And here's how the selected paragraph would look in the browser:

This paragraph is purple!

You can use one of the dozens of web color names, a HEX color code, or an RGB color code to set your text's color. For more on finding your color values, check out this tutorial.

Text Shadow

Text shadow allows for some amazing text "special effects". I'm just going to show a brief example now, but be sure to check out the Further Reading at the end of this post for links to tutorials that show just how much you can do with this simple CSS declaration.

Here's a very, very basic example of text shadow at work:

p { text-shadow: 1px 1px 1px blue; }

I have a shadow, and it's blue!

In a text-shadow declaration, the three pixel values each do something different. Here's how they work:

The first sets the horizontal distance of the shadow from the text. If it's a positive number, the shadow falls to the right of the text. If it's negative, it falls to the left.

The second sets the vertical distance of the shadow from the text. If it's positive, the shadow falls below the text. If it's negative, it falls above the text.

The third sets the blur radius of the shadow. The higher the pixel value, the blurrier it gets. You can't set a negative blur, but you can set the blur to 0 and the shadow won't blur at all.

Text Decoration

The most commonly used text-decoration is underline, which places an underline on the selected text. You can also use line-through to "cross out" text, or overline to place a line over your selected text. Here are examples of each:

p { text-decoration: underline; }

Hi, I'm underlined.

p { text-decoration: line-through; }

Don't read me, I'm crossed out!

p { text-decoration: overline; }

Well hello there, I'm overlined.

And... ok, I didn't really want to mention this, but in the interest of being thorough, I should acknowledge that text-decoration: blink; is a real thing. No demo though, because I like you too much to subject you to it.

Text Transform

With the text-transform declaration, you can change the capitalization of your selected text. Your transform options are capitalize, lowercase, and uppercase. Capitalize will capitalize the first letter of every word in your selected text. Lowercase and uppercase will convert the text to all lowercase or all uppercase letters, respectively.

This is useful for standardizing dynamic text on your blog. Here's an example — let's say you want to set the links to your commenters to all lowercase letters to normalize their appearance.

.comment-author-link { text-transform: lowercase; }

One of your commenters enters their name with strange capitalization:

<a href="commentersblog.com" class="comment-author-link">mY CApiTAlizatION iS weIRd</a>

But, you set the text-transform for those links to lowercase, so here's how that would look in the browser:

mY CApiTAlizatION iS weIRd

"Creative" capitalization problem: solved!

Try it Out!

So today's Codepen is a little different. This time, you get no CSS from me, just the bare HTML. Play around with it and style it using your new font styling skills. If you'd like to share your experiement, you can "fork" my code and create a new Codepen to link in the comments. Or, you can post a screenshot of your handiwork. I look forward to seeing what you come up with!

Ready to try it out? Click the "Edit on Codepen" link in the demo below, or click here to open the Codepen editor in a new window/tab

Check out this Pen!

Further Reading

Now that you've got the basics of font styling with CSS down, there's so much more you can do! Here are a few more tutorials to try out if you want to learn even more.

• Patterned Text for Safari and Chrome with CSS3: a sweet CSS effect for webkit browsers, with a solid fallback for browsers that can't display the patterns.
• 3D Text Tower: Fun with text shadows from my all-time favorite CSS blog, CSS-Tricks.
• 20+ Amazing CSS3 Text Effect Tutorials: An inspiration gallery showcasing clever CSS text effects.

Blog Font Style with CSS - Spacing, Alignment, and Line Height

This is part four of the five part Blog Font Style series.

You're just about done with this series and you've learned a lot! You can find the CSS selectors for your text, specify your font families, and set your font's size, weight, and style. You're all set to start experimenting with some more advanced typography with spacing, alignment, and line height.

I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.

Letter Spacing & Word Spacing

With a letter-spacing or word-spacing declaration, you can set the space between the letters in your words, or between the words themselves. In traditional typography, this is called "tracking". You can use pixels, ems, or percentages to add spacing.

Here's an example of a CSS rule with letter spacing:

p { letter-spacing: 3px; }

And here's how that would look in the browser:

Three pixel letter spacing.

Here's an example of a CSS rule with word spacing:

p { word-spacing: 5px; }

And here's how that looks in the browser:

Five pixel word spacing.

Letter and word spacing are best used sparingly. They can be used to great artistic effect in headlines and decorative text.

Text Align

You know those alignment buttons in your blog's visual editor? The text-align declaration in CSS does the same thing. You have three text alignment options: text-align: left; text-align: right; and text-align: center;.

Here are some example CSS rules with text alignment:

p { text-align: left; }

Aligned left.

p { text-align: center; }

Aligned center.

p { text-align: right; }

Aligned right.

Text Indent

Using the text-indent declaration, you can indent text by pixels, em units, or percentage.

The main use of text indent is to create indentation for paragraphs. In the "olden days" of web design, before web fonts were commonly available, we used to use text-indent to push text off the page so it could be replaced by an image. That's not as common anymore. But you may come across a CSS rule that includes a major indent like "text-indent: -9999em;", and now you'll know what it's doing.

Here's an example of a CSS rule with text indent:

p { text-indent: 1em; }

And here's how that looks in the browser:

I'm indented one em unit from the left.

Line Height

Line height controls the vertical space between lines of text. In traditional typography it's called leading (pronounce it with "lead", as in the metal).

You can set your line height in pixels, ems, percentages, or with a "unitless" number. A unitless number is just a plain number without px, em, or percentage. I'm going to give the next paragraph a unitless line height of 1.9 using this CSS:

p { line-height: 1.9; }

Unitless line height is recommended because it helps prevent unexpected sizing issues due to inheritance from parent elements. I'm using line-height: 1.9 here. If you're interested in learning more about line height, I recommend this comprehensive presentation from Russ Weakley.

Try it Out!

Yet another Codepen for you to play with! This time I've combined the font styling options from previous lessons with today's lesson to give you something a bit more detailed to try out. This demo includes line height, letter and word spacing, and text alignment, as well as all of the font features from the previous tutorials. Feel free to play around and restyle the whole thing!

If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

body { font-family: Georgia, Times, "Times New Roman", "Liberation Serif", serif; }

h1 { font-variant: small-caps; }

h1, h2, h3 { text-align: center; }

.author {
  font-size: 1.2em;
  font-style: italic;
  text-align: right;
  letter-spacing: .1em;
}

.first {
   font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
  word-spacing: .1em;
}

p + p { text-indent: 1em; }Check out this Pen!

What's Next?

You're ready for the final installment of the series! Now it's time to play with color & shadows in Blog Font Style with CSS - Text Effects.

Blog Font Style with CSS - Size, Weight, and Style

This is part three of the five part Blog Font Style series.

Now that you know how to select your text with CSS and set your font family, you're ready to control the size, weight, and style of your text. Let's start with font size!

I'm going to use p as my selector in the examples that follow, but you'll need to use the appropriate selector for the element you'd like to style.

Font Size

With the font-size declaration, you get to control the size of your text. There are three common size units used for font sizing.

Pixels

You can specify a font size in pixels, like this:

p { font-size: 16px; }

Overall, pixels are the easiest to use. If your blog is a "traditional" fixed-width site that doesn't change size or layout for different-sized screens and devices, pixel sizing works great. Your blog's font sizes will look just about exactly the same as they'd look in Photoshop.

But, if you're designing an adaptive or responsive blog, you'll need to learn to use ems or percentages instead.

Em

You can specify a font size in em units, like this:

p { font-size: 1em; }

Em values are a bit trickier to use than pixels, but they're more flexible for the reader because they can scale dynamically for different browser sizes and devices. An em value is based on the font size of the parent element, or, if there's no font size specified for the parent element, it's based on the browser default size — usually about 16px.

An em is a multiplier, so if your default font size is 16 pixels, 1em is equal to about 16px, while 1.3em is about 21px. You can convert pixels to ems (and convert in reverse, too) automatically at http://pxtoem.com

Percentage

You can specify a font size in percentage units, like this:

p { font-size: 80%; }

Percentages are similar to ems, but instead of acting as a multiplier, they increase or decrease font size by percentage. You can also use pxtoem.com to convert pixels & ems to percentage values.

In addition to these three options, you can also use the absolute size keywords: xx-small, x-small, small, medium, large, x-large, xx-large. These sizes are based on your reader's browser default size — usually "medium".

Font Weight

There are several font weight options. The first is "normal", the default font weight. It's rare that you'd ever need to specify normal.

Bold

You can set your font weight to bold like this:

p { font-weight: bold; }

Setting your font to bold "darkens" the text, making it appear thicker and heavier. If there is a bold version of your font available, the browser will use that. Most "web safe" fonts have a bold version. If you're adding a web font, make sure to include a bold version of your chosen font with your font bundle for best results.

If there is no bold version of your font available and you set your font style to bold, the browser will try to simulate a bold version. Sometimes this doesn't look so great — see Say No to Faux Bold at A List Apart for more on simulated bold.

100 through 900

You can set a numeric font weight like this:

p { font-weight: 500; }

Some fonts offer a broad range of weights, and each of those weights is assigned a numeric font weight of 100, 200, 300, 400, 500, 600, 700, 800, or 900. Before using numeric weights, check out a type specimen of your chosen font to see what the different weights look like.

Lighter & Bolder

You can set a lighter or bolder font weight like this:

p { font-weight: lighter; }

The "lighter" and "bolder" font weights are less common, and are usually used in conjunction with numeric font weights. If you choose one of these font weights, your text will appear one font weight lighter or darker than the font weight of its parent element.

For example, if you give all of the links in your paragraphs a font weight of "bolder", each link will be one weight bolder than the text in the surrounding paragraph.

Font Style

There are three font styles: normal, italic, and oblique. Normal is the default font style. It's the standard font without any adjustments. It's rare that you'd need to specify normal.

Italic

You can set an italic font style like this:

p { font-style: italic; }

When you set font-style to italic, the browser will use the italic version of your font if it's available. If there is no italic version of your font, the browser will skew the text slightly to simulate an italicized look.

If you add a web font to your blog, it's best to include the italic version of the font with your font "bundle" so that italic text is truly italicized. The italic version of a font has its own special character, and is so much nicer to look at than text that's simply skewed. In the example image below, the top text is Noto Serif normal, and the bottom text is Noto Serif Italic. Notice the differences?

Oblique

You can set an oblique font style like this:

p { font-style: oblique; }

This is rarely used, but I'm including it so you know what it is if you ever see it! Font-style: oblique; skews text slightly (usually about 10 degrees). If there's an italic version of your font available, some browsers will try to use the italic version instead of skewing the text, but that's unpredictable, so font-style: oblique; doesn't get a lot of use.

Font Variant

There's only one font variant: small caps. You can write a small caps variant declaration like this:

p { font-variant: small-caps; }

"Small caps" is an abbreviation of "small capitals", and basically it's when all of the letters in a word look like capital letters, except that the lowercase letters are smaller than the initial capital.

This looks best with fonts that have a small caps version. If there is no small caps version of your font available, the browser will simulate small caps by using scaled-down capital letters for lowercase letters. The differences between real and "faux" small caps are subtle, but true typophiles will notice!

Try It Out!

I've put together a simple Codepen demo for you to play with. This demo includes four HTML elements: a heading, a subheading, and two paragraphs. Each element asks you to do something to it with CSS.

If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

<h3>Make me italic!</h3>
<h4>Change my size!</h4>
<p class='bold'>Make me bold!</p>
<p class='small-caps'>Make me small caps, please.</p>
Check out this Pen!

What's Next?

In part four you'll learn how to use spacing, alignment, indentation, and line height to further customize the look of your text. Move on to Blog Font Style with CSS - Spacing, Alignment, and Line Height.

Blog Font Style with CSS - Font Families

This is part two of the five part Blog Font Style series.

Now that you know how to select the text you want to style with CSS, you're ready to start styling!

Today we're going to talk about how to use font families in CSS. The font-family declaration is how you set the fonts for the text on your page.

Here's an example of a CSS rule with a font family declaration:

h3 {
font-family: Georgia, Times, "Times New Roman", serif;
}

This font family declaration includes a font stack of web safe fonts. Let's talk about what those two terms mean.

The Font Stack

A "font stack" is a group of fonts that are fairly similar to each other and can stand in for each other. When the browser encounters a font-family declaration in your CSS, it starts with the first font and tries to match it. If the font is not available, it moves on to the next one. So, start your font stack with the font you really want to show, followed by the close second, on and on until you end the list with a generic font name like serif or sans-serif.

There are two ways a font can be "available" — it's either a "web safe" font that's already installed on your readers' computers/devices, or the font is loaded with your web page as a custom web font.

Web Safe Fonts

Web-safe fonts are fonts that just about everyone has on their computer or device. If you want to use a font stack of web safe fonts, check out CSS Font Stack, where you can copy pre-made font stacks of similar serif, sans serif, or monospace fonts (the "fantasy" and "script" offerings aren't quite as reliable, so skip those).

Using one of those font stacks, you can be reasonably sure that your readers will all have a similar reading experience on your blog.

The "web safe" fonts may seem a bit boring, but there are advantages to playing it safe. Web-safe fonts don't require any extra code, which makes them easier for you to implement. And, less code means quicker load times!

Custom Web Fonts

When web-safe fonts won't cut it, you can use a custom web font. There are tons of web font options available — Google Web Fonts alone has over 600 free fonts to choose from — and the design possibilities are endless.

Custom web fonts really shine when they're used instead of images for decorative text elements. Using a font instead of an image for decorative text improves the accessibility of your site — readers who use translation services to read your blog will be able to translate the text, and readers with visual impairments will be able to access your text.

Most web font services have comprehensive instructions for installing and using their fonts, so I won't get into installation details here (though I do have a tutorial on installing Google Web Fonts if you'd like to use them!). But, I am going to give you one tip that they don't always cover in web font documentation.

Building a Font Stack for a Custom Font

When you use a custom font, you should still build a font stack for it so that readers who can't (or just won't) load your custom font will have a reasonably stylish experience on your blog. Custom web fonts are fairly reliable, but sometimes the source file fails, or your reader has disabled JavaScript, or something else interferes and your reader can't see your custom font.

If you don't provide fallback fonts and your custom font fails for whatever reason, your readers will just see whatever their browser wants to show them as a default. Often, that's not pretty!

At the bare minimum, you should specify a generic fallback font for a custom web font, like serif or sans-serif. So, for example, if I wanted to use the lovely Google Web Font Josefin Slab, a minimal font stack would be:

h3 {
font-family: "Josefin Slab", serif;
}

I went with a serif fallback because Josefin Slab is a serif font. If I were using Josefin Sans, a sans serif, I'd choose sans-serif as my fallback.

If you've studied CSS fonts before you probably know that there are other generics, but serif and sans-serif are the most reliable. Fallbacks like "cursive" and "fantasy" often display as quirky fonts like Comic Sans or Impact, so it's best to stick with the classics.

I could improve this font stack by including fonts that are fairly similar to Josefin Slab and are commonly installed on PCs, Macs, and web-enabled devices. With a little bit of research, I was able to find Rockwell, a fairly common font that has similarities to Josefin Slab, and Courier New, an extremely common font that isn't quite as pretty as Josefin or Rockwell, but would do in a pinch.

h3 {
font-family: "Josefin Slab", Rockwell, "Courier New", serif;
}

Using that font stack, I know that most of my readers will see my custom font, but those who don't will see a reasonable substitute.

Try It Out!

I've put together a simple Codepen demo for you to play with. This demo includes two HTML elements: a heading and a paragraph. Each has a different font stack assigned to it.

Try changing the font families to web-safe fonts or fonts you have installed on your computer. If you really want to challenge yourself, try adding a custom web font (hint: you can use @font-face in Codepen)! If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

<h3>Change this font family!</h3>
<p>This paragraph could look nice with a different font family, too. Why don't you change it?</p>Check out this Pen!

What's Next?

In part three, you'll learn how to use font-size, font-weight, font-style, and font-variant to fine-tune your new font's appearance. Move on to Blog Font Style with CSS - Size, Weight, and Style

Blog Font Style with CSS - Finding the Selectors

This is Part One of the five part Blog Font Style series.

The first step to styling your text with CSS is finding the selector for the text. If you're new to CSS, that sentence probably doesn't mean much to you, but by the end of this post it will!

Today, I'm going to show you how to use Firefox or Chrome's developer tools to identify and use CSS selectors to style your blog's text.

What's A CSS Selector?

CSS is organized into rules. Here's an example rule:

h3 {
font-size: 35px;
}

The selector is the first part of a CSS rule. In the example above, "h3" is the selector.

When a browser sees a CSS selector, it knows to apply the styles inside the rule's curly braces to all of the elements on the page that match the selector. In this example, it would size every level 3 heading (h3) on the page at 35 pixels.

So, how do you know what selector to use? Let your browser's developer tools show you!

Using Developer Tools

Firefox and Chrome both have built-in developer tools that can help you identify the right selectors to use to style the font on your blog.

Overall, the developer tools in Firefox and Chrome are very similar. I use them both and I don't have a preference between the two. I'll show you examples of both so you can decide which one works best for you.

With Firefox

To use Firefox's developer tools, right click on the text you want to style and select "Inspect Element" from the dropdown menu. A "Developer Tools" window will pop up on your screen. On that screen, you'll see your blog's HTML markup. The element you selected is highlighted. In this example image, you can see that I've selected a level three heading (h3) with the classes post-title and entry-title (click image to enlarge).

If you move the developer tools window, you'll also see that your element is now highlighted on the page, too. The tooltip above the element tells you what kind of element it is, and the class(es) or ID associated with the element.

With Chrome

To use Chrome's developer tools, right click on the text you'd like to style and select "Inspect Element" from the dropdown menu. Your browser window will split in two, with your live site up top and your blog's source code down below (click image to enlarge).

Your element is now highlighted in the source code view. In the example image above, you can see that I've selected a level three heading (h3) with the classes post-title and entry-title. If you hover over that line in your source code, you'll see it highlighted on your live site, too.

Trying New CSS Rules

Now that you've selected the element you want to style, you can try out new styling inside developer tools without changing anything on your live site. This is great because you can experiment as much as you like without messing anything up!

In both Firefox and Chrome developer tools, you can test a new rule the same way. For this example, I'm going to change the font size of the h3 element I selected above to 35 pixels.

Both developer tools sets display the CSS rules for your page in a sidebar panel to the right. At the top of that panel, you'll see an empty rule with the selector element (on Firefox) or element.style (on Chrome).

Any rules you type into that empty selector will be applied to the highlighted element. So, for example, with the h3 element selected, anything you type in the element or element.style rule will apply to that h3 element.

So, let's change the font size of my post title to 35 pixels. On Firefox, I'd enter font-size: 35px; inside the element curly braces. On my blog, I'll see the heading font size increase instantly to 35px.

On Chrome, I'd type font-size: 35px; inside the element.style curly braces, and the heading size increases to 35 pixels.

Adding a New Rule to Your Blog

Once you've settled on a new rule for your blog, you can add it to your blog's CSS. If you're on Blogger, go to Template > Customize > Advanced > Add CSS and enter your new CSS rule. On Typepad, go to Design > Custom CSS. On Tumblr, go to Customize > Advanced > Add Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

If after playing around with the size I decided I liked my h3 elements to be 35 pixels on my blog, I'd write it like this:

h3 {
font-size: 35px;
}

Looks familiar, right? That's the example rule I showed at the beginning of this tutorial. This would size every h3 element on my site at 35 pixels.

If I had multiple h3 elements on my page, and only wanted to style my post title h3 elements at 35px, I'd select them like this:

h3.post-title {
font-size: 35px;
}

You may have noticed from the developer tools screenshots that I could make the rule even more specific by selecting the h3 elements with h3.post-title.entry-title. But, I don't actually have to get quite that specific on this blog. That will vary from blog to blog, though.

Give It A Try!

Open up your developer tools in your favorite browser and play around with the style on any website — mine, yours, the New York Times, whatever! Spend some time inspecting elements and changing their size and color. You can't hurt anything with developer tools, so feel free to experiment.

If you're using Firefox's developer tools and you'd like to learn more, check out Virtual Blog Makeovers with Firefox.

What's Next?

Believe it or not, you just finished the hard part! The next step is to learn how to choose your font using the font-family declaration. Move on to Blog Font Style with CSS - Font Families

Blog Font Style with CSS - A Tutorial Series

Blog Font Style is a 5 part tutorial series on styling text with CSS. This series is designed for absolute beginners — no CSS experience necessary!

Table of Contents

• Finding the Selectors: the first step to styling your text is selecting your text! I'll show you how to find the right CSS selector using the developer tools built into Firefox and Chrome.
• Font Families: Tell the browser what font to show with a well-built font stack.
• Font Size, Weight, Style, and Variations: Take finer control of your new font's appearance.
• Line Height, Spacing, Alignment & Indentation: Typesetting options for advanced typography.
• CSS Text Effects: decorations and Photoshop-inspired effects for ultra-stylish text.

Technical Requirements

If you can add CSS to your blog, you can use these tutorials. Blogger, Wordpress, Typepad, and Tumblr users, you're good to go. Wordpress.com users will need the premium Custom CSS option to add CSS. And, of course, CSS is not just for bloggers — any website owner who has access to their site's CSS can use these tutorials.

Get Started!

Ready to get to it? Start with Finding the Selectors.

All About Disclosing Sponsored Posts

When you write a sponsored post, you need to let your readers know that you received compensation or a product in return for the post. It's not just good manners — if you live in the United States, it's the law.

And, no matter where you live in the world, you need to disclose paid links to search engines. If you don't, you risk damaging the search engine ranking of your own blog and your sponsor's website.

There's been a little bit of confusion lately about what exactly you're supposed to do to disclose sponsored posts. Your responsibilities as a blogger are actually quite simple. Here what to do:

Let Your Readers Know When You're Paid to Post

If you receive money or a product from a business or person, and you blog about them, you need to disclose — up front — that money or product was given to you by that company or person.

The easiest and most direct way to do this is to put "Sponsored" or "Ad" in your post title, and a brief description of how you were compensated in the first paragraph. If your post is long and your readers will need to scroll between the disclosure and the link to the sponsor, add another brief disclosure before the link to your sponsor.

I've seen some tutorials that suggest using an image to disclose a sponsored post. While that's an eye-catching way to do it, it's incomplete if you don't include alt text for the image. Images without alt text are not available to readers with visual impairments who use screen readers to browse the web. You need to make sure that all of your audience is notified that your post was sponsored.

BTW, The FTC Guidelines for Sponsored Blog Posts Haven't Changed

In March 2013, the FTC released a new set of guidelines for advertisers, ".com Disclosures: How to Make Effective Disclosures in Digital Advertising", and this made many bloggers think that the guidelines for sponsored blog posts had changed.

Sponsored blog posts and endorsements are still subject to the guidelines in the "Guides Concerning the Use of Testimonials in Advertising", which was released in 2009. If you're already familiar with those guidelines, you're probably already doing everything right.

There is one small new detail in the new document about disclosing sponsored links on social media. All you need to do to disclose those properly is add "Ad:" or "Sponsored:" to the beginning of the social media post. Piece of cake, right?

Identify Paid Links for Search Engines

Search engines penalize websites that don't disclose paid links, and those penalties are applied to the both blog that posts the undisclosed link and the advertiser whose link was not disclosed.

All you need to do to avoid this problem is add the rel="nofollow" attribute to your paid link. Last year I wrote a detailed tutorial on adding nofollow to links, but in a nutshell, you add rel="nofollow" inside your link to your sponsor, like this:

<a href="http://www.sponsor.com" rel="nofollow">My Awesome Sponsor</a>

You can read more about Google's policy on paid links and "link schemes" in the Webmaster Tools knowledge base.

Update - May 29, 2013:

Google's webspam team leader, Matt Cutts, posted a video that goes into more detail about how Google wants you to disclose your "advertorial" content:

What If My Sponsor Doesn't Want Me to Disclose?

Drop them like a hot rock and don't feel sorry about it.

The FTC guidelines are designed to compel advertisers to tell the truth about their products, and let people know when the media they're consuming is an advertisement. The search engine guidelines help prevent sites from getting an unfair advantage in search engine results. If your sponsor won't be honest with your readers and compete fairly, they don't deserve space on your blog.