Typographic Layout Design Contest: Join In and Win!


As web-designers, we shouldn’t underestimate the power of typography. The content is the king and typography is an extremely powerful mean that can help designers to effectively convey their messages to the audience. Recently we presented an overview of useful typographic CSS-tools1 and 8 Simple Ways To Improve Web Typography2. And now it’s your turn to show what you are capable of when using these tools.

In this post we announce the Typographic Layout Design Contest, a contest that has the goal to collect beautiful typographic (X)HTML+CSS-based layouts created by you and release them for free as a gift for the web design community.

What can I win? Link

Of course, as always, we also have prizes for our participants. The winners of the contest will be determined by the Smashing Magazine Editorial Team. Each winner will receive one of the following prizes (it is free for the winner to decide what prize he/she would like to get):

Typographic Top Trumps style cards3
Rick Banks has created this set where each card stands for a classic typeface. The Type Trumps itself is a game in which different typefaces are attributed numerical values. These figures are then used to enable the cards to be won or lost using some of the tried and tested “Top Trumps rules”. Type-junkies will recognize Avant Garde, Futura, Times, Helvetica, Johnston Underground, Neu Alphabet and many other typefaces in the cards.

Type Trumps4

The Typographic Desk References5
The Typographic Desk References is a quick reference guide of typographic terms and classification with definitions of form and usage for Latin based writing systems. Handy for the desk, he TDR contains a thousand facts on typography. Written and designed by Theodore Rosendorf.


Ugmonk Type T-Shirts7
Original typographic T-Shirts, designed by Jeff Sheldon.


Typographic Pillows9
Beautiful, original and soft typographic pillows, created by French designers Claire Eglizeaud and Paul Moreau.


Haptic Typeface License11
A license for the full family (HapticPro Large Pack, 14 fonts, value $650) of the typeface Haptic, awarded with the certificate of Typographic Excellence in Type Design TDC2 2009 and designed by our friend Henning Skibbe.

Haptic Typeface Family12

The winner will also be awarded with typography books New Vintage Type: Classic Fonts for the Digital Age13 (by Steven Heller and Gail Anderson) and Swiss Graphic Design14 (by Richard Hollis).

New Vintage Type15 Swiss Graphic Design16

Rules Link

In order to participate, please follow the following steps:

  1. come up with an original, beautiful, readable and attractive typographic web design (you may use grids or vertical rhythm if you want to, but you don’t have to),
  2. download our blank template17,
  3. use this template to code your own (X)HTML+CSS-template upon it (you may use JS-libraries or any JavaScripts, but you don’t have to, pure (X)HTML+CSS would be OK),
  4. feel free to use dynamic image replacement techniques such as sIFR18, sIFR Lite19, cufon20, FLIR21, @font-face22-attribute etc, but please notice that you may not include commercial fonts in your templates, because the templates will be released for free download after the contest,
  5. make sure that the design looks fine in modern browsers (Firefox 3, Internet Explorer 7+, Opera 9.6, Safari 3.1, Google Chrome etc.),
  6. make sure that your code passes the W3C validation test23.

Once the template is done,

  1. create a fullscreen screenshot of your template (you can use Fireshot Firefox Extension24 to create fullscreen screenshots).
  2. and pack everything (the screenshot and the template) in a .zip-file,
  3. send your .zip-file via e-mail at: templates@smashingmagazine.com
    with the subject line [Typography Contest] Your_theme_title.

    Please mention your name, your URL and the country you are from. If possible, please also provide us with the brief description of the ideas which have been the driving force behind your design. Be creative, use unusual techniques, explore your skills, do whatever it takes — we’d like you to get really excited about it.

Deadline? Link

We’ll consider all designs we’ll receive until the 31st of May 2009 30th of June. The best entries will be published briefly after the contest has ended. The winners will be announced briefly after the deadline as well.

All templates will be released for free download and will be available to use for free, without any restrictions whatsoever (and you will be credited in the release post, of course). You may include at most one link to your site in the footer of the template.

How do I get started? Link

Just to give you a couple of idea for the start, here is a showcase of some of the excellent typographic layouts designed over the last months.

You can design any (X)HTML+CSS-template you want – for any blog, portfolio, corporate site, product page, coming soon page, maintenance page or any other page. However, the design should be new and should be designed specifically for this contest. Of course, you must have the copyright of the design and the code.

Typography Screenshot25

Typography Screenshot26

Typography Screenshot27

Typography Screenshot28

Typography Screenshot29

Typography Screenshot30

Typography Screenshot31

Typography Screenshot32

Typography Screenshot33

Typography Screenshot34

Typography Screenshot35

