10 Wonderful Letterpress Type Tutorials

William Craig

CEO & Co-Founder
4 minute read
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.

The letterpress type treatment (or as I call it, inset text treatment) can be easily done in Photoshop. In this article, you’ll find a collection of tutorials from various parts of the web that will teach you how to create this awesome text effect using common graphics applications (and a couple using just CSS). Check out my own tutorial here on Six Revisions called How to Create Inset Typography in Photoshop.

You may also want to peruse the Beautiful Examples of Inset Typography in Web Design collection for design inspiration and usage examples.

1. Web Design Trend Showcase: Letterpress Text Effect

The Line25 Web Design blog has a tutorial and showcase all-in-one article that features great examples of the text effect as well as a method for creating it in Photoshop.

2. Create a Sleek Pressed Letter Design

Create a Sleek Pressed Letter Design MyInkBlog, a great resource for graphic and web designers, regularly publishes awesome tutorials and one of them that features a see-through letterpress text effect.

3. Creating Editable Letterpress Styled Text in Illustrator

Creating your text in Adobe Illustrator lends you flexibility in resizing it without loss in fidelity. Learn to create the letterpress effect in Illustrator with this tutorial.

4. Grooveshark Design Style in Fireworks

Grooveshark Design Style in Fireworks Inspired by Grooveshark’s old user interface, this Adobe Fireworks tutorial walks you through the inset effect that design.

5. Letterpress Emboss Text Effect

Some individuals learn best by viewing video tutorials and here’s one that will walk you through the creation of the letterpress text treatment in real time.

6. Typography Inset-Advanced Photoshop Techniques for Web Designers

Typography Inset from 5 Advanced Photoshop Techniques for Web Designers This article from Carsonified goes through five different Photoshop techniques for web designers, one of them being how to make the inset text effect.

7. Create a Letterpress Effect with CSS Text-Shadow

If you already use CSS3, this tutorial will teach you how to create the letterpress effect by using the text-shadow property and a simple png background (made in Photoshop).

8. Create Letterpressed Type Using Only CSS

Create Letterpressed Type Using Only CSS This tutorial recreates the inset text/letterpress effect using only CSS2 specs.

9. Two Simple Ways to Create Text Embossing Effect

Two Simple Ways to Create Text Embossing Effect In this tutorial, you’ll find two methods on how to create the letterpress/inset text effect.

10. Quick tip: Inset Shapes, Lines and Text

Quick tip: Inset Shapes, Lines and Text Here is another method for creating the inset text effect applied not only to text, but also to Photoshop’s preset shapes/brushes and lines.