The Showcase Of BIG Typography

Advertisement

The main advantage of excellent typography lies in its ability to be both attractive and functional at the same time. Although images communicate more vividly, text presentation can impress visitors with its sharpness and precise geometrical forms and curves. Consequently, chosen wisely and used carefully, it can be very effective — and there are dozens of outstanding examples1 of how the latter can be achieved.

However, web typography doesn’t have to support the overall design. It can dominate. It can be loud. It can be bold. And it can be everywhere on a web-site. In many situations it’s reasonable to give the typography the prominent position it deserves, leaving visual cues in the background or removing them at all. Doing that, you have to risk large font sizes surrounded by a generous amount of white space. What comes out of it? Elegant web sites with a unique form, style and sense of precision.

In this article we present over 35 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.

  • You might be interesting in the showcase of simple and clean designs2 we’ve published before.
  • Please notice that all images can be clicked and lead to the sites from which the screenshots have been taken.

The Showcase Of BIG Typography

Typo Screenshot3

Typo Screenshot4

Typo Screenshot5

Typo Screenshot6

Typo Screenshot7

Typo Screenshot8

Typo Screenshot9

Typo Screenshot10

Typo Screenshot11

Typo Screenshot12

Typo Screenshot13

Typo Screenshot14

Typo Screenshot15

Typo Screenshot16

Typo Screenshot17

Typo Screenshot

Typo Screenshot18

Typo Screenshot19

Typo Screenshot20

Typo Screenshot21

Typo Screenshot22

Typo Screenshot23

Typo Screenshot24

Typo Screenshot25

Typo Screenshot26

Typo Screenshot27

Typo Screenshot28

Typo Screenshot29

Typo Screenshot30

Typo Screenshot31

Experimental Solutions

Typo Screenshot32

Typo Screenshot33

Typo Screenshot34

Typo Screenshot

Footnotes

  1. 1 http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
  2. 2 http://www.smashingmagazine.com/2007/03/26/keep-it-simple-stupid-showcase-of-simple-and-clean-designs/
  3. 3 http://www.hugeinc.com/
  4. 4 http://www.tanoshism.com/flash.htm
  5. 5 http://www.circa1979.com/
  6. 6 http://www.ff0000.com/
  7. 7 http://www.blogactionday.org/
  8. 8 http://www.ilovetypography.com
  9. 9 http://www.bd4d.com/
  10. 10 http://www.l2m3.com/
  11. 11 http://www.preview.co.uk
  12. 12 http://www.iamalwayshungry.com/
  13. 13 http://markoff.pl/
  14. 14 http://www.influxideasconference.com/conference/agenda.do
  15. 15 http://madinspain.com/
  16. 16 http://www.sectionseven.com
  17. 17 http://www.antiantinyc.com
  18. 18 http://www.wearitwithpride.com/
  19. 19 http://www.martinkonrad.com.au/
  20. 20 http://www.davorvaneijk.com/
  21. 21 http://www.ilkilkilk.com/
  22. 22 http://www.takeshape.it/
  23. 23 http://www.designersinhouse.com/
  24. 24 http://www.urbaneye.com/artforlife/
  25. 25 http://www.typocircle.co.uk/
  26. 26 http://www.culturaldomain.com/
  27. 27 http://www.bowwowlondon.com/
  28. 28 http://www.artless.gr.jp/
  29. 29 http://www.designershock.com/
  30. 30 http://www.urbaneye.com/artforlife/
  31. 31 http://mypropaganda.co.uk/
  32. 32 http://www.mostardesign.com/
  33. 33 http://www.posttypography.com/
  34. 34 http://www.pnmnl.com/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Those are great examples! Yet again another fantastic article by you guys!

    Indeed sometimes when theres a need for big fonts the design do not matter much. Thanks for the great examples you provided too.

    Swift

    0
  2. 2

    Typography is definitely one of the most underrated design skills, yet one of the most important.

    It can make or break a design, and as these examples show typography good type stands out

    0
  3. 3

    Pure showcase, I love playing with typography!

    0
  4. 4

    All of these are really beautiful examples, and great for inspiration.

    0
  5. 5

    Not sure it will help me. But still interesting

    0
  6. 6

    Excellent list as usual… typography is everything!

    0
  7. 7

    There is some beautiful topography in there. Really good work.

    Unfortunately, what I came away with was a newfound disdain for all-flash interfaces. Seriously, the never-ending progress bars, windows flying/morphing around, and horizontally scrolling layouts make me a little nauseous. And god help you if you actually want to bookmark something. I know that’s not the point of this article, but still.

    0
  8. 8

    Some nice eye-candy and some definite pointers to great typography.

    0
  9. 9

    I still see too much tiny font sizes, but the headers are okay.

    0
  10. 10

    brilliant showcase! beautiful typefaces!!

    0
  11. 11

    Beautiful :) great links! I love big type designs… very 2.0 clichéd but hey they rock :)

    0
  12. 12

    That type of typography is ok but not awesome. I am for the medium size letter with good visibility and small screen coverage.

    0
  13. 13

    Mother of all BIG typography websites appears to be missing in this list…

    0
  14. 14

    Mother of all BIG typography websites OURTYPE appears to be missing in this list…

    0
  15. 15

    I Love Copperplate

    October 16, 2007 4:17 am

    Nice but not as nice copperplate gothic bold. These are all ok fonts but none can compare to the largeness of that font in any size.

    0
  16. 16

    I love typography!

    0
  17. 17

    The web 2.0 in all of us love the great big typography. Makes me wonder if web 3.0 is going to be a shift to almost 100% typography.

    Simplify, simplify, simplify.

    0
  18. 18

    beautiful examples – very inspiring!
    But one thing annoys me: http://www.circa1979.com/ is not a website, it`s 5 images! what the heck? it`s 2007!

    0
  19. 19

    Nice, but for web 3.0 can we get some new typefaces already?

    0
  20. 20

    I seem to be seeing a lot serif Swiss-ey style stuff, boring boring, and avant garde font, hahaha retro 70 slush, good big design does not have to be this dull does it?

    0
  21. 21

    I feel like I’m looking at the back cover of “Windowlicker” again and again and again. Or like I’m back in the eighties in a store full of nothing but generic products. All labeled in Helvetica.

    0
  22. 22

    Interesting array of typography. enjoyed the post!

    0
  23. 23

    Nice list.

    0
  24. 24

    Ah but you left out Rusty Lime.

    0
  25. 25

    Trends in typography are similar to sunglasses. It goes from huge in your face or all over your face to teenie weenie.

    0
  26. 26

    @Alexander;

    True, that website sure is beautifull because of the use of fonts, but the techniques are so old. Images as content are; – not smart at all! :)

    0
  27. 27

    Excellent selection!

    Unfortunately many web designers try to fit as much content as possible on a page, so there´s no place for big typo. But the full beauty of a well designed font is oftentimes only to be seen at larger font size.

    Isn´t the better impression worth the additional space? What do you think?

    0
  28. 28

    Yep, all for big, bold fonts in web pages, and would go along with the simplify, simplify simplify mantra. Helvetica/Arial and Georgia can look really smart at 30px+, and having body text of 14px+ can make a website a pleasure to read. But text rendered as images is a terrible thing, as is Flash navigation; as a showcase for fonts on the web, this was a bit depressing.

    0
  29. 29

    Thanks for including us on the list. It’s great to be in the same list as so many talented typographers and designers.

    Type as image has always been very powerful and here at Preview we regard it very highly in all of our work.

    0
  30. 30

    http://www.cobahair.co.uk/ is a nicely presented site that is deserving of a link in this article.

    0
  31. 31

    Great list of the use of typography as a graphic, how about finding some good typography using system based fonts only, or is that next on the to do list?

    (All those of you running IE 6 or earlier and not on a mac can just ignore this comment as you poor souls have never seen a decently smoothed font yet!)

    0
  32. 32

    Typography, so boring yet so awesome.

    0
  33. 33

    Wonderful!

    0
  34. 34

    Did anyone else spot the hidden text on the ULTRA site? Google won’t look too kindly on that kind of keyword stuffing. Otherwise a nice design, like all the others. If only there were more fonts with universal browser support, design and functionality would dovetail so much better.

    0
  35. 35

    Fleyvr missed the “W-e” kern in “Welcome”…..ooops!

    0
  36. 36

    Here are a few more typography examples: Design Creme: Typography

    ~ Razvan

    0
  37. 37

    Awesome. Type is the hardest thing to find great example of on the web and youve managed put together the a great list of the best. Thanks

    0
  38. 38

    Love this kind of stuff. Great work guyz!

    0
  39. 39

    What about the font used in the CIRCA 1979′s page, the one with a big blue ‘home’ on a dark grey background?
    It’s definitely amazing! Does someone know something similar?

    0
  40. 40

    amazing stuff … thanks a lot!! :0)

    0
  41. 41

    catalog design maniac

    October 18, 2007 5:13 am

    These are brilliant examples. I deal with tons of catalog cover and page designs and your sample is simple yet very effective!

    0
  42. 42

    I really, really love big typography. If done incorrectly, it can ruin a design, but, when done correctly, damn does it bring a piece of work some originality and some oomph factor.

    Oh and that Ultra page about gave me a seizure.

    0
  43. 43

    Oh god oh god oh wow oh wow oh joy oh bliss oh pure azure blue skies of heavenly summers this just made every strand of hair on my body raise.

    I FUKKEN LOVE THIS SO MUCH!!! This is one of THE best things I have seen online yet!

    0
  44. 44

    This is one of a hell of an INSPIRATION. I love this post so very much. Thanks a lot. This proved the principle that 95% of web design is typography.

    0
  45. 45

    Kindly check my website and tell me how is the typo in this http://www.vishalgoyal.co.in

    0
  46. 46

    Great stuff! I think this one’s another example: http://www.lobo.cx
    Cheers.

    0
  47. 47

    i’m afraid plagiarism is inside this article.
    When i first read the article and followed links, one of them took my attention: Fleyvr website’s use of type and color made me think: hmmm… stylish, nice, simple!!! Some days after i realized it was offline (and still it is)… and found the reason: it was a clear copy of another website: Serial Cut.
    I thought designers used to visit Smashing M. for inspiration, not for stealing code without any changes.
    It’s a shame, and i think it’d be nice to remove the thief’s website and exchange for the original one… It’s called JUSTICE.

    0
  48. 48

    …and JUSTICE wins!!

    0
  49. 49

    Vitaly Friedman & Sven Lennartz

    November 30, 2007 3:56 pm

    @susi: Unfortunately, http://www.fleyvr.com is currently offline, so we can’t really compare both sites; however, we have removed it from our list until then.

    Thank you.

    0
  50. 50

    great helpful website it is for my typography project

    0
  51. 51

    Great examples, great use of typography.

    thanks

    0
  52. 52

    As copywriters, we’re surrounded by words all the time. So much so that we’ve started to find them very attractive.

    Perhaps too attractive.

    You’ve got a fantastic collection of work here. We’ll be regular visitors – keep it up.

    0
  53. 53

    http://www.la-va.com

    June 21, 2008 12:34 am

    Wow, – takeshape.it is excellent – it is my most favourite. Clear design and nice navigation – Wonderful, that there are still guys having such great ideas – keep rocking on!

    0
  54. 54

    tutorial web design

    September 29, 2008 7:05 am

    more typography resources available at

    Typography Resources for Web Designers

    0
  55. 55

    some nice motivational designs for reference for type styling. what do you people think of the our logo type style used at the following http://dabberdesign.com url

    0
  56. 56

    great resource thanks a lot for sharing such nice stuff….Pixel Dope

    0
  57. 57

    webmaster is google .. thanks ..

    0
  58. 58

    lovely post … owesome work man…

    0
  59. 59

    Great summery!

    0

↑ Back to top