8 Days Left To Enter The Typographic Layout Design Contest


You have 8 more days to submit your entry for our Typographic Layout Design Contest1. The goal of the contest is to collect beautiful typographic (X)HTML- and CSS-based layouts, created by you, and release them for free as a gift to the Web design community.

So far, only 12 entries have a nice spot reserved in our release post, which will be published at the beginning of July. So, you still have a good chance of winning one of our prizes and showing off what you are capable of on the front page of Smashing Magazine!

Of course, as always, we have various prizes for our participants. The winners of the contest will be determined by the Smashing Magazine Editorial Team. Each winner will receive a prize, such as The Typographic Desk Reference2, a quick reference guide of typographic terms and classification, with definitions of form and usage for Latin-based writing systems. Handy for the desk, the TDR contains a thousand facts on typography. Written and designed by Theodore Rosendorf.


Content is king, as we know, and typography is an extremely powerful means for designers to convey their message to their audience effectively. Recently, we presented an overview of useful typographic CSS tools4 and 8 simple ways to improve Web typography5. And now it’s your turn to show what you are capable of using these tools.

Rules Link

To participate, please follow these 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 template.6
  3. Code your own (X)HTML+CSS-based design on this template. (You may use JS-libraries or any other JavaScript, but you don’t have to. Pure (X)HTML and CSS is fine.)
  4. Feel free to use dynamic image replacement techniques, such as sIFR7, sIFR Lite8, cufon9, FLIR10, the @font-face11 attribute, etc. But please do not include commercial fonts in your templates, because the templates will be released as free downloads at the end of the contest.
  5. Make sure the design works in modern browsers (Firefox 3, Internet Explorer 7+, Opera 9.6, Safari 3.1, Google Chrome, etc.).
  6. Make sure your code passes the W3C validation test12.

Once your template is complete:

  1. Create a full-screen screenshot of your template. (The Fireshot Firefox extension13 might help with this.)
  2. Pack everything (screenshot and template) in a ZIP file.
  3. Send your ZIP file by email to: templates@smashingmagazine.com

    with the subject line [Typography Contest] Your_theme_title.

    Please state your name, your website’s URL and the country you are from. If possible, please also include a brief description of the ideas that were the driving force behind your design.
  4. Be creative, use unusual techniques, expand your skills! Do whatever it takes: we really want you to get excited about this.

Deadline Link

We’ll consider all designs that we receive by the 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

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

To start you off with a couple of ideas, here is a showcase of some excellent typographic layouts that have been designed over the last few months.

Typography Screenshot14

Typography Screenshot15

Typography Screenshot16

Typography Screenshot17

Typography Screenshot18

Typography Screenshot19

Typography Screenshot20

Typography Screenshot21

Typography Screenshot22

Typography Screenshot23

Typography Screenshot24

Typography Screenshot25

Typography Screenshot26

Useful Typographic Tools27

Useful Typographic Tools28

Useful Typographic Tools29

You can find details about the contest and some inspiration for your work in our announcement post30. Get excited, be creative and show us what you can do! Good luck, and we hope to hear from you soon!


Footnotes Link

  1. 1 http://www.smashingmagazine.com/2009/05/21/typographic-layout-design-contest-join-in-and-win/
  2. 2 http://typedeskref.com/
  3. 3 http://typedeskref.com/
  4. 4 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  5. 5 http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/
  6. 6 http://www.smashingmagazine.com/contest/blank-template.zip
  7. 7 http://novemberborn.net/sifr3
  8. 8 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
  9. 9 http://wiki.github.com/sorccu/cufon/about
  10. 10 http://facelift.mawhorter.net/
  11. 11 https://developer.mozilla.org/en/CSS/@font-face
  12. 12 http://validator.w3.org/
  13. 13 https://addons.mozilla.org/en-US/firefox/addon/5648
  14. 14 http://jasonsantamaria.com/
  15. 15 http://velthy.net/
  16. 16 http://www.gist.com/index.html
  17. 17 http://retinart.net/working-life/good-designers-ask-why
  18. 18 http://www.hugeinc.com/casestudies/
  19. 19 http://huwshimi.com/blog/
  20. 20 http://www.montylounge.com/
  21. 21 http://goodbarry.com/
  22. 22 http://www.tweetcc.com/
  23. 23 http://weblog.cynosura.eu/
  24. 24 http://waqasashraf.com/
  25. 25 http://www.shiftpx.com/
  26. 26 http://www.blackestate.co.nz/
  27. 27 http://jontangerine.com/
  28. 28 http://24ways.org/
  29. 29 http://www.wilsonminer.com/
  30. 30 http://www.smashingmagazine.com/2009/05/21/typographic-layout-design-contest-join-in-and-win/

↑ 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

    So are we allowed to use images at all? Such as background graphics?

    (SM) Yes, you are.

  2. 2

    Response to comment #1. You should take pride in being professional, and making quality code that validates. Anyone can fire up Dreamweaver and produce crap code. Do you want to be like them?

  3. 3

    When I saw the annoucement post last month, I decided not to participate because the deadline was supposed to be the 31st of May, and that was an incredibly short delay…
    Anyway, it’s too late to start now. But, for the next time, you should clearly announce when deadlines are corrected / delayed, that would prevent cases like mine.

  4. 4

    Must it only validate for CSS 2.1?

  5. 5

    … does any of this websites shown here can be validated properly?

  6. 6

    I´m just a little confused about the word “template” … does it have to something for a Blog or a CMS? Or could it be a static Site too … If Yes, how many Pages do you want (only Homepage, complete Site).
    My Fav-CMS is Textpattern, and I really dont know how to give you the Template-Files for this …

    (SM) It can be anything, a static page, too.

  7. 7

    Curt Simon Harlinghausen

    June 24, 2009 1:21 am

    Can’t wait for the results.
    I am very curious. Tension …..

  8. 8

    great contest! anyhow, dreamweaver doesn’t produce crap code…:(

  9. 9

    I’m thinking something with Comic Sans……. hmmmmmm

  10. 10

    I’m from Paraguay. Can I participate?

  11. 11

    To Brian Temecula :

    Validation doesn’t mean nothing. You can validate and still produce shit code!

  12. 12

    Chairman Pallian

    June 24, 2009 8:53 am

    Check out the typeface on this site: LINK

  13. 13

    I think I will enter just based on the fact I feel it will be an interesting exercise of my skills.

  14. 14

    Is it allowed to use a wordpress framework?

  15. 15

    Lucky 11 Studios

    June 24, 2009 12:12 pm

    Damn these “web design” contests… can’t you just make it a typographic DESIGN contest?!?

    Oh, well…. maybe next time.

  16. 16

    Please make sure to include as many rogue apostrophes as possible. It escapes me how modern designers can have no grasp of the written language even though they work with it every day. Are they really that ignorant? It is something that also sadly reflects in their styles as they seldom improve and only keep fresh by copying existing styles. :s

  17. 17

    wow this is a great competition, I wish I had head of it sooner, I don’t have time to now, but this is a great idea for a comp.

  18. 18

    if there was another week or two I would be able to enter. Dang full time job.

  19. 19

    Can it be animated Flash page or site, in the blank HTML page without CSS?

  20. 20

    I’m in, I’ll submit mine tonight :D

  21. 21

    I´m with Lucky 11, can´t we have a design contest without the web getting all up in it? I can hate code and love smashing at the same time y´know.

  22. 22

    in reply to fabio,
    dreamweaver is actually a great text editor. it has it even has code collapsing. last time i checked Coda does not.

  23. 23

    @sm Well, what happened to this contest? It’s already july…


↑ Back to top