Menu

Beautiful Examples of Inset Typography in Web Design

Advertisement

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

Graphik

5. 365 Days of Astronomy

365 Days of Astronomy

6. Owltastic

Owltastic

7. Sarah Longnecker

Sarah Longnecker

8. Mike Matas Blog

Mike Matas Blog

9. For A Beautiful Web

For A Beautiful Web

10. MetaLab

MetaLab

11. Helmy Bern

Helmy Bern

12. NOSOTROS

NOSOTROS

13. Campaign Monitor

Campaign Monitor

14. Thuiven

Thuiven

15. Apple

Apple

16. Postbox

Postbox

17. Digimurai

Digimurai

18. Common Good Radio

Common Good Radio

19. Marc Mendell

Marc Mendell

20. 280 Slides

280 Slides

21. Deaxon

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.

This was published on Sep 15, 2009

38 Comments

Website Design Uk Sep 15 2009

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

Excellent work! Stumbled.

rasmus Sep 15 2009

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

Tim Read Sep 16 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 Sep 16 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 Sep 16 2009

One more example: psd web layout design

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 Sep 16 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 Sep 16 2009

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

Milly Vanilly Sep 16 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?!?!

Thanks Jacob for sharing those useful links.

pom web design Sep 16 2009

some great additions, thanks for sharing..

Thanks for featuring remix amongst such beautiful designs!

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 Sep 16 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 Sep 16 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 Sep 16 2009

Beautiful examples Jacob!

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

Website Design UK Sep 16 2009

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

Anyway, you interpreted correctly.

Webdesigner Sep 17 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 Sep 17 2009

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

Jacob Gube Sep 17 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 Sep 18 2009

amazing designs
tanx

Marc Mendell Sep 19 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 Sep 20 2009

Anyone know of a good GIMP tutorial for Inset Text?

Chris Spada Sep 22 2009

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

Cheap Web Design UK Oct 16 2009

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

e-sushi Oct 17 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! ;)

All the sites look pretty amazing, especially metalab.

Vibe web design Sep 15 2010

Beautiful examples Jacob!

martha Oct 06 2010

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

Staffordshire Feb 08 2011

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

Elaine Jones May 21 2011

Stunning!

vivedesigns Jun 19 2011

thanks for sharing very good :)

Reynolds Jun 21 2011

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

@stephen, this tutorial is what you’re looking for: http://www.freshpage.co.uk/inset-typography-inset-text-with-gimp

Jason Hegarty Aug 23 2011

Thanks for this! bookmarked!

Marcus Green Sep 22 2011

Design inspiration central!

Thanks for sharing – pumped with ideas now.

John Smith Nov 08 2011

What a fantastic website.

One to bookmark!

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners