Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

The Showcase Of BIG Typography – Second Edition

Advertisement

In 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.

Few months ago we have already presented some sites with quite BIG typography. In this article we present further 55 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.

Please take a look at the following posts as well:

The Showcase Of BIG Typography Link

Designfabrika4
Görsel Işler’s porotfolio with a vibrant typography from Turkey. The design looks attractive and appealing.

Screenshot5

Azzabee.com.au6
Azzabee uses big typography in a rotating Flash-based promo. The navigation menu is perfectly integrated in the promo using PNG transparency. Very elegant and effective design solution.

Screenshot7

Natl.tv8
National Television is a project which uses bold, loud and sexy typography within a Flash-based design. Very playful, impressive and interesting to explore. Some content of the site may be hard to read, though.

Screenshot9

Neubau Berlin
Letters, letters, letters. NeuBau is a German type-foundry which is why typography is used everywhere on the site. The typeface used is NB-Grotesk. The design isn’t intuitive at all, but that’s all about typography, right?

Screenshot

Screenshot10

JLern Design11
JLern Design presents the typography from a quite unusual perspective. Nice, compact and typography-heavy design solution. Flash in use.

Screenshot12

Are you a virgin?13
AIGA’s another concept based only on typography. The current section of the site is presented with a bold and colorful typography.

Screenshot14

Hungry Man15
Hungry man seems to be hungry for job as well. A really distinctive design with a little bit retro-look.

Screenshot16

256tm.com17
256TM is a font foundry by Thomas Huot-Marchand. Below the splash-page is presented. The navigation menu is, of course, based upon pure typography, too.

Screenshot18

Elmwood19
Elmwood isn’t really humble and uses typography to emphasize exactly this. Effective use of typography for promotional purposes. After all, it’s all about impressing people, right?

Screenshot20

Erratic Wisdom21
Not only is the typography quite bold, it is yellow too! Designed by Tom Fadial.

Screenshot22

Switch Mediaworks23
Switch Mediaworks is a pretty lively web-site with a pretty lively typography.

Screenshot24

Shut.elmota.com25

Screenshot26

Mike Precious27

Screenshot28

Newsmap29
Newsmap displays current stories and their popularity in a news map. More important messages are displayed with bold typography.

Screenshot30

Fixie

Screenshot31

Sean Klassen32
Sean Klassen loves Helvetica and wears pants. Both his splash-page and his blog are heavy on typography.

Screenshot33

Screenshot

Postmachina.com34
Postmachina uses typography to deliver the message…

Screenshot35

Chris Garrett Media36
…so does Chris Garrett. Color transition in use…

Screenshot37

Francesco Mugnai38
…and so does Francesco Mugnai.

Screenshot39

Freshe.st
Bill Morrison has a small web-site, but uses large and bold typography.

Screenshot

Ourtype.be40
Ourtype is a Belgian type foundry which showcases its typefaces at large scale. When you scroll the page, type seems to be a little bit shaky.

Screenshot41

Kokokaka42
Kokokaka sounds pretty strange, but this is how a Swedish design agency is called. Their web-site uses capital caps and very colorful links.

Screenshot43

Organic Grid44
Michael McDonald with dynamic Flash-based typographic design.

Screenshot45

Colorcubic.com46
Sometimes one can experiment with geometric shapes as well. Colorcubic uses illustrations which look like typography, but are indeed not letters.

Screenshot47

Pier Madonia48
Pier Madonia showcases his work using a large typography-based navigation menu. That’s an unusual approach which isn’t intuitive but still simple to understand and to use. The sub-menu is pretty large, too. And, of course, uses only typography.

Screenshot49

Alex Cohaniuc50
Alex Cohaniuc uses typography for his categories…

Screenshot51

I Love Typography52
…John Boardley for the title of his site.

Screenshot53

Brunet Garcia54

Screenshot55

Studio Number One56

Screenshot57

300million.com58
On 300million letters fly, jump and float. Created with Flash.

Screenshot59

Twistori.com60
Twistori is an ongoing social experiment which analyzes messages sent to Twitter and presents them in a scrolling window. With large and vibrant typography.

Screenshot61

Daniel Hagglund62

Screenshot63

