101 Examples of Text Treatments on the Web | Webdesigner Depot

21 Apr
101 Examples of Text Treatments on the Web
Design, Text Effects, Typography
Tweet View 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 story
Tweet
Related Posts
Terrific Illustrative Type by Alex Beltechi The most popular fonts used by designers 10 Web Typography Rules Every Designer Should Know
- http://mau.cristalab.com/ M@U
  An epic post, I love this list! :O
  *Emm, captcha?
- 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.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
- 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
- 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.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://www.webdesignerdepot.com Walter
  Had to go back to captcha – too much spam…
- http://www.webdesignerdepot.com Walter
  There’s tons of fonts at http://www.urbanfonts.com
- http://www.webdesignerdepot.com Walter
  Not the first one, you just posted during my night time so I couldn’t approve comments…
- 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
blog comments powered by Disqus
TOP OF PAGE

Web Designer Depot

Home| Advertising| About| Contact

© 2012 All Rights Reserved