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.

Free Typographic XHTML/CSS-Layouts For Your Designs

Advertisement

In May we announced the Typographic Layout Design Contest1 that aimed to collect beautiful typographic (X)HTML+CSS-based layouts created by the design community and release them for free as a gift for the web design community. The response was overwhelming and we really had a hard time going through the designs, analyzing them and deciding which templates deserve the awards. Unfortunately, many templates were just copies of the current designer’s blog and some weren’t related to typography at all. So in the end many templates didn’t make it to this post.

However, we did receive a number of brilliant typographic templates that we are happy to release for free download and personal and commerical use as the gift for the web design community. We hope that these templates will help you to improve the quality of typography in your future designs!

Winner (1st place): T-20 Link

T-20 [ preview2 | download3 ]
"The Layout is following the rules of Grid-Based-Design and aesthetical and readable type. I also tried to make everything only with CSS. The Images have to be replaced – blank PSD-Files in different fitting sizes are also attached. I know you won’t take this but it was a good chance to try out some things I always wanted to make – and I will go on with this." Designed by Nikolaj Sokolowski4 from Bremen/Germany.

Type Layout For Free Download - T-205

Winner (2nd place): Extreme Georgia Link

Extreme Georgia [ preview6 | download7 ]
"I hand-in a single-page template for blogs. The title for this work is Extreme Georgia. It is 100% Georgia-based, and I am aware that it is a bit old-school. However, the design itselft reflect back the concept that I want to bring, which is, content is the king. I took into account the colors, whitespaces, line-height, font-size and also the content width for this design.

It might look plain, but it can be customized easily, let’s say, the color of the links, background image can be added later, and also the background colors. My work is heavily influenced by many designers, such as Jason Santa Maria, Jon Tangerine, Tim Van Damme, Khoi Vinh, and especially, the Georgia font which was designed by Matthew Carter. Without them, I wonder where could I be now in web design industry." Designed by Mohd Huzairy Mohd Rezuan from Kuala Lumpur, Malaysia.

Type Layout For Free Download - Extreme Georgia8

Winner (3rd place): Experimental Link

Experimental [ preview 19 preview 210 | download11 ]
"A minimal blog theme inspired in the Swiss Style of Design: It features Arial/Helvetica, grids, a generous use of whitespace for better readability and a strong focus in typography. The idea was to design an universal WordPress theme that’s focused on content and images, with an invisible, yet sleek design. Authors can modify the header as they wish, including images or playing with typography as in the example. this layout was coded using EMs, so it doesn’t break when you make text size changes in your browser. It’s an elastic design." Designed by Rodrigo Galindez from Argentina.

Type Layout For Free Download - Experimental12

Greenie Theme Link

Greenie Theme [ preview13 | download14 ]
"Greenie Theme is suitable for portfolio site, but can be used elsewhere where client needs to show his works. I used big typographic claim for catch users attention and other typo elements. Like its name, theme used fresh green color for main content page, and for background." Designed by Ondrej Lechan from Slovakia.

Type Layout For Free Download - Greenie Theme15

Shalom Typo Link

Shalom Typo [ preview16 | download17 ]
Designed by David Hellmann18 from Cologne, Germany.

Type Layout For Free Download - Shalom Typo19

O’No! Typography Link

O’No! Typography [ preview20 | download21 ]
"The idea behind the layout was to create something very simple, but very detailed and adaptable. Cufon is the driving force behind most of the type itself, even the body text, which means that it looks fantastic in all browsers – even ones which don’t usually bother to anti-alias. The adaptable-ness of the theme comes from the way in which the css classes are constructed. They’re designed to work together to form different boxes of text.

For example, the class=”box small left” would create a box spanning 1 column, with a background image to support the heading tag, and float to the left. A variation would be class=”big right” – which would create a box spanning 2 columns with no background image, float to the right, and eliminate any extra margins. This means that it’s really easy to adapt and change the layout to suit your needs, a few examples of which are included!" Designed by John O’Nolan22 from United Kingdom.

Type Layout For Free Download - O'No! Typography23

Typographic Times Link

Typographic Times [ preview24 | download25 ]
"This was mostly motivated by my desire to play around a bit with @font-face, which I don’t usually get to do. I stumbled upon a lovely imitation of Bembo at Font Squirrel and based a lot of the design off its italic (though it works fine with Georgia as well). I knew I wanted to try to do something very clean and restrained, and decided on a news blog–typography themed, of course–and went from there. I took inspiration from a number of places, most strongly from typographica.org26 (for the general page structure) and http://weblog.cynosura.eu27 (for the top navigation)." Designed by Evan Hensleigh28 from United States.

Type Layout For Free Download - Geotypisch template29

Geotypisch Link

