101 Examples of Text Treatments on the Web

Design, Typography, Web Design | Apr 21, 2009 | 70 comments

Typography is often a deciding factor in the success of a design. Its importance cannot be overstated. Effective typography can be achieved in so many different ways, as demonstrated in the 17 different categories below.

Some of the most common ways to treat type is with size, color variation, creative illustrations, and use of textures. The examples below are just the tip of the iceberg as far as the possibilities for type.

Don’t be afraid to flip it, color it, resize it, draw it, or even design your own.

Check out these fantastic 101 examples of beautiful text treatments and please let us know of any other great examples we may have missed.

1. Illustration

2. Background Shape

3. Color Change

4. Font Variations

5. Handwritten

6. BIG

7. Textures

8. Big vs. Small

9. Alignment

10. Overlay/Transparency

11. Angles and Curves

12. Highlight

14. 3-D

14. Custom & Unusual Fonts

15. Outline

16. Old Style/Western

17. Slashed Out

Combination of Techniques

Compiled exclusively for WDD by Michael Shelton. Michael is a freelancer web designer and runs his own website at Michaeladesigns.com

What’s your favorite method? What other ways can you think of to handle type other than the categories listed here?

Share this post

Comments

http://mau.cristalab.com/ M@U

An epic post, I love this list! :O
*Emm, captcha?
- http://www.webdesignerdepot.com Walter
  
  Had to go back to captcha – too much spam…
http://sidekickblog.com kunal

Great roundup. I love some o fthose big blocky fonts. Any idea if there are any such available for free (for eg. the first one under ‘Big vs. Small)?
- http://www.webdesignerdepot.com Walter
  
  There’s tons of fonts at http://www.urbanfonts.com
http://www.woopidoo2.deviantart.com,jelleboontje.nl Jelle

I enjoyed going through these, great collection.
http://www.patternhead.com Patternhead

Great design inspiration, thanks :)
Almudena

Always great to watch!!!
http://www.mytmg.net MyTmG.net

Very nice collection! Thanks WDD
http://www.cjscreativemall.com chirag

Hi WDD,

I am happy to see my website in your Text Treatments article. I am always read your blog and learn so many new things.

Thank you so much.
http://freelancercrowd.com/community/classifieds/ Crowd

Very nice and useful list!
http://www.youandigraphics.com/ Irene Demetri

Great post!
http://golchitech.blogspot.com golchi

Original text designing, I personally loved “informal” ones like:
http://www.psyop.tv/main.php
http://www.adf.lt/
http://logocranium.com/
http://www.sandersdesign.com Martin – Sanders Design

A stunning collection of original designs, thanks for the inspiration
http://webx.pl webx

The best collection! Thanks!
http://www.borat-bruno.com Borat

Very nice webpages and designs.. Hope one of my websites will be here, when I update design :-D
http://www.patrick-l.de Patrick L.

The second of the 6. Category (BIG) is wrong linked. :/
http://www.webcoursesbangkok.com Carl

Another thing is experimenting with transparency, embossing and also leading … lots to play with!
http://www.we-des.net Gianmarco Simone

Great, great, great post :D
http://www.exxcorpio.com Luis Eduardo

Great source of inspiration, and treatment of typographie, with soo many diferent kind of styles, colors and everything, I hope i’ll have tons of ideas, for new designs.
Great examples
Other cool way could be like text and photographie, or substraction, or grid based.
http://profiles.friendster.com/haniemaj22patent haniemaj22

This one really helps and I LOVE IT! Thanks! ^-^
http://www.doublejdesign.co.uk/ Jack

These are fatanstic!!!! Very nice list. Thanks a lot.
http://www.glasshills.co.uk Jack

Awesome collection – really inspiring!

The very first one I thought looked a bit out of place – not the same visual quality as the rest at first glance but having looked again and visited the website (to actually see how it works) it is very impressive. National Television site has some very interesting and colourful works though less typographical than the rest.

Thanks for putting this together – going to use this as a resource and a point of reference for some work.
http://www.cdpradeep.com/ Pradeep CD

Awesome list…

I have never seen designs like these before…

really inspired… thanks
jeraldo

am i the first one to comment here? haha!
what an eye candy! very beautiful pieces of art.
- http://www.webdesignerdepot.com Walter
  
  Not the first one, you just posted during my night time so I couldn’t approve comments…
http://www.bioinfiz.com bs kishore

Truly an awesome list !
http://www.SelectCeremony.com Wedding Photographer

Wow, It will take me a week to go through all these designs but I already have a few really good ideas from it.
http://dezinerfolio.com Navdeep

Beautiful!

@3drockz
http://www.hotpressweb.com Denver Web Designer

Now that is a list! Great inspirational stuff here.
http://www.smejemesenainternetu.cz Zábávná videa

