How to Make Your Text Appear Letterpressed with CSS

Image courtesy of Hello Big Idea Want more free image resources?

Letterpress is so HOT right now!

Well actually it’s always been hot in the print world, I’m sure you’ve seen the effect in plenty of wedding invitations and business cards.

According to How To Design, “Letterpress is a centuries-old method of printing using mainly hand-fed presses to create tactile relief prints. Originally, each lead or wood character would be set by hand, one-by-one…”

These days you can achieve the same look digitally. If you look, there are TONS of tutorials showing you how to achieve the look in Photoshop or Illustrator.* But what about doing it digitally within your own blog? Right on the text already in your blog.

Imagine what your text tagline or widget titles would like with a super cute letterpress effect!

Let’s get started…

Set Up The Space

You will want a medium to dark colored background for contrast. This effect doesn’t work on light colored backgrounds because the white is what creates the effect. The background color doesn’t have to be that dark, just dark enough to contrast with the white.

If you want, you can also use a paper texture background* (afflink) for an even more “real” letterpress look.

The text must be darker than the background and should have decent contrast.

If you’re completely new to CSS, you may want to look over this beginner’s CSS tutorial first real quick and download the free cheat sheet.

The HTML

You’ll need to switch your blog editor to Text or Code mode.

What we’re doing here is creating our background block and text.


<div class="letterpress">
   <p>Beautify Your Blog on a Budget!</p>
</div>


The CSS

Learn to add custom CSS to your blog with this tutorial.

Now we’re giving our block a background color and setting up our font styles by giving it a font, a color, a size and then centering it (just because). Obviously you’ll use the fonts, colors and styles that you wish to use.


div.letterpress {
   background: #474747;
}

div.letterpress p {
   font-family: 'Nixie One', serif;
   color: #888;
   font-size: 2em;
   text-align: center;
}


Letterpressing the Text

Let’s add one more line of CSS to create the letterpress effect. In order to do this, we’ll need to add a shadow in a color that’s lighter than the text color. I usually use white, but you’re welcome to play around and see what suits you.

The CSS

To define our text-shadow, we declare it like this, in this order:


text-shadow: x-offset y-offset rgba(color, alpha transparency)


Using alpha transparency allows the shadow to blend a little into the background.


div.letterpress p {
   font-family: 'Nixie One', serif;
   color: #888;
   font-size: 2em;
   text-align: center;
   text-shadow: 1px 1px rgba(255,255,255,0.8);
}


255, 255, 255 is the RGB value for white and I’ve given it 80% opacity using 0.8. To lower the opacity to 50%, you would use 0.5. And to do full opacity (no transparency at all), you’d give the value a 1.

Instead of using a hex code for our color, we need to use RGBA which allows us to add transparency to the color. RGBA stands for Red, Green, Blue, Alpha (opacity).

In order to find out what the RGB value is for a color, use this handy quick tool: Hex to RBG.

Voila the Result!

The effect is just as nice on thicker fonts too:

Remember:

The font color should be darker than your background color and the shadow must be lighter than the font color.

Caveat

Most modern browsers support this CSS3 effect, except for IE9 and below (why am I not surprised?) so you’ll want to make sure that there is enough contrast between the text color and the background so it’s still legible for those that can’t see the light shadow.

Super Simple, Right?

So there you have it: the letterpress effect in CSS.

Guess what? You can use this effect on more than just text. Say whaaaa?

Yep, you can use it on shapes and icons too right in your blog using CSS. If you’re curious to learn how to do this plus a whole bunch of other cool stuff using just CSS, sign up for my free CSS Video Training Series!

Got questions or just want to share what you’ve done? I’d love to see a link to it! Share with us in the comments below!