Geotypisch [ preview30 | download31 ]
"Pure CSS and XHTML, no images, no JavaScript. Fonts used are Georgia and Arial. This template contains 2 example posts, one with comments, a comment form and a sidebar. Boxes are build using the 16 column 960 grid system. " Designed by Otto Coster32 from Netherlands.

Type Layout For Free Download - Geotypisch template33

Megan Link

Megan [ preview34 | download35 ]
"The basic idea behind this site design was to create a visually stimulating layout with typography. Because the site is to be used as a template I chose to layout the type in Times New Roman. I feel that as of lately I see the web-based font Georgia being used a lot and Times New Roman seemed to be a little more unique and has a lighter, more sophisticated feel. Also, keeping in mind that the design was for a template, I decided to make the background and type a neutral color and then accented it with a bold red/orange color.

I thought this way people could switch up their bold color to whatever they would like for easy customization. Another common theme carried out throughout the site design is the horizontal line element. This element is used in the navigation, to help break up blocks of information, and to underline words or links. Overall the idea was to create a template with an overall typographic foundation that could be easily customizable and I believe this design successfully does that." Designed by Megan Sullivan36 from Grand Rapids, Michigan, USA.

Type Layout For Free Download - Website Contest Entry37

Maintenance Link

Maintenance [ preview38 | download39 ]
"Maintenance pages are never something that a person wants to see. By adding more elements (such as a timeline, alternate entertainment, and contact information), the page will be more interesting to view and thus make someone more likely to come back when the site is back. The idea of making it look like a card made it seem more like a noticed posted on an office door by a secretary that was using whatever was lying around." Designed by Ryan King40 from United States.

Type Layout For Free Download - Maintenance 41

WP Typo Link

WP Typo [ preview42 | download43 ]
"WP Typo is purely typographic, no images used whatsoever. There isn’t any grand ideology here, it’s just a simple and hopefully nice looking theme for sites where writing is the focus." Designed by Chris Coyier44 from United States.

Type Layout For Free Download - WP Typo45

theARTofTYPE Link

theARTofTYPE Typography Blog Template [ preview46 | download47 ]
"A Very Light Blog Template. " Designed by Jan Harold Diaz from Philippines.

Type Layout For Free Download - theARTofTYPE Typography Blog Template48

David Kruger Link

David Kruger [ preview49 | download50 ]
Designed by David Kruger51 from Paraguay.

Type Layout For Free Download - David Kruger52

Top Notch Link

Top Notch [ preview53 | download54 ]
"I designed “Top Notch” as a template that would allow the end user feel like they were a part of a conversation." Designed by Garth Braithwaite55 from US.

Type Layout For Free Download - Top Notch56

Simple Type Link

Simple type [ preview57 | download58 ]
"A minimalistic & typographic layout, based on a 960 pixels grid system." Designed by Ahmed Chergaoui59 from Agadir, Morocco.

Type Layout For Free Download - Simple type60

Anticipated Link

Anticipated [ preview61 | download62 ]
"A simple typographic portfolio template. " Designed by Markus Müller63 from Stuttgart, Germany.

Type Layout For Free Download - Anticipated64

MiniCon Link

MiniCon [ preview | download65 ]
"Half minimalism and half contrasting colours, suited mainly for magazine type website but could be used for many other things too of course. My main inspirations were various WordPress themes and typography websites from smashing magazine’s collection of 100 wordpress themes for 2009 and minimalsites.com. It uses the 960 grid system CSS framework, Cufon text replacement and JQuery. The photos are from various free stock websites." Designed by Joe Brightwell66 from New Zealand.

Type Layout For Free Download - MiniCon67

The theme Link

Theme [ preview68 | download69 ]
Designed by Leo DINH from Vietnam.

Type Layout For Free Download - Theme70

Typo E-mag Link

Typo E-mag [ preview71 | download72 ]
"A nice typographic template, looks like a blog’s main page. Main features are: nice color scheme, nice typography, nice sidebar (some people like to say “widget ready”) and nice footer. I know that there are missing comments numbers, but who on the Earth does need comments? Main colors are #fff, #cfcfcf, #c40000, #666, and #444. Hope you like it. Yeah, and it’s my first template." Designed by Matej Grabovský73 from Czech Republic.

Type Layout For Free Download - Typo E-mag74

Luvbold Link

Luvbold [ preview75 | download76 ]
"Simple and clean layout with bold and characteristic fonts." Designed by Wojtek Konieczny77 from Poland.

Type Layout For Free Download - Luvbold78

Happy Go Try Link

happy-go-try [ preview79 | download80 | release post of the WordPress theme81 (thanks, Alex Denning) ]
"This theme is designed to be light-weight and flexible. It is based on a modified grid system. I believe it has potential for a number of types of websites. I’ve included the source .png file to make it easier for you to modify the color scheme as you see fit. No link-backs to my site are necessary, although I’d GREATLY appreciate if you’d email me a link to theme in action if you use it! Since it’s designed to be flexible, feel free to modify it to your needs and let me know how it works out!