Typography Screenshot36

Typography Screenshot37

Useful Typographic Tools38

Useful Typographic Tools39

Useful Typographic Tools40

Useful Typographic Tools41

Useful Typographic Tools42

Typography Screenshot43

Other Resources Link

17 Stimulating Flickr Groups to Get You Typographically Inspired44
This is a list of some of the best typography Flickr groups to feed your creative appetite.

Useful Typographic Tools45

20 Websites With Beautiful Typography46
In this collection, you’ll find a variety of websites that showcase creative and functional uses of typography.

Useful Typographic Tools47

To get more typographic inspiration, please visit the following posts and resources:

You may consider taking a closer look at the following posts from Smashing Magazine:

Get creative, folks!

Footnotes Link

  1. 1 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  2. 2 http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/
  3. 3 http://www.face37.com/
  4. 4 http://www.face37.com/
  5. 5 http://typedeskref.com/
  6. 6 http://typedeskref.com/
  7. 7 http://shop.ugmonk.com/category/tees
  8. 8 http://shop.ugmonk.com/
  9. 9 http://www.bonjourmoncoussin.com/en/index.php?act=1,12
  10. 10 http://www.bonjourmoncoussin.com/en/index.php?act=1,12
  11. 11 http://dehac.de/seiten/haptic/haptic.html
  12. 12 http://dehac.de/seiten/haptic/haptic.html
  13. 13 http://www.graphic-design.com/Type/vintage_type/index.html
  14. 14 http://yalepress.yale.edu/yupbooks/book.asp?isbn=9780300106763
  15. 15 http://www.graphic-design.com/Type/vintage_type/index.html
  16. 16 http://yalepress.yale.edu/yupbooks/book.asp?isbn=9780300106763
  17. 17 http://www.smashingmagazine.com/contest/blank-template.zip
  18. 18 http://novemberborn.net/sifr3
  19. 19 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
  20. 20 http://wiki.github.com/sorccu/cufon/about
  21. 21 http://facelift.mawhorter.net/
  22. 22 https://developer.mozilla.org/en/CSS/@font-face
  23. 23 http://validator.w3.org/
  24. 24 https://addons.mozilla.org/en-US/firefox/addon/5648
  25. 25 http://jasonsantamaria.com/
  26. 26 http://velthy.net/
  27. 27 http://www.gist.com/index.html
  28. 28 http://retinart.net/working-life/good-designers-ask-why
  29. 29 http://www.hugeinc.com/casestudies/
  30. 30 http://huwshimi.com/blog/
  31. 31 http://www.montylounge.com/
  32. 32 http://goodbarry.com/
  33. 33 http://www.tweetcc.com/
  34. 34 http://weblog.cynosura.eu/
  35. 35 http://waqasashraf.com/
  36. 36 http://www.shiftpx.com/
  37. 37 http://www.blackestate.co.nz/
  38. 38 http://jontangerine.com/
  39. 39 http://24ways.org/
  40. 40 http://www.wilsonminer.com/
  41. 41 http://www.markdearman.com/
  42. 42 http://fixieconsulting.com/
  43. 43 http://www.signalapps.com/
  44. 44 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
  45. 45 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
  46. 46 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/
  47. 47 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/
  48. 48 http://speckyboy.com/2008/06/15/32-inspirational-examples-of-amazing-layout-and-typography/
  49. 49 http://www.typographyserved.com/
  50. 50 http://typesites.com/
  51. 51 http://www.typeneu.com/
  52. 52 http://www.ilovetypography.com
  53. 53 http://designm.ag/inspiration/typography-showcase/
  54. 54 http://www.smashingmagazine.com/2009/04/21/creative-print-typography-layouts/
  55. 55 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  56. 56 http://www.smashingmagazine.com/2008/11/24/15-beautiful-high-quality-free-fonts/
  57. 57 http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
  58. 58 http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
  59. 59 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  60. 60 http://www.smashingmagazine.com/category/fonts/
  61. 61 http://www.smashingmagazine.com/category/css/

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Gonna try my luck on this one. :)

  2. 2

    Brilliant :). Great idea!

  3. 3

    Simon Harlinghausen

    May 21, 2009 10:07 am

    Genius contest. I will try my luck.

    Also genius. As fast as published
    as twittered. Respect. Stay tuned …

  4. 4

    Nice prizes! =)

  5. 5

    I’ll be submitting!

  6. 6

    A quick question:

    I know typography is the main focus of the design but will we be allowed to include images in the design as well?

    (SM) Yes, you are.

  7. 7

    Hmmm… I’m relocating to Austin, TX on the 31st and have to pack my house… I HOPE HOPE HOPE I can get some time to enter this!!!

    I <3 SM


  8. 8

    Great contest!
    I’ll try it

    I think it’s allowed because you must create a whole web design template.

  9. 9

    “you may not include commercial fonts in your templates”

    Freewear fonts okay? All your examples seem to use commercial fonts… Can we use any of the free fonts we have gotten from SM free downloads in the past?

    I think you should really clear this up…

  10. 10

    Smashing Editorial

    May 21, 2009 12:29 pm

    @Tim Ward (#9) Yes, you can use free fonts. It is only forbidden to include commercial fonts in the template package.

  11. 11

    How about Images? Or is this strictly Type based design?

  12. 12

    Smashing Editorial

    May 21, 2009 1:12 pm

    @Troy Peterson (#11): images are OK, but the focus should be on typography.

  13. 13

    i love words… word! =P

  14. 14

    Superb ! I will create a template for a personal site

  15. 15

    I’m brazilian, can I join this? And If I win (i’m really not thinking that lol), will receive the prizes, or some of that?

  16. 16

    wow, that is very short timing

  17. 17

    can i use wordpress? make a wordpress theme for example?

  18. 18

    I will try.

    Can I use images instead of fonts.


  19. 19

    oooh this is terrific!! but the time is sooo short :(, can’t it be extended up to june?? please????

  20. 20

    cool gonna go for it

  21. 21

    I will try my luck in this contest

  22. 22

    No llores DraRock, HaHaHa! Se que algo genial lograras hacer, :)

  23. 23

    Wow! You decided to do this! Awesome! :’3

    I wish I could participate but I have too much to do at work ATM… Good luck to the participants! :3

  24. 24

    really nice

  25. 25

    “Handy for the desk, he TDR contains a thousand facts on typography.”- did you mean, “the TDR…” haha. It happens. Anyway, looks like some pretty sweet stuff up for grabs… Thanks!

  26. 26

    lol dont think so, not for a pack of cards, i have real clients to design for.

  27. 27

    @ william “lol dont think so, not for a pack of cards, i have real clients to design for.”

    Thats such a shame, I was hoping to finally get acquainted with your genius. Actually I think they came up with this contest just so we can see what a designer with actual clients looks like ;)
    Great contest guys. Gonna give it a try.


  28. 28

    Cool, can we send multiple entries?

    (SM) Yes, sure.

  29. 29

    Jochen Van de Velde

    May 22, 2009 3:17 am

    Great, I’ll definitely enter this contest ;-)

  30. 30

    Does the template have to be in pure xhtml, or we could use images ?

  31. 31

    Read the comments people – YES use images if you have to!!!

  32. 32

    Pretty tight deadline there SM. Perhaps the end of June may have been a little more appropriate.

  33. 33

    I don’t think I will win but, why not?

  34. 34

    Those pillows are awesome!

  35. 35

    Nice Contest! but why the deadline has to be so tight???
    Please, give us more time!
    Thanks! :-)

  36. 36

    Smashing Editorial

    May 22, 2009 11:57 am

    Ok, let’s set the deadline at the 30th of June.

  37. 37

    thank youuuuuuuu, now I will be able to contest for sure!! :D

  38. 38

    Thank You SM!!! :-D

  39. 39

    thank you cause I was not about to skip a convention and fail a class for this. thanks for the extension

  40. 40

    new deadline is sad. 31. may was better.
    the template are only one file, the index.html or?

    thats possible to the 31. may…

    (SM) Yes, index.html would be enough. But it better be a nice one ;-)

  41. 41

    great!! thanks for giving extra time. really busy lately.

  42. 42

    Great contest.

    I have a question! How many pages have we to design?
    what about a main page contains every thing that would be in a site?


    (SM) One page is enough, but feel free to design more to improve your chances for winning awards!

  43. 43

    Whoa! I should join this contest … am I late?

    (SM) No, you have 30 days ;-)

  44. 44

    Why not, I guess I’ll stretch my design fingers.

  45. 45

    can we send more than 1 design?

  46. 46

    Haha, only have 10 days but I’ll give it a try :)

  47. 47

    Do you have to, or should you included graphics, background images, etc? Or is it purely just type?

  48. 48

    I have a question, Sir! Are we allowed to use jQuery or Java-code created by other people? A scroll-to-the-top for instance.

    PS: “The winners will be announced briefly after the deadline as well.” >>> As soon as the winner of the Iranian election or a little bit later? :)

  49. 49

    minimalsites.com could be a good reference of typographic layout design to get started.

  50. 50

    WoW for sure my templete will apply for this, i’m feeling lucky


↑ Back to top