Navigation

101 Examples of Text Treatments on the Web

Design, Typography, Web Design | Apr 21, 2009

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

illustrate_salinas
illustrate_axiom
illustrate_tshirt
illustrate_starbucks
illustrate_baby_name
illustrate_nudeday_2
illustrate_mouth_teeth_2
illustrate_viget

 

2. Background Shape

bg_black_white
bg_emrialo
combo_design_phunk
bg_tennessee_2
bg_ivan

 

3. Color Change

color_water
color_elmwood
color_tv
color_vision_streetwear
color_things_we_make
color_matt

 

4. Font Variations

combo_islamic
combo_chirag
vary_virgin
vary_giant_creative

 

5. Handwritten

combo_dimmett
handwrite_propaganda
handwrite_postit
handwrite_logo_cranium
handwrite_about
handwrite_made_to_kill

 

6. BIG

big_blog
big_news
big_swroon
big_post
big_future_addy
big_ds4
big_alpha
big_ahoj

 

7. Textures

texture_take_shape
texture_rusty
texture_africa_football
texture_iamblog
texture_green
texture_fowd
texture_farmer_chef
texture_distortion

 

8. Big vs. Small

bigsmall_virtual_memories
bigsmall_webdesign
bigsmall_design
bigsmall_brandon_muth
bigsmall_omar

 

9. Alignment

align_mucho
align_lion
align_nathan

 

10. Overlay/Transparency

overlay_illusion_workshop
overlay_archive
overlay_365

 

11. Angles and Curves

angle_trinta
angle_jlearn
angle_pink
angle_organic_grid
angle_orange_box
angle_changeing_cultures
angle_line25

 

12. Highlight

highlight_matt
highlight_happycog
highlight_abc
highlight_psd_to_xhtml
highlight_monsieurlam

 

14. 3-D

3d_up
3d_flash_summit
3d_tangled
3d_rob

 

14. Custom & Unusual Fonts

custom_longstreet


custom_sugarland
custom_stichify
custom_sharon_flake
custom_spoon
custom_jan_riechle
custom_nelly_furtado
custom_fajne
custom_kardo
custom_brainwash
perspective_blue_gray

 

15. Outline

outline_pop_stalin
outline_twessage
outline_wiki_lime
outline_petrini
outline_meshu
outline_legwork

 

16. Old Style/Western

old_dollar
old_zillionare
old_moon

 

17. Slashed Out

slash_brad
slash_nikola

 

Combination of Techniques

combo_24_ways
combo_iesvs
combo_windjammer
combo_diseno
custom_brad
combo_africa
combo_pop_tees



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 (no login required)
  • 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.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