I wanted to make my template light-weight and flexible. Standard HTML typography is used extensively to make it easy to edit, quick to load, and optimal for SEO. It’s based off of a modified grid to allow many different uses. In addition, I have included a rough fireworks source file to make it easier for users to change the color scheme. The name, happy-go-try, is an anagram of “typography” and is supposed to represent the light-weight, light-hearted approach I took with this simple, but flexible design." Designed by Tyler Dawson82 from Iowa City, IA, USA.

Type Layout For Free Download - happy-go-try83

Eastern Tales Link

Eastern Tales [ preview84 | download85 ]
"I wanted a simple theme that would rely less on graphics, and more on color layout and type to let the content stand out. I chose the paper background to create texture. After choosing one from cgtexture.com, the texture reminded me of a paper made from elephant dung [called Elli Poo I think].

So then I thought of a line drawing motif for the generic logo. [hoping it would look letterpress..] The motif is another way of drawing ganesha, the elephant god. I hand drew ganesha using wacom graphire in Gimp app, on Mac OS X. I also hand drew the twitter bird directly on the tablet. I hand coded the files using text wrangler.

I kept the colors to a minimum [pink/black/white] to keep attention on the text. " Designed by Lakshmi Mareddy86 from India, presently in the US.

Type Layout For Free Download - Eastern tales87

Paivi K Link

Template Paivi_k [ preview88 | download89 ]
"The idea of the template was to design a simple but powerful look for my personal blog. I usually tend to provoke a bit in my blog (with a sence of humour), maybe sometimes not being so nice to things and people that I critizise. Therefore the blog’s name became “The ugly colors of me” – which indicades into the content: “the not so pretty thoughts of me “. The layout color theme also derives from the same reasons and therefore strengthen the impact. " Designed by Päivi Karjalainen from Finland.

Type Layout For Free Download - Template Paivi_k90

Better Web Readability Link

Better Web Readability [ preview91 | download92 ]
Designed by Vladimir Carrer93 from Verona, Italy.

Type Layout For Free Download - Better Web Readability94

CMYKolours Link

CMYKolours [ preview95 | download96 ]
"CMYKolours is a blog based website layout founded on the CMYK colour scheme, I feel it stands out for numerous reasons, I love trying to experiment with both creative typography and colour palettes. In this layout I feel I have achieved both. On a sidenote, this template will be available for free download on my blog as a wordpress skin." Designed by Dan Walker97 from UK.

Type Layout For Free Download - CMYKolours98

Goliath Link

Goliath [ preview99 | download100 ]
"A two-column blog-template with lots of white-space and big letters." Designed by Emanuel Kluge101.

Type Layout For Free Download - goliath102

Cornballs Link

Cornballs [ preview103 | download104 ]
"This is a simple, lazy design, sort of inspired by the famous Keep Calm and Carry On poster. It makes use of one exciting CSS3 features documented in a recent Smashing Magazine’s article about CSS columns. This is a special treat for users of Gecko and WebKit browsers, and don’t worry because it looks perfectly decent in browsers which don’t support this feature – IE6 is not going to go “pop”. Aligned to both a horizontal and vertical grid, each row of the latter being 24 pixels high. " Designed by Joshua Goodwin105 from England.

Type Layout For Free Download - Сornballs-template106

viCard Link

viCard [ preview107 | download108 ]
"viCard (Virtual Identity Card) is based on the idea presenting your (business) card in the web by answering three simple questions: who are you? how to contact you? how to follow you? You can share your contact information and your recent activity on Flickr, Twitter or Delicious. Integrated hCard, vCard, screen-, print- and mobile/handheld-friendly. Valid HTML 4.01 Strict and CSS 2.1." Designed by Simon Gattner109 from Berlin, Germany.

Type Layout For Free Download - viCard110

Typo Today Link

Typo Today [ preview111 | download112 ]
"The idea of this theme is newspaper layout. This theme is designed for blog or portfolio." Designed by Edwin Lunandy113 from Orlando, FL.

Type Layout For Free Download - Typo Today114

JavaScript Tricks Link

JavaScript Tricks [ preview115 | download116 ]
“I’ve decided to try my design skills that I’ve collected while working on that 2 positions and create practically my first comp for you contest. So, the main idea is about usign JS, PNG and aesthetic of ligatures and shapes that can be created with spaces/negative spaces of letter forms. Usign Cufon and some of JS functions together with CSS absolute positioning I make random compositions of such a forms with some other features. I’m trying to show that design should be transcend, something more than just sum of technologies and resources that were used. Hope my message will be clear. Fonts used for Cufon: Cardo98, Lacuna.”Designed by Siarhei Mardovich117 from Belarus.

