Beautiful Examples of Inset Typography in Web Design

Sep 15 2009 by Jacob Gube | 38 Comments | Stumble Bookmark

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

2. Remix Creative

3. Show & Tell

4. Graphik

5. 365 Days of Astronomy

6. Owltastic

7. Sarah Longnecker

8. Mike Matas Blog

9. For A Beautiful Web

10. MetaLab

11. Helmy Bern

12. NOSOTROS

13. Campaign Monitor

14. Thuiven

15. Apple

16. Postbox

17. Digimurai

18. Common Good Radio

19. Marc Mendell

20. 280 Slides

21. Deaxon

22. Bohemian Coding

23. Bravura Coaching & Image

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.

38 Comments

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.

rasmus

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.

Zoltan Sebestyen

September 16th, 2009

One more example: psd web layout design

Nick

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.

Stephane

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?!?!

Sean

September 16th, 2009

Thanks Jacob for sharing those useful links.

pom web design

September 16th, 2009

some great additions, thanks for sharing..

Nik

September 16th, 2009

Thanks for featuring remix amongst such beautiful designs!

Mapk

September 16th, 2009

I’ve always liked this site as well. http://www.ichange.com/ 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!

Alistair

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.

Angela

September 16th, 2009

Beautiful examples Jacob!

dv

September 16th, 2009

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

Website Design UK

September 16th, 2009

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

Anyway, you interpreted correctly.

Webdesigner

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 BestDesigns.com!

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

Mohsen Moridi

September 18th, 2009

amazing designs
tanx

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: http://dl.getdropbox.com/u/293170/Wood.psd

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.

Steven

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

yeah
it really looking beautiful,
like the remix most,.

e-sushi

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! ;)