Vision 764
On Vision 7 the typography is literally squeezed insind a tiny and short layout. The letters are nevertheless huge.

Screenshot65

Wind Jammer66
Not really beautiful, but big and large. This company from London seems to have its own style when it comes to choice of letters.

Screenshot67

Mattia Viviani68

Screenshot69

Paco Raphael70

Screenshot71

ixwa.com72
Sometimes typography can be large yet remain subtle and support the content of the site…

Screenshot73

Visie.com.br74

Screenshot75

Futonmedia

Screenshot

Babasonicos.com76
Babasonicos uses bold and pretty colorful typography in the navigation. This may not be the perfect solution from the usability-perspective, but the site perfectly achieves its primary goal, namely to appear lively and colorful — just the way the band is in its pretty strange videos.

Screenshot77

Topos Graphics78
Topos Graphics: a start page with “mirrored” typography.

Screenshot79

Popart Blog80
Typography for headlines gone bold. The headline literally stands out.

Screenshot81

Nu Visual Language82

Screenshot83

Urbanchip

Screenshot

Mike Poss84

Screenshot85

Marie Julien86

Screenshot87

Berlin.unlike.net
Bold typography supports the design. It doesn’t stand out but it is visible.

Screenshot

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2007/10/15/the-showcase-of-big-typography/
  2. 2 https://www.smashingmagazine.com/2008/05/12/sexy-bold-and-experimental-typography/
  3. 3 https://www.smashingmagazine.com/2008/02/25/breathtaking-typographic-posters/
  4. 4 http://www.designfabrika.com/
  5. 5 http://www.designfabrika.com/
  6. 6 http://azzabee.com.au/
  7. 7 http://azzabee.com.au/
  8. 8 http://www.natl.tv/
  9. 9 http://www.natl.tv/
  10. 10 http://www.neubauberlin.com/
  11. 11 http://jlern.com/
  12. 12 http://jlern.com/
  13. 13 http://www.aigadc.org/showoff/index.html
  14. 14 http://www.aigadc.org/showoff/index.html
  15. 15 http://www.hungryman.com/
  16. 16 http://www.hungryman.com/
  17. 17 http://www.256tm.com/index.htm
  18. 18 http://www.256tm.com/index.htm
  19. 19 http://www.elmwood.co.uk/
  20. 20 http://www.elmwood.co.uk/
  21. 21 http://www.erraticwisdom.com/
  22. 22 http://www.erraticwisdom.com/
  23. 23 http://www.switchmw.com/
  24. 24 http://www.switchmw.com/
  25. 25 http://shut.elmota.com/
  26. 26 http://shut.elmota.com/
  27. 27 http://www.mikeprecious.com/
  28. 28 http://www.mikeprecious.com/
  29. 29 http://www.marumushi.com/apps/newsmap/
  30. 30 http://www.marumushi.com/apps/newsmap/
  31. 31 http://www.fixieconsulting.com/
  32. 32 http://seanklassen.com/
  33. 33 http://seanklassen.com/
  34. 34 http://postmachina.com/
  35. 35 http://postmachina.com/
  36. 36 http://chrisgarrettmedia.com/
  37. 37 http://chrisgarrettmedia.com/
  38. 38 http://www.francescomugnai.com/
  39. 39 http://www.francescomugnai.com/
  40. 40 http://www.ourtype.be/
  41. 41 http://www.ourtype.be/
  42. 42 http://www.kokokaka.com/
  43. 43 http://www.kokokaka.com/
  44. 44 http://www.organicgrid.com/
  45. 45 http://www.organicgrid.com/
  46. 46 http://www.colorcubic.com/
  47. 47 http://www.colorcubic.com/
  48. 48 http://www.piermadonia.com
  49. 49 http://www.piermadonia.com
  50. 50 http://www.alexcohaniuc.com/
  51. 51 http://www.alexcohaniuc.com/
  52. 52 http://ilovetypography.com/
  53. 53 http://ilovetypography.com/
  54. 54 http://www.brunetgarcia.com/
  55. 55 http://www.brunetgarcia.com/
  56. 56 http://www.studionumber-one.com/
  57. 57 http://www.studionumber-one.com/
  58. 58 http://www.300million.com
  59. 59 http://www.300million.com
  60. 60 http://twistori.com/#i_believe
  61. 61 http://twistori.com/#i_believe
  62. 62 http://www.danielhagglund.com/
  63. 63 http://www.danielhagglund.com/
  64. 64 http://vision7.org/
  65. 65 http://vision7.org/
  66. 66 http://www.windjammerandtruck.com
  67. 67 http://www.windjammerandtruck.com
  68. 68 http://www.mattiaviviani.com/
  69. 69 http://www.mattiaviviani.com/
  70. 70 http://www.pacoraphael.com/
  71. 71 http://www.pacoraphael.com/
  72. 72 http://www.ixwa.com/
  73. 73 http://www.ixwa.com/
  74. 74 http://visie.com.br/treinamento/
  75. 75 http://visie.com.br/treinamento/
  76. 76 http://babasonicos.com/
  77. 77 http://babasonicos.com/
  78. 78 http://www.toposgraphics.com/
  79. 79 http://www.toposgraphics.com/
  80. 80 http://blogs.popart.com/
  81. 81 http://blogs.popart.com/
  82. 82 http://www.nuvisuallanguage.co.uk/
  83. 83 http://www.nuvisuallanguage.co.uk/
  84. 84 http://www.mikeposs.com/about.php
  85. 85 http://www.mikeposs.com/about.php
  86. 86 http://www.mariejulien.com/
  87. 87 http://www.mariejulien.com/
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

Advertisement
  1. 1

    I like! :)

    0
  2. 2

    Yeah !! Clap Clap

    0
  3. 3

    cheers!

    0
  4. 4

    Nice one!

    0
  5. 5

    Great post! I’ve compiled a list of ultra bold, free fonts which fits in perfectly with this article. If you’re interested then head over to http://www.fudgegraphics.com.

    0
  6. 6

    Wow! These letters are huge :eek: Really cool. I think of doing something like the first example.

    1
  7. 7

    Wauw, great!

    0
  8. 8

    great list, anyone know the font used for abbazee?

    0
  9. 9

    this is just awesome

    0
  10. 10

    Great selection as usual. Geek and hype

    0
  11. 11

    This site also uses big fonts in an unusual way:

    innen.hu

    0
  12. 12

    why don’t any of my clients let me do things like this? I’ve always thought that large type is one of the most beautiful ways of communicating, especially if the message can be simplified to just a few small words.

    0
  13. 13

    Just beautiful!

    0
  14. 14

    Great post. A lot of sites I’ve never seen before.

    @Sean Farrell:
    Looks like ITC Kabel

    0
  15. 15

    The best!

    0
  16. 16

    @johno – thanks a mil

    0
  17. 17

    Wow! Great stuff here … I’m a big fan of even bigger typography and it is very nice to see our work in the list (mike poss).

    Thanks a lot guys!

    Martin

    0
  18. 18

    The first website, Designfabrika, is not Gorsel isler’s portfolio. “Görsel Isler” translates to “visual works”. It’s Oguzhan Aydin’s portfolio, as you can see here:

    http://oguzhanaydin.deviantart.com/

    0
  19. 19

    Natl.tv uses which font? There are many similar fonts but that seems to be used in many ads…. I should know this, anyone?

    0
  20. 20

    Great collection, indeed!

    0
  21. 21

    hihi,

    i wish that there’s will be other one for wordpress…

    thanks man

    0
  22. 22

    This one is better than the first one. Good Post!!!

    0
  23. 23

    wow… really nice!

    0
  24. 24

    Big Type and minimalism Rocks!

    0
  25. 25

    Helvetica… still the font of choice for lazy design fascists.

    0
  26. 26

    As usual smashing comes up with hothothothot shit. Love these articles!

    0
  27. 27

    Its amazing !!!.. anks for sharing :-D

    0
  28. 28

    and yet, STILL most of the fonts are Helvetica, or Helvetica-like…

    Where’s BIG Chicago?!
    :O

    0
  29. 29

    Really a good post. Looking for such info on typography.

    0
  30. 30

    A photographer friend of mine has a photo portfolio site with big type for the navigation.

    0

↑ Back to top