Thursday, August 9, 2012

101 Examples of Text Treatments on the Web


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?

No comments: