101 Examples of Text Treatments on the Web | Webdesigner Depot

21 Apr
101 Examples of Text Treatments on the Web
Design, Text Effects, Typography
66

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 Share
Related Posts
10 Web Typography Rules Every Designer Should Know 5 Simple Ways to Improve Web Typography Breaking The Design Cycle: Get Creative To Be Creative
66 Comments »

#1
M@U
April 21st, 2009 at 09:26
An epic post, I love this list! :O
*Emm, captcha?

Reply Close comment form

#2
Walter
April 21st, 2009 at 18:24
Had to go back to captcha – too much spam…

Reply Close comment form

#3
kunal
April 21st, 2009 at 09:42
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)?

Reply Close comment form

#4
Walter
April 21st, 2009 at 20:01
There’s tons of fonts at http://www.urbanfonts.com

Reply Close comment form

#5
Jelle
April 21st, 2009 at 10:57
I enjoyed going through these, great collection.

Reply Close comment form

#6
Patternhead
April 21st, 2009 at 11:15
Great design inspiration, thanks

Reply Close comment form

#7
Almudena
April 21st, 2009 at 11:38
Always great to watch!!!

Reply Close comment form

#8
MyTmG.net
April 21st, 2009 at 11:50
Very nice collection! Thanks WDD

Reply Close comment form

#9
chirag
April 21st, 2009 at 11:56
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.

Reply Close comment form

#10
Crowd
April 21st, 2009 at 12:05
Very nice and useful list!

Reply Close comment form

#11
Irene Demetri
April 21st, 2009 at 12:15
Great post!

Reply Close comment form

#12
golchi
April 21st, 2009 at 12:55
Original text designing, I personally loved “informal” ones like:
http://www.psyop.tv/main.php
http://www.adf.lt/
http://logocranium.com/

Reply Close comment form

#13
Martin - Sanders Design
April 21st, 2009 at 13:03
A stunning collection of original designs, thanks for the inspiration

Reply Close comment form

#14
webx
April 21st, 2009 at 13:12
The best collection! Thanks!

Reply Close comment form

#15
Borat
April 21st, 2009 at 13:23
Very nice webpages and designs.. Hope one of my websites will be here, when I update design

Reply Close comment form

#16
Patrick L.
April 21st, 2009 at 14:19
The second of the 6. Category (BIG) is wrong linked. :/

Reply Close comment form

#17
Carl
April 21st, 2009 at 14:23
Another thing is experimenting with transparency, embossing and also leading … lots to play with!

Reply Close comment form

#18
Gianmarco Simone
April 21st, 2009 at 14:48
Great, great, great post

Reply Close comment form

#19
Luis Eduardo
April 21st, 2009 at 14:57
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.

Reply Close comment form

#20
haniemaj22
April 21st, 2009 at 15:19
This one really helps and I LOVE IT! Thanks! ^-^

Reply Close comment form

#21
Jack
April 21st, 2009 at 15:39
These are fatanstic!!!! Very nice list. Thanks a lot.

Reply Close comment form

#22
Jack
April 21st, 2009 at 16:13
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.

Reply Close comment form

#23
Pradeep CD
April 21st, 2009 at 16:15
Awesome list…
I have never seen designs like these before…
really inspired… thanks

Reply Close comment form

#24
jeraldo
April 21st, 2009 at 16:31
am i the first one to comment here? haha!
what an eye candy! very beautiful pieces of art.

Reply Close comment form

#25
Walter
April 21st, 2009 at 20:02
Not the first one, you just posted during my night time so I couldn’t approve comments…

Reply Close comment form

#26
bs kishore
April 21st, 2009 at 16:42
Truly an awesome list !

Reply Close comment form

#27
Wedding Photographer
April 21st, 2009 at 17:19
Wow, It will take me a week to go through all these designs but I already have a few really good ideas from it.

Reply Close comment form

#28
Navdeep
April 21st, 2009 at 20:34
Beautiful!
@3drockz

Reply Close comment form

#29
Denver Web Designer
April 21st, 2009 at 20:36
Now that is a list! Great inspirational stuff here.

Reply Close comment form

#30
Zábávná videa
April 21st, 2009 at 21:12
Very nice and inspiration gallery! Thank, respect+

Reply Close comment form

#31
Osvaldas
April 21st, 2009 at 21:24
Great feeling to see my site (osvaldas.info) on the list. Thanks a lot!

Reply Close comment form

#32
om ipit
April 21st, 2009 at 21:45
typography make me feel free….
i love this showcase…
thankz WDD…

Reply Close comment form

#33
Iztok
April 21st, 2009 at 23:54
I’m kinda jeleous of people being so creative in visualizing their ideas. Great stuff.

