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.
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.
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.
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).
In order to participate, please follow the following steps:
- 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),
- download our blank template17,
- 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,
- make sure that the design looks fine in modern browsers (Firefox 3, Internet Explorer 7+, Opera 9.6, Safari 3.1, Google Chrome etc.),
- make sure that your code passes the W3C validation test23.
Once the template is done,
- create a fullscreen screenshot of your template (you can use Fireshot Firefox Extension24 to create fullscreen screenshots).
- and pack everything (the screenshot and the template) in a .zip-file,
- send your .zip-file via e-mail at: firstname.lastname@example.org
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.
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.
Other Resources Link
17 Stimulating Flickr Groups to Get You Typographically Inspired42
This is a list of some of the best typography Flickr groups to feed your creative appetite.
To get more typographic inspiration, please visit the following posts and resources:
- Inspirational Examples of Amazing Layout and Typography46
- Typography Served47
- I Love Typography50
- Huge Typography Inspiration Showcase51
You may consider taking a closer look at the following posts from Smashing Magazine:
- Creative Print Typography Layouts52
- 50 Useful Design Tools For Beautiful Web Typography53
- 15 Beautiful High-Quality Fonts54
- 40+ Excellent Freefonts For Professional Design55
- 50 Useful CSS-Tools56
- Typographic CSS-Tools57
- sections Fonts58 and CSS59.
Get creative, folks!
- 1 https://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
- 2 https://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/
- 3 http://www.face37.com/
- 4 http://www.face37.com/
- 5 http://typedeskref.com/
- 6 http://typedeskref.com/
- 7 http://shop.ugmonk.com/category/tees
- 8 http://shop.ugmonk.com/
- 9 http://www.bonjourmoncoussin.com/en/index.php?act=1,12
- 10 http://www.bonjourmoncoussin.com/en/index.php?act=1,12
- 11 http://dehac.de/seiten/haptic/haptic.html
- 12 http://dehac.de/seiten/haptic/haptic.html
- 13 http://www.graphic-design.com/Type/vintage_type/index.html
- 14 http://yalepress.yale.edu/yupbooks/book.asp?isbn=9780300106763
- 15 http://www.graphic-design.com/Type/vintage_type/index.html
- 16 http://yalepress.yale.edu/yupbooks/book.asp?isbn=9780300106763
- 17 https://www.smashingmagazine.com/contest/blank-template.zip
- 18 http://novemberborn.net/sifr3
- 19 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
- 20 http://wiki.github.com/sorccu/cufon/about
- 21 http://facelift.mawhorter.net/
- 22 https://developer.mozilla.org/en/CSS/@font-face
- 23 http://validator.w3.org/
- 24 https://addons.mozilla.org/en-US/firefox/addon/5648
- 25 http://jasonsantamaria.com/
- 26 http://velthy.net/
- 27 http://www.gist.com/index.html
- 28 http://retinart.net/working-life/good-designers-ask-why
- 29 http://www.hugeinc.com/casestudies/
- 30 http://huwshimi.com/blog/
- 31 http://www.montylounge.com/
- 32 http://goodbarry.com/
- 33 http://www.tweetcc.com/
- 34 http://weblog.cynosura.eu/
- 35 http://waqasashraf.com/
- 36 http://www.blackestate.co.nz/
- 37 http://jontangerine.com/
- 38 http://24ways.org/
- 39 http://www.wilsonminer.com/
- 40 http://www.markdearman.com/
- 41 http://fixieconsulting.com/
- 42 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
- 43 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
- 44 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/
- 45 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/
- 46 http://speckyboy.com/2008/06/15/32-inspirational-examples-of-amazing-layout-and-typography/
- 47 http://www.typographyserved.com/
- 48 http://typesites.com/
- 49 http://www.typeneu.com/
- 50 http://www.ilovetypography.com
- 51 http://designm.ag/inspiration/typography-showcase/
- 52 https://www.smashingmagazine.com/2009/04/21/creative-print-typography-layouts/
- 53 https://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
- 54 https://www.smashingmagazine.com/2008/11/24/15-beautiful-high-quality-free-fonts/
- 55 https://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
- 56 https://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
- 57 https://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
- 58 https://www.smashingmagazine.com/category/fonts/
- 59 https://www.smashingmagazine.com/category/css/
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.