Type Layout For Free Download - JavaScriptTricks118

Contrast Link

Contrast [ preview119 | download120 ]
"My aim as a designer is to keep it clean and simple but with a twist. Unnecessary mouse clicks is the worst and objects which doesn’t add anything goes right out of the window, so for me, designing this template has been a real challenge. To keep it simple but still change focus, from the actual content on to the shell of the web site. Therefore, I had to break some of my own ground rules.

01. One extra mouse click: In order to view the actual content you have to click at least two times, one to expand the category and one to go to the project page. I choose to do it this way because I wanted the user to get a overview when he/she enters the site and to give each project it’s own page to make permalinking easier and to give the project the right amount of focus.

Because the task was to focus on the typographic I choose to add some unnecessary typographic details, this to make the site feel more complete. Because of the focus on typography and the above mentioned unnecessary details and my Swedish design heritage I choose to tone down the colours and stick to just black and white. I’ve exclusively used arial as the font, in different sizes, upper and lower case, and in different kering. This because I wanted to stick with a web safe font, and this where also a challenge, to make a web safe font become interesting, to make it stand out.

I choose to make a wordpress template just because I think wordpress is a very powerful tool to use these days. The target group for the template is someone who wants a portfolio or a smaller company that wants to showcase their work. Theme made for Smashing Magazine Typographic Layout Design Contest." Designed by Paul Linder121 from Sweden.

Type Layout For Free Download - Contrast122

Brown Typo Link

Brown Typo [ preview123 | download124 ]
"Do you love brown? Brown Typo is based on simplicity and brown." Designed by Vincenzo Milone125 from Italy.

Type Layout For Free Download - Brown Typo126

Exploring Web Typography Link

Exploring Web Typography [ preview127 | download128 ]
Designed by Matthew Taylor.

Type Layout For Free Download - Exploring Web Typography129

Ihsanrama Link

Ihsanrama [ preview130 | download131 ]
"My design is just want people hear what I am saying. So I called that “Ihsanrama says”.
You know.. just like in the movie Die Hard 3 there is man name Simon, always said : “Simon says…”." Designed by Ihsan Satria Rama132 from Indonesia.

Type Layout For Free Download - Ihsanrama says133

Blue Inc Link

Blue Inc [ preview134 | download135 ]
"My template is called “Blue Inc” because it was designed for use on a corporate website and the dominant color used is blue. It is a grid based design, but, as I didn”t want to take the time to decipher someone else’s grid system and since I figured the template should be completely original, I wrote my own grid system with perfect vertical rhythm." Designed by Kyle Wall136 from United States of America.

Type Layout For Free Download - Blue Inc137

Whoo! Link

Whoo! [ preview138 | download139 ]
"The template has as content the lyrics to The Rapture’s “Whoo! Alright yeah… uh huh”, so it’s a fun and light design." Designed by Victor Abadio140 from Brazil.

Type Layout For Free Download - Whoo!141

Worldlines Link

Worldlines [ preview142 | download143 ]
"Worldlines is a concept design for a News website. Mostly today’s news is treated differently from that of yesterday. Whereas in reality, most news stories span across days. The format we have designed gives the user a sense of where today and today’s stories, stand with respect to those of yesterday and so on, and at a glance.

The layout is designed so that it can be scanned and preview quickly. The color-coding and top navigation give the user control over what categories s/he wants to preview. The news items will be ordered according to importance and the stories published previously can be viewed by navigating to the particular date using the navigation at the bottom. And of course typography was our main focus area." Designed by Harshad Kulkarni, Sarang Norway and Sandesh Halarnkar144 from Bangalore, India.

Type Layout For Free Download - Worldlines145

Hot box Link

Hot box [ preview146 | download147 ]
"I have named my product (iron box) – ‘HOT BOX’. I chose iron box as my product ,as it has its own charcter (smooth ironing,wrinkle free clothes,crisp fabric etc.) & and which is seen by all daily.As I also did some research on Iron Boxes,very facinating. I just love the variation in grays & they are great for product site,. As it has the character (gray color ) strong presentation feel. The typo used is simple Arial font.Product on the page is dipicted with the features of the product, which is the main high light of the site." Designed by Smitha Patwardhan148 from Bangalore, India.

Type Layout For Free Download - HOT BOX149

Safe As Houses Link

Safe As Houses [ preview150 | download151 ]
"As you can see my inspiration was to create a simple, adaptable template using only web safe fonts as I think there is a lot than can be done with them structurally and within css without always having to use other replacement techniques. I had hoped to port it into a wordpress theme (and still plan to) but didn’t have time before this deadline.