Reply Close comment form

#34
Tim
April 22nd, 2009 at 10:12
Very creative and clever use of the alphabet!

Reply Close comment form

#35
Ron
April 22nd, 2009 at 11:22
Wow great post – i like the type on the inmeres homepage just above the car. Indexable flash, nice.
http://www.inmeres.com

Reply Close comment form

#36
alex
April 22nd, 2009 at 13:39
great collection

Reply Close comment form

#37
aledesign.it
April 22nd, 2009 at 17:19
wow wow wow, amazing..fantastic!

Reply Close comment form

#38
photo retouching
April 23rd, 2009 at 16:54
what an impressive collection of fonts and how to use them. I am bookmarking this page as a permanent source of inspiration!

Reply Close comment form

#39
Design was here
April 23rd, 2009 at 19:28
Wow! Really great post!
Made me realize of so many impressive use of type in web design.
Great post!

Reply Close comment form

#40
Rahul
April 23rd, 2009 at 21:10
Too good. A super article.

Reply Close comment form

#41
Sklep Zoologiczny
April 23rd, 2009 at 23:59
Great examples. Indeed typography is essential to succeed in designing.

Reply Close comment form

#42
Dan o.
April 24th, 2009 at 00:00
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.

Reply Close comment form

#43
Sean Baker
April 24th, 2009 at 16:08
Thanks for including me on this list, especially with such esteemed company! Much appreciated. Keep up the stellar articles and resources for the community!

Reply Close comment form

#44
sama creation
April 25th, 2009 at 14:47
impressive collection thanks

Reply Close comment form

#45
imsraaia
April 26th, 2009 at 00:06
nice article… thanks…

Reply Close comment form

#46
andy
April 26th, 2009 at 08:26
This post is worth a favorite.
Thanks!

Reply Close comment form

#47
joshua
April 26th, 2009 at 13:55
Great work! thanks a lot.

Reply Close comment form

#48
Brad
April 28th, 2009 at 07:58
Great stuff. Thanks for the inclusion.

Reply Close comment form

#49
Adam - Creare Engine
April 28th, 2009 at 19:12
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.

Reply Close comment form

#50
Karl
April 28th, 2009 at 21:48
That was super. What I find was many of these samples allowed me to re-visit places, times, and experiences I had had.

Reply Close comment form

#51
Andrew
May 4th, 2009 at 16:58
Great examples!

Reply Close comment form

#52
masheko
May 4th, 2009 at 23:28
wow… the great collections. It gives me inspirations. Thanks.

Reply Close comment form

#53
matt parsons
May 5th, 2009 at 11:59
that’s one big heap of inspiration up there /\

Reply Close comment form

#54
tamuir
May 6th, 2009 at 23:02
Thanks for featuring our website.

Reply Close comment form

#55
Marcelle
May 9th, 2009 at 22:14
Nice !

Reply Close comment form

#56
Yogesh Mhatre
May 17th, 2009 at 03:40
Amazing Concepts.. I should consider using them at my site!!!

Reply Close comment form

#57
Rajdip Mitra
May 21st, 2009 at 16:03
Beautiful thought. Realy its very good. It wll help us more and more.
Thanks,
Rajdip

Reply Close comment form

#58
virtual tour company
August 13th, 2009 at 23:58
A really good example of creative text!

Reply Close comment form

#59
mushroom website design
August 18th, 2009 at 23:38
Thanks for compiling all this. An inspirational collection undoubtably! Brialliant!

Reply Close comment form

#60
webtechnepal
August 21st, 2009 at 13:14
Great Example collections. thank you so much.

Reply Close comment form

#61
Vikram Singh
September 11th, 2009 at 02:25
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…………….

Reply Close comment form

#62
Svetainiu kurimas
October 13th, 2009 at 16:06
Easy when someone shows you how. Thanks and keep it up.

Reply Close comment form

#63
Colon Cleanse
November 21st, 2009 at 14:20
wow…i cant believe this…this is amazing

Reply Close comment form

#64
Arun Krishnan
December 12th, 2009 at 00:36
nice….very inspirational…

Reply Close comment form

#65
Justin
April 28th, 2010 at 07:21
Wow. This post blew my mind and is one of my all-time favorites at the moment.
THANK YOU!

Reply Close comment form

#66
rector
May 20th, 2010 at 19:26
Really nice, I neve knew one could do so much with only text,
Good work.

Reply Close comment form

Name (required)

E-mail (required - never shown publicly)

Web-site

Your Comment (smaller size | larger size)
5+2=? (required)
Notify me of followup comments via e-mail

TOP OF PAGE

Web Designer Depot

Home| Advertising| About| Contact

© 2010 All Rights Reserved