Beautiful Examples of Inset Typography in Web Design

Sep 15 2009 by Jacob Gube | 38 Comments

Inset typography, or letterpress typography, is a type treatment trend where text is made to look impressed into a surface. When used correctly and creatively, it leads to a captivating and engaging reading experience, able to bring attention to key textual content.

In this collection, you’ll see a great number of examples (23 of them to be exact) that utilize the inset typography/letterpress typography style in web design for a variety of situations.

If you’d like to learn how to make inset type, check out the tutorial on how to create inset typography in Photoshop.

1. Epic Event

Epic Event

2. Remix Creative

Remix Creative

3. Show & Tell

Show & Tell

4. Graphik


5. 365 Days of Astronomy

365 Days of Astronomy

6. Owltastic


7. Sarah Longnecker

Sarah Longnecker

8. Mike Matas Blog

Mike Matas Blog

9. For A Beautiful Web

For A Beautiful Web

10. MetaLab


11. Helmy Bern

Helmy Bern



13. Campaign Monitor

Campaign Monitor

14. Thuiven


15. Apple


16. Postbox


17. Digimurai


18. Common Good Radio

Common Good Radio

19. Marc Mendell

Marc Mendell

20. 280 Slides

280 Slides

21. Deaxon


22. Bohemian Coding

Bohemian Coding

23. Bravura Coaching & Image

Bravura Coaching & Image

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in distance-learning education, front-end development, and web accessibility. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.


Website Design Uk

September 15th, 2009

Often it can look really naff, but most of these examples have been executed beautifully, Jacob.

Excellent work! Stumbled.


September 15th, 2009

great article!!im a big fan of inset typo!

Tim Read

September 16th, 2009

Thanks Jacob. My favourite is Bravura’s ‘be Amazing’ – nice contrast between the smooth background and the indented text with its very round font.

Ashely Adams

September 16th, 2009

Letterpress has managed to retain a niche following even after all these years. Is it surprising then that the effect that had taken the world of printing by storm, would make its presence felt in digital designs also? Nice collection Jacob.


September 16th, 2009

Very impressive websites! I wish the tutorials found on the net for building clean/typo websites included building something as elegant as the ones above…

Jacob Gube

September 16th, 2009

@Website Design Uk: I’m thinking “Naf” is a British term that’s equivalent to “cheesy”. If I’m right, I agree with you: inset typography can look bad if done wrong.

@Tim Read: If I had to pick my top fave out of the bunch, it would be Epic Event – I like how the lighting varies horizontally which gives attention to the text without overpowering the entire top half of the web design.

@Ashely Adams: Indeed it’s amazing. I like how older design techniques from other mediums (such as print) makes it onto the web – if you’re a design geek who follows these things, it can be quite mind-blowing how these things interdigitate and borrow from each other. One other example I can think of is designing layouts on a grid, which was a concept developed around the World War II era to streamline the creation of print layouts and creating logical order in placing design elements.

@Nick: Check out this tutorial published yesterday, it might just fit the bill: How to Make a Light and Sleek Web Layout in Photoshop. If that’s not what you were thinking of, expound on what you want to see a bit more and I’ll see what I can do.


September 16th, 2009

My favourites are #2 and #5, just perfect !

Milly Vanilly

September 16th, 2009

Ahhhhh, * SIGH * – can you say played out? Aren’t you people sick and tired of seeing the same “inset type”, “wood background” , “sparkly”, “over-designed”, copy cat crap? Everything looks the same, very little originality.

Hate to be the Hater, but it NEEDS to be said. How about recognizing work that doesn’t look like every lame “web 2.0″ site out there?!?!


September 16th, 2009

Thanks Jacob for sharing those useful links.

pom web design

September 16th, 2009

some great additions, thanks for sharing..


September 16th, 2009

Thanks for featuring remix amongst such beautiful designs!


September 16th, 2009

I’ve always liked this site as well. There’s a good sense of depth to the design. The inset type contrasted by the floating ‘drop shadow’ cloud above is quite pleasing.

Kris Todd

September 16th, 2009

I bet that the very first featured website for Epic Event will now wish that they didn’t have a major typo in their headline!


September 16th, 2009

I like how these examples make good use of debossing without it screaming in your face but I wouldn’t call it letterpress. Letterpress printers traditionally aim to make that debossing minimal to the point of invisibility. The heavy debossing on wedding invitations just appeared over the past few years after centuries of printers regarding it as a defect.


September 16th, 2009

Beautiful examples Jacob!


September 16th, 2009

I heart inset typography. Makes me want to buy a letterpress machine. Here’s another great example:

Website Design UK

September 16th, 2009

lol…I didn’t know until now that ‘naff’ is just a British term.

Anyway, you interpreted correctly.


September 17th, 2009

Nice set of websites. But I think, the effect is in danger to be overused, allthough the examples are very nice…

Website Design UK

September 17th, 2009

Submitted to CSSGlobe for you, Jacob. Thought it was worthy.

Jacob Gube

September 17th, 2009

@Milly Vanilly: Someone had to say it, I appreciate your candidness.

@Angela: That means a lot coming from the site owner of!

@Website Design UK: Thanks for the submission to CSSGlobe.

Mohsen Moridi

September 18th, 2009

amazing designs

Marc Mendell

September 19th, 2009

Hey there – thanks for including my site. I think the point that it is overused has some truth – but there is a time and place for everything. I am drawn to it as a method to achieve subtle depth – however, I like to think that doing so is to achieve this look and not simply to include a bevel. That said… This is how I did it…

PSD source file:

1. Background layer – in my case wood
2. Text layer 1 – some outer emboss to form the outer edge
3. Some pillow emboss to create the edge that the light is hitting
4. Clip the any background pattern within the inset layer that has an inner shadow opposite the
edge that the light is hitting.
5. Duplicate the pattern layer / set to multiply and lower the opacity – This darkens the inside in such a way that makes it look like it is at lower depth level then the wood above.

For #5 – notice I offset the pattern of the wood about 5px over and down… this just adds to the idea of depth since the seams would not perfectly line up given that the notched part is lower then the top surface.

The colors I use in the strokes and outer blurs are relative to the colors found in the background – but the opacity and brightness of actual color based on what looks good in the specific situation.

I hope this helps – I started as a traditional illustrator, and try to think of how things look based on how & what direction the light source is – as well as what the patterns are etc.


September 20th, 2009

Anyone know of a good GIMP tutorial for Inset Text?

Chris Spada

September 22nd, 2009

Some really nice examples. Starting to see this treatment everywhere but love the texture it adds.

Cheap Web Design UK

October 16th, 2009

it really looking beautiful,
like the remix most,.


October 17th, 2009

A good overview of inset typo.

LOL! Somehow I get the retro, deja-vu feeling for my first Photoshop Tips & Tricks book, showing me how to do stuff like inset type. Geez… that was at times where PS hugged version 2.0!

Seems history always repeats itself… just like in every design area (see clothing trends, shoe trends and especially color-related trends).

Oh well, I guess I better dig out my old designs and start re-selling them to new clients! ;)


January 5th, 2010

All the sites look pretty amazing, especially metalab.

Vibe web design

September 15th, 2010

Beautiful examples Jacob!


October 6th, 2010

Often it can look really naff, but most of these examples have been executed beautifully, Jacob.


February 8th, 2011

Thanks for sharing Jacob, some really good pieces of work there.


June 19th, 2011

thanks for sharing very good :)


June 21st, 2011

Been looking how to do this for ages! Will try it out in Fireworks see how this goes, page bookmarked – thanks.


July 24th, 2011

@stephen, this tutorial is what you’re looking for:

Jason Hegarty

August 23rd, 2011

Thanks for this! bookmarked!

Marcus Green

September 22nd, 2011

Design inspiration central!

Thanks for sharing – pumped with ideas now.

John Smith

November 8th, 2011

What a fantastic website.

One to bookmark!

Leave a Comment

Subscribe to the comments on this article.