I should also point out that although the XML file does produce validation errors these are from the Twitter and Flickr scripts (both are from the official sites) in the footer and not the template itself.." Designed by Susan Pierce Sloan152.

Type Layout For Free Download - Safe As Houses153

ILuvType Link

ILuvType [ preview154 | download155 ]
"ILuvType is a clean, typographic heavy theme that uses simple device fonts as a design element to create a clean, easy on the eyes, high contrast reading environment. The theme includes 4 page templates and a series of 5 different highlight colour schemes. The theme validates as HTML5 – it uses a small amount of Javascript and Jquery to achieve the necessary effects." Designed by Alex Holt156 from United Kingdom.

Type Layout For Free Download - ILuvType157

Pink Elephant Link

Pink Elephant [ preview158 | download159 ]
"This template is all about keeping the layout simple and functional while obtaining an aesthetic and rather original look. My primary source of inspiration was 24ways.org, and resources used includes an article on CSS-tricks about RGBa browser support. " Designed by Bjørn Friese160 from Denmark.

Type Layout For Free Download - Pink Elephant Solutions161

Smash My Typo Link

Smash My Typo [ preview162 | download163 ]
"My goal was to create a blog page with lots of text but still having a good amount of white space. I was aiming for some kind of media blog directed to young adults. First I wanted to create an ajax interface dynamically fetching news from rss feeds and videos from vimeo. But as I saw the contest just a few days before deadline, I realized there was not enough time. I am planning on creating the javascript files later as an addon to the theme.

The text in the blog posts are done like in print for books; Justified text with the first paragraph not being indented, but the rest of the paragraphs has text-indentation. This is done instead of separating the text with line-spacing. The reader does not get interupted by recurring gaps in the text and gets a smooth reading as when reading books.

I have a lot of Ideas of how to improve this template, but there is just no time. Creation Time: Design 9h, CSS 9h, Total 18h." Designed by Alexander Dahlberg164 from Sweden.

Type Layout For Free Download - Smash my Typo165

TypoGra Link

TypoGra [ preview166 | download167 ]
"TypoGra is more of a standard blog layout. I tried keeping everything as simplistic as possible (there are 2 images in total)." Designed by Gary Simon 168 from USA – Ohio.

Type Layout For Free Download - TypoGra169

Goldrenrod Link

Goldrenrod [ preview170 | download171 ]
"A special typographic template for businesses.
My immediate thought upon hearing about this contest was how well a typographic website design could work for a small business. I’ve found from my experience that small business websites are usually text heavy but not really graphic oriented and don’t have a need of bells and whistles like login systems, e-commerce, forums, etc. With that in mind, my goal was to create an interesting yet simple website design a small business could use while relying on text to really do the selling.

I also wanted the design to be easily modifiable to allow for just about any type of business, so the only really distinct elements are the logo, the image on the front page and the slight texture on the footer. In addition, I thought that many companies could use a place to show off their work, especially if they’re service oriented- hence, the showcase section. I hope you like it!" Designed by Lindsey Devlin172 from USA.

Type Layout For Free Download - Goldrenrod173

An Ordered Aesthetic Link

An Ordered Aesthetic [ preview174 | download175 ]
"This is a very clean, typographic, and minimal template based on the “960 grid”. I wanted to create a functional theme where everything had a purpose. In doing so, the end result was an orderly, uncluttered, thus eye-pleasing design.

I wanted to create a functional theme where everything had a purpose. In doing so, the end result was an orderly, uncluttered, thus eye-pleasing design. Also, I included an alternate stylesheet in the CSS folder for a darker version of the theme. I like the lighter version much more, but it is there if anyone wants to use it. " Designed by Greg Ponchak176 from USA.

Type Layout For Free Download - An Ordered Aesthetic177

Dynamic-Fresh Link

Dynamic-Fresh [ preview178 | download179 ]
"I wanted to create a very simple layout using only Helvetica as a typeface and a simple greyscale colour scheme. This would be good for anyone wanting to show off their work with pride and in a stylish but minimalistic way." Designed by Matthew Kempster from Milton Keynes, England (United Kingdom).

Type Layout For Free Download - Dynamic-Fresh180

Thank you! Link

Congratulations to the winners of the contest – Nikolaj Sokolowski (Bremen, Germany), Mohd Huzairy Mohd Rezuan (Kuala Lumpur, Malaysia) and Rodrigo Galindez (Argentina) have already been contacted. We express sincere gratitude for all the great work of the designers who were featured in this post or submitted their work for this contest. We really appreciate your efforts and your good intentions! Thank you very much and please join in next time – more contests are coming soon!

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/05/21/typographic-layout-design-contest-join-in-and-win/
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/t20/index.html
  3. 3 https://www.smashingmagazine.com/images/type-layouts/t20.zip
  4. 4 http://www.sokolowski-design.de
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/t20/index.html
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/extreme-georgia/index.html
  7. 7 https://www.smashingmagazine.com/images/type-layouts/extreme-georgia.zip
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/extreme-georgia/index.html
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/experimental/scr1.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/experimental/scr2.png
  11. 11 https://www.smashingmagazine.com/images/type-layouts/experimental.zip
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/experimental/index.html
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/greenie-theme/index.html
  14. 14 https://www.smashingmagazine.com/images/type-layouts/greenie.zip
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/greenie-theme/index.html
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/shalom-typo/index.html
  17. 17 https://www.smashingmagazine.com/images/type-layouts/shalom-typo.zip
  18. 18 http://www.davidhellmann.com
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/shalom-typo/index.html
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/o-no-typography/index.html
  21. 21 https://www.smashingmagazine.com/images/type-layouts/o-no-typography.zip
  22. 22 http://john.onolan.org
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/o-no-typography/index.html
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typographic-times/index.html
  25. 25 https://www.smashingmagazine.com/images/type-layouts/typographic-times-template.zip
  26. 26 http://www.typographica.org
  27. 27 http://weblog.cynosura.eu/
  28. 28 http://www.futuraprime.net/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typographic-times/index.html
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/geotypisch-template/index.html
  31. 31 https://www.smashingmagazine.com/images/type-layouts/geotypisch-template.zip
  32. 32 http://www.ottonova.nl/
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/geotypisch-template/index.html
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/megan/index.html
  35. 35 https://www.smashingmagazine.com/images/type-layouts/megan.zip
  36. 36 http://www.megancreative.com
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/megan/index.html
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/maintenance/index.html
  39. 39 https://www.smashingmagazine.com/images/type-layouts/maintenance.rar
  40. 40 http://www.ryan-king.com
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/maintenance/index.html
  42. 42 http://diggingintowordpress.com/ThemePlayground/index.php?wptheme=WPTypo
  43. 43 https://www.smashingmagazine.com/images/type-layouts/wptypo.zip
  44. 44 http://diggingintowordpress.com
  45. 45 http://diggingintowordpress.com/ThemePlayground/index.php?wptheme=WPTypo
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/the-art-of-type/index.html
  47. 47 https://www.smashingmagazine.com/images/type-layouts/the-art-of-type.zip
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/the-art-of-type/index.html
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/davidkruger/index.html
  50. 50 https://www.smashingmagazine.com/images/type-layouts/davidkruger.zip
  51. 51 http://www.buenasideaspy.com
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/davidkruger/index.html
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/top-notch/index.html
  54. 54 https://www.smashingmagazine.com/images/type-layouts/top-notch.zip
  55. 55 http://www.garthdb.com
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/top-notch/index.html
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/simple-type/index.html
  58. 58 https://www.smashingmagazine.com/images/type-layouts/simple-type.zip
  59. 59 http://chergaoui.com
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/simple-type/index.html
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/anticipated/index.html
  62. 62 https://www.smashingmagazine.com/images/type-layouts/anticipated.zip
  63. 63 http://www.hamsterbau.com
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/anticipated/index.html
  65. 65 https://www.smashingmagazine.com/images/type-layouts/minicon.zip
  66. 66 http://www.pukekodesigns.co.nz
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/minicon/index.html
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/bio/index.html
  69. 69 https://www.smashingmagazine.com/images/type-layouts/bio.zip
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/bio/index.html
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typo-e-mag/index.html
  72. 72 https://www.smashingmagazine.com/images/type-layouts/typo-e-mag.zip
  73. 73 http://www.mgrabovsky.is-game.com
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typo-e-mag/index.html
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/luvbold/index.html
  76. 76 https://www.smashingmagazine.com/images/type-layouts/luvbold.zip
  77. 77 http://gaelian.carbonmade.com/
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/luvbold/index.html
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/happy-go-try/index.html
  80. 80 https://www.smashingmagazine.com/images/type-layouts/happy-go-try.zip
  81. 81 http://wpshout.com/free-wordpress-portfolio-personal-blog-theme-happy-go-try/
  82. 82 http://www.tyler-dawson.com/
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/happy-go-try/index.html
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/eastern-tales/index.html
  85. 85 https://www.smashingmagazine.com/images/type-layouts/eastern-tales.zip
  86. 86 http://chilligavva.com
  87. 87 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/eastern-tales/index.html
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/paivi-k/index.html
  89. 89 https://www.smashingmagazine.com/images/type-layouts/paivi-k.zip
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/paivi-k/index.html
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/better-web-readability/index.html
  92. 92 https://www.smashingmagazine.com/images/type-layouts/better-web-readability.zip
  93. 93 http://www.vcarrer.com
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/better-web-readability/index.html
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/cmykolors/index.html
  96. 96 https://www.smashingmagazine.com/images/type-layouts/cmykolors.zip
  97. 97 http://www.dans-blog.com/
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/cmykolors/index.html
  99. 99 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/goliath/index.html
  100. 100 https://www.smashingmagazine.com/images/type-layouts/goliath.zip
  101. 101 http://www.emanuel-kluge.de
  102. 102 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/goliath/index.html
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/cornballs-template/index.html
  104. 104 https://www.smashingmagazine.com/images/type-layouts/cornballs-template.zip
  105. 105 http://joshuagoodwin.com
  106. 106 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/cornballs-template/index.html
  107. 107 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/vicard/index.html
  108. 108 https://www.smashingmagazine.com/images/type-layouts/vicard.zip
  109. 109 http://gedit.net/
  110. 110 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/vicard/index.html
  111. 111 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typo-today/index.html
  112. 112 https://www.smashingmagazine.com/images/type-layouts/typo-today.zip
  113. 113 http://population-2.com
  114. 114 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typo-today/index.html
  115. 115 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/javascript-tricks/index.html
  116. 116 https://www.smashingmagazine.com/images/type-layouts/javascript-tricks.zip
  117. 117 http://niemahchymy.at.tut.by/
  118. 118 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/javascript-tricks/index.html
  119. 119 http://www.paullinder.se/contrast
  120. 120 https://www.smashingmagazine.com/images/type-layouts/contrast.zip
  121. 121 http://www.paullinder.se
  122. 122 http://www.paullinder.se/contrast
  123. 123 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/browntypo/screenshot.png
  124. 124 https://www.smashingmagazine.com/images/type-layouts/browntypo.zip
  125. 125 http://www.espressodesing.it
  126. 126 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/browntypo/screenshot.png
  127. 127 http://matthewjamestaylor.com/exploring-web-typography/index.html
  128. 128 https://www.smashingmagazine.com/images/type-layouts/exploring-web-typography.zip
  129. 129 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/exploring-web-typography/index.html
  130. 130 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/ihsanrama-says/index.html
  131. 131 https://www.smashingmagazine.com/images/type-layouts/ihsanrama-says.zip
  132. 132 http://ihsanrama.isgreat.org
  133. 133 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/ihsanrama-says/index.html
  134. 134 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/blue-inc/index.html
  135. 135 https://www.smashingmagazine.com/images/type-layouts/blue-inc.zip
  136. 136 http://www.creativeliberties.com/
  137. 137 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/blue-inc/index.html
  138. 138 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/whoo/index.html
  139. 139 https://www.smashingmagazine.com/images/type-layouts/whoo.rar
  140. 140 http://www.behance.net/unaghii
  141. 141 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/whoo/index.html
  142. 142 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/worldlines/index.html
  143. 143 https://www.smashingmagazine.com/images/type-layouts/worldlines.zip
  144. 144 http://www.harshadkulkarni.com
  145. 145 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/worldlines/index.html
  146. 146 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/hot-box/index.html
  147. 147 https://www.smashingmagazine.com/images/type-layouts/hot-box.zip
  148. 148 http://rhythumdesign.wordpress.com
  149. 149 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/hot-box/index.html
  150. 150 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/safe-as-houses/index.html
  151. 151 https://www.smashingmagazine.com/images/type-layouts/safe-as-houses.zip
  152. 152 http://www.theearlybird.co.uk
  153. 153 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/safe-as-houses/index.html
  154. 154 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/i-luv-type/index.html
  155. 155 https://www.smashingmagazine.com/images/type-layouts/i-luv-type.zip
  156. 156 http://soyrex.com/
  157. 157 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/i-luv-type/index.html
  158. 158 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/pink-elephant/index.html
  159. 159 https://www.smashingmagazine.com/images/type-layouts/pink-elephant-solutions.zip
  160. 160 http://frieze.dk
  161. 161 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/pink-elephant/index.html
  162. 162 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/smash-my-typo/index.html
  163. 163 https://www.smashingmagazine.com/images/type-layouts/smash-my-typo.zip
  164. 164 http://www.alexanderdahlberg.com
  165. 165 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/smash-my-typo/index.html
  166. 166 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typogra/index.html
  167. 167 https://www.smashingmagazine.com/images/type-layouts/typogra.zip
  168. 168 http://www.garysimon.net
  169. 169 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/typogra/index.html
  170. 170 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/binaryd-goldenrod/index.html
  171. 171 https://www.smashingmagazine.com/images/type-layouts/binaryd-goldenrod.zip
  172. 172 http://www.binaryd.com
  173. 173 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/binaryd-goldenrod/index.html
  174. 174 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/an-ordered-aesthetic/index.html
  175. 175 https://www.smashingmagazine.com/images/type-layouts/an-ordered-aesthetic.zip
  176. 176 http://www.gregponchak.com
  177. 177 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/an-ordered-aesthetic/index.html
  178. 178 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/dynamic-fresh/index.html
  179. 179 https://www.smashingmagazine.com/images/type-layouts/dynamic-fresh.zip
  180. 180 https://www.smashingmagazine.com/wp-content/uploads/images/type-layouts/dynamic-fresh/index.html
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

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 UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    GORGEOUS! i love the first one so much! good job everyone!!!

    there were one or two where swear i’ve seen it before would’ve liked to see something more original designs but overall i think everyone did an amazing job!

    0
  2. 2

    Sweet and Simple….Nice Collection !! My favorite is “O’No! Typography”

    DKumar M.
    @instantshift

    0
  3. 3

    My design didn’t make the top count, but it’s nice to see it on smashingmagazine.com =]

    0
  4. 4

    greenie rocks ! nice collection :-)

    0
  5. 5

    Nice Collection

    0
  6. 6

    Best post ever!!

    Well.. maybe not ever, but I’m a huge fan of Typo layouts.

    Love it!

    0
  7. 7

    NOW. what would i do without SM?

    0
  8. 8

    sehr sehr nett! :)

    0
  9. 9

    Some nice elements here and there, but I must admit, overall I’m a little disappointed.

    1
  10. 10

    OMG! w00t w00t w00t to Extreme Georgia by Mohd Huzairy!!!

    u rock bat!!!

    0
  11. 11

    What a great selection of designs, congratulations to the winners and to those featured.

    0
  12. 12

    Great collection of designs. I’d have to say my favorites are:

    Megan
    The Art of Type
    David Kruger
    Luvbold
    Typo E-Mag
    Brown Typo

    Thanks for the solid inspiration and layouts!

    0
  13. 13

    Experimental is absolutely tremendous! (:

    0
  14. 14

    Congrats to the winners, these are some really nice themes! Can’t wait for the next contest.

    0
  15. 15

    thanks SM team for publishing my layout!! I designed David Kruger
    I’m very happy about this!! and the winners made excellent work!! congratulations for every one who participate in this contest!!

    0
  16. 16

    Excellent results for a well thought out competition, well done to all the entrants, especially the winners! and well done too Smashing!

    0
  17. 17

    Absolutely beautiful! Can’t wait to try using these in some of my web designs!

    0
  18. 18

    Some of these are truly fantastic; I think you picked the right winner. Thanks for running this contest.

    dm

    0
  19. 19

    Nikolaj Sokolowski

    July 8, 2009 10:41 am

    Hi Everybody,
    I can´t say how happy and surprised I am to be the Winner here – I really didn´t expect that! But I have to say there are others that could be in my place too – I think the differences are really minimal.
    Thanks to everybody here and especially to the SM-Team who makes the creative juices flow on by delivering usefull information and constant inspiration.

    0
  20. 20

    Dear SM, thanks for accepting my submission(Extreme Georgia) and made it into the list. I am really honored.

    And congratulations to Nikolaj Sokolowski for being the 1st winner. Your works is truly amazing!

    0
  21. 21

    Thanks SM for featuring my design. Some great others too.

    0
  22. 22

    Matěj Grabovský

    July 8, 2009 10:57 am

    Sweet, I’m a huge fan of typographic layouts. Most of those are very good. Also very nice choice for the first three places.

    0
  23. 23

    Damned ! I’m deceived. I was waiting for the result for month. Templates are so classic. i was waiting for creativity and originality. Paul Linder’s and Matthew Taylor’s designs are nice & clever.

    0
  24. 24

    I’m so disappointed. Typography… maybe. But all the designs I previewed were fixed-width… Centered or left-aligned, matters not. They are all stuck to a certain width, and quite wide at that, and show horizontal scrollbar if the window width is below that. A nice collection of junk.

    0
  25. 25

    Vladimir Carrer

    July 8, 2009 11:26 am

    Thank you for including my design. The other templates are very beautifully, my compliments to all designs.

    0
  26. 26

    Ahmed Chergaoui

    July 8, 2009 11:26 am

    Thank you SM for featuring all these beautiful sumbissions!
    And I’m happy to be one them :)

    0
  27. 27

    Wow, absolute amazing templates. Great to see some german designers here :)

    Luvbold indeed is the greatest template, thanks Wojtek for sharing!

    0
  28. 28

    Contrast and O’No! Typography – they are fantastic. The idea behind Contrast is awesome.

    0
  29. 29

    Ian Storm Taylor

    July 8, 2009 11:43 am

    I still love WP Typo the most.

    0
  30. 30

    Nice article and nice themes, thanks for the contributions. It must have been hard to pick a winner. One that is worthy of honorable is Megan, it is quite good and reminds me what you can do with tnr.

    0

↑ Back to top