Very nice and inspiration gallery! Thank, respect+
http://www.osvaldas.info Osvaldas

Great feeling to see my site (osvaldas.info) on the list. Thanks a lot!
http://www.cahcepu.com om ipit

typography make me feel free….
i love this showcase…
thankz WDD…
http://www.iztoksmolic.com/ Iztok

I’m kinda jeleous of people being so creative in visualizing their ideas. Great stuff.
http://www.madrigal.com.au Tim

Very creative and clever use of the alphabet!
Ron

Wow great post – i like the type on the inmeres homepage just above the car. Indexable flash, nice.

http://www.inmeres.com
http://design-notes.info alex

great collection
http://www.aledesign.it aledesign.it

wow wow wow, amazing..fantastic!
http://photorestorationretouching.com/ photo retouching

what an impressive collection of fonts and how to use them. I am bookmarking this page as a permanent source of inspiration!
http://designwashere.com Design was here

Wow! Really great post!

Made me realize of so many impressive use of type in web design.
Great post! :)
http://www.hamroawaaz.com Rahul

Too good. A super article.
http://www.przyroda.org.pl Sklep Zoologiczny

Great examples. Indeed typography is essential to succeed in designing.
http://www.danolsavsky.com Dan o.

Typography, implemented correctly, is one of the most important design elements on a website. Thanks for the article, it reveals many of the modern techniques that are being used recurrently.

I am intrigued by the background shapes (#2) because occasionally I will have text that will blend in with a background. It frustrates the heck out of me when this happens, especially if it is text over an image. Often times I will add an outer glow or a stroke but that style is getting old. I specifically like the technique used by Designphunk. The text clearly stands out and is easy to read and the transparency effect is still preserved.
http://elysiumburns.com Sean Baker

Thanks for including me on this list, especially with such esteemed company! Much appreciated. Keep up the stellar articles and resources for the community!
http://www.samacreation.com sama creation

impressive collection thanks
http://www.cgtrade.net imsraaia

nice article… thanks…
http://networkinglesson.com andy

This post is worth a favorite.

Thanks!
joshua

Great work! thanks a lot.
http://www.bcandullo.com Brad

Great stuff. Thanks for the inclusion.
http://www.crearecommunications.co.uk Adam – Creare Engine

That’s given me some great inspiration, I might bookmark this page. It’s amazing what colour and shadow can do to bring out text on any website. Those illustrations are beautiful.
http://karljoneslive.com Karl

That was super. What I find was many of these samples allowed me to re-visit places, times, and experiences I had had.
http://lithuanian-coins.blogspot.com/ Andrew

Great examples!
http://www.freexstitchpattern.com masheko

wow… the great collections. It gives me inspirations. Thanks.
matt parsons

that’s one big heap of inspiration up there /\
http://styleablaze.com tamuir

Thanks for featuring our website.
Marcelle

Nice !
http://www.igoy.in/about/ Yogesh Mhatre

Amazing Concepts.. I should consider using them at my site!!!
http://rajdipmitra2007.blogspot.com/ Rajdip Mitra

Beautiful thought. Realy its very good. It wll help us more and more.

Thanks,
Rajdip
http://www.photorestorationretouching.com/virtual-tour-company.html virtual tour company

A really good example of creative text!
http://www.mushroomdigital.co.uk mushroom website design

Thanks for compiling all this. An inspirational collection undoubtably! Brialliant!
http://www.webtechnepal.com webtechnepal

Great Example collections. thank you so much.
http://spotword.blogspot.com Vikram Singh

Well It is Very Inspirational article I don’t have any idea about designing but after reading this article i think i should better start designing…………….
http://www.prontanet.lt Svetainiu kurimas

Easy when someone shows you how. Thanks and keep it up.
http://ezinearticles.com/?Natural-Colon-Cleanse---The-Best-Natural-Colon-Cleanse-Method-That-Really-Works&id=2711200 Colon Cleanse

wow…i cant believe this…this is amazing
http://twitter.com/arunkrishnans Arun Krishnan

nice….very inspirational…
Justin

Wow. This post blew my mind and is one of my all-time favorites at the moment.

THANK YOU!
http://www.colegiodewebmasters.com rector

Really nice, I neve knew one could do so much with only text,
Good work.
http://www.offtheme.com off topic chat

I really wish I had the creative streak in me. Some of those examples are just amazing. Thanks for sharing such a fantastic selection. :)
http://www.htcdesirecase.net/ Salman Aslam

Superb, seriously amazing :)
http://www.topranker.in seo

Great post
i will never see this type of collection
thanks for sharing
http://etuinokian8.wordpress.com/ housse n8

Very impressive !! Great job

	Young, modern, I like them.
	Not sure, I hope they'll grow on me.
	Ugly, looks like a tie-dye T-shirt.