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 Rezuan8 from Kuala Lumpur, Malaysia.

Type Layout For Free Download - Extreme Georgia9

Winner (3rd place): Experimental Link

Experimental [ preview 110 preview 211 | download12 ]
"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 Galindez13 from Argentina.

Type Layout For Free Download - Experimental14

Greenie Theme Link

Greenie Theme [ preview15 | download16 ]
"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 Lechan17 from Slovakia.

Type Layout For Free Download - Greenie Theme18

Shalom Typo Link

Shalom Typo [ preview19 | download20 ]
Designed by David Hellmann21 from Cologne, Germany.

Type Layout For Free Download - Shalom Typo22

O’No! Typography Link

O’No! Typography [ preview23 | download24 ]
"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’Nolan25 from United Kingdom.

Type Layout For Free Download - O'No! Typography26

Typographic Times Link

Typographic Times [ preview27 | download28 ]
"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.org29 (for the general page structure) and http://weblog.cynosura.eu30 (for the top navigation)." Designed by Evan Hensleigh31 from United States.

Type Layout For Free Download - Geotypisch template32

Geotypisch Link

Geotypisch [ preview33 | download34 ]
"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 Coster35 from Netherlands.

Type Layout For Free Download - Geotypisch template36

Megan Link

Megan [ preview37 | download38 ]
"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 Sullivan39 from Grand Rapids, Michigan, USA.

Type Layout For Free Download - Website Contest Entry40

Maintenance Link

Maintenance [ preview41 | download42 ]
"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 King43 from United States.

Type Layout For Free Download - Maintenance 44

WP Typo Link

WP Typo [ preview45 | download46 ]
"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 Coyier47 from United States.

Type Layout For Free Download - WP Typo48

theARTofTYPE Link

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

Type Layout For Free Download - theARTofTYPE Typography Blog Template51

David Kruger Link

David Kruger [ preview52 | download53 ]
Designed by David Kruger54 from Paraguay.

Type Layout For Free Download - David Kruger55

Top Notch Link

Top Notch [ preview56 | download57 ]
"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 Braithwaite58 from US.

Type Layout For Free Download - Top Notch59

Simple Type Link

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

Type Layout For Free Download - Simple type63

Anticipated Link

Anticipated [ preview64 | download65 ]
"A simple typographic portfolio template. " Designed by Markus Müller66 from Stuttgart, Germany.

Type Layout For Free Download - Anticipated67

MiniCon Link

MiniCon [ preview68 | download69 ]
"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 Brightwell70 from New Zealand.

Type Layout For Free Download - MiniCon71

The theme Link

Theme [ preview72 | download73 ]
Designed by Leo DINH from Vietnam.

Type Layout For Free Download - Theme74

Typo E-mag Link

Typo E-mag [ preview75 | download76 ]
"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ý77 from Czech Republic.

Type Layout For Free Download - Typo E-mag78

Luvbold Link

Luvbold [ preview79 | download80 ]
"Simple and clean layout with bold and characteristic fonts." Designed by Wojtek Konieczny81 from Poland.

Type Layout For Free Download - Luvbold82

Happy Go Try Link

happy-go-try [ preview83 | download84 | release post of the WordPress theme85 (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 Dawson86 from Iowa City, IA, USA.

Type Layout For Free Download - happy-go-try87

Eastern Tales Link

Eastern Tales [ preview88 | download89 ]
"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 Mareddy90 from India, presently in the US.

Type Layout For Free Download - Eastern tales91

Paivi K Link

Template Paivi_k [ preview92 | download93 ]
"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_k94

Better Web Readability Link

Better Web Readability [ preview95 | download96 ]
Designed by Vladimir Carrer97 from Verona, Italy.

Type Layout For Free Download - Better Web Readability98

CMYKolours Link

CMYKolours [ preview99 | download100 ]
"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 Walker101 from UK.

Type Layout For Free Download - CMYKolours102

Goliath Link

Goliath [ preview103 | download104 ]
"A two-column blog-template with lots of white-space and big letters." Designed by Emanuel Kluge105.

Type Layout For Free Download - goliath106

Cornballs Link

Cornballs [ preview107 | download108 ]
"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 Goodwin109 from England.

Type Layout For Free Download - Сornballs-template110

viCard Link

viCard [ preview111 | download112 ]
"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 Gattner113 from Berlin, Germany.

Type Layout For Free Download - viCard114

Typo Today Link

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

Type Layout For Free Download - Typo Today118

JavaScript Tricks Link

JavaScript Tricks [ preview119 | download120 ]
“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 Mardovich121 from Belarus.

Type Layout For Free Download - JavaScriptTricks122

Contrast Link

Contrast [ preview123 | download124 ]
"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 Linder125 from Sweden.

Type Layout For Free Download - Contrast126

Brown Typo Link

Brown Typo [ preview127 | download128 ]
"Do you love brown? Brown Typo is based on simplicity and brown." Designed by Vincenzo Milone129 from Italy.

Type Layout For Free Download - Brown Typo130

Exploring Web Typography Link

Exploring Web Typography [ preview131 | download132 ]
Designed by Matthew Taylor.

Type Layout For Free Download - Exploring Web Typography133

Ihsanrama Link

Ihsanrama [ preview134 | download135 ]
"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 Rama136 from Indonesia.

Type Layout For Free Download - Ihsanrama says137

Blue Inc Link

Blue Inc [ preview138 | download139 ]
"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 Wall140 from United States of America.

Type Layout For Free Download - Blue Inc141

Whoo! Link

Whoo! [ preview142 | download143 ]
"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 Abadio144 from Brazil.

Type Layout For Free Download - Whoo!145

Worldlines Link

Worldlines [ preview146 | download147 ]
"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 Halarnkar148 from Bangalore, India.

Type Layout For Free Download - Worldlines149

Hot box Link

Hot box [ preview150 | download151 ]
"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 Patwardhan152 from Bangalore, India.

Type Layout For Free Download - HOT BOX153

Safe As Houses Link

Safe As Houses [ preview154 | download155 ]
"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 Sloan156.

Type Layout For Free Download - Safe As Houses157

ILuvType Link

ILuvType [ preview158 | download159 ]
"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 Holt160 from United Kingdom.

Type Layout For Free Download - ILuvType161

Pink Elephant Link

Pink Elephant [ preview162 | download163 ]
"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 Friese164 from Denmark.

Type Layout For Free Download - Pink Elephant Solutions165

Smash My Typo Link

Smash My Typo [ preview166 | download167 ]
"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 Dahlberg168 from Sweden.

Type Layout For Free Download - Smash my Typo169

TypoGra Link

TypoGra [ preview170 | download171 ]
"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 172 from USA – Ohio.

Type Layout For Free Download - TypoGra173

Goldrenrod Link

Goldrenrod [ preview174 | download175 ]
"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 Devlin176 from USA.

Type Layout For Free Download - Goldrenrod177

An Ordered Aesthetic Link

An Ordered Aesthetic [ preview178 | download179 ]
"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 Ponchak180 from USA.

Type Layout For Free Download - An Ordered Aesthetic181

Dynamic-Fresh Link

Dynamic-Fresh [ preview182 | download183 ]
"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-Fresh184

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

↑ 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
  31. 31

    These great. I’m now stumped on how some of these fonts were rendered using javascript. I’ve been trying to figure out the “Top Notch” theme with no luck. Can anyone point me in the right direction?

    0
  32. 32

    OMG. Amazing. Simple. Enviable.

    0
  33. 33

    great collection! I like the style!
    greets
    roland

    0
  34. 34

    “Typographic Times” thumb’s link is wrong

    0
  35. 35

    Cool !

    But still not really usable, neither ‘readable’..

    0
  36. 36

    Shivatheja Tanamala Venkata

    July 8, 2009 12:59 pm

    Hi folks,

    The winner design actually sucks, I really want to know what was so special about it… as it could be a way better design and doest really make me feel wow or anything i am totally disappointed, need a explanation of why…

    0
  37. 37

    Great collection! Thanks SM!

    0
  38. 38

    Nicolaj #1. Very nice. It looks good in Safari but Opera and FF can’t display italics of this size very well. By the way: Seine Schrift »Futura«. The Gänsefüßchen are wrong, according to the rules of German ortho-typography and to semiotics as well:

    Right: My name is Nicolaj.
    Wrong: My name is “Nicolaj”.

    The name is actually a res here and not a nomen. This should be right in a typographic layout.

    0
  39. 39

    Hi you all
    I have to agree with Shivatheja Tanamala Venkata, well I wouldn’t use the word sucks and the design fits well in the post, that’s for sure, but not as the winner.

    I’m in the contest as well so I don’t want to sound disapointed or bitter, this is just my thoughts. My contribution is “contrast”.

    Over all i think the result is superb, this post could easly be named “45 top web designs”, or something like that.

    Cheers to ya all

    p.s yes, I would like to have won :D

    0
  40. 40

    Hi guys, mine was O’No! Typography – thanks so much for the kind words already left here in the comments and thank you to Smashing Mag for including me!

    0
  41. 41

    thank u very much!

    0
  42. 42

    Thank you Smashing Magazine for featuring mine. I’m surprised, I thought I wouldn’t make it.

    Two thumbs up for those who has been featured here, your themes rocks!

    0
  43. 43

    Thanks! Great collection!

    0
  44. 44

    Thank you Smashing and thanks all you designers!! Now the only problem…which one to choose!! :D

    0
  45. 45

    Scarletbits.com

    July 8, 2009 4:37 pm

    What an awesome list of layout resources, thank you for sharing.
    Some really nice works.

    0
  46. 46

    Ohhh. I love you SM !!!!!!!

    0
  47. 47

    Wow, just wow! Some of these are fabulous! To think there are sites out there that charge a premium for templates like these. Thanks for the freebies!

    0
  48. 48

    I really like the Greenie Theme, but the code of this one is *argh*
    60kb JS for a simple scroll effect? Bad Form structur (labels?), a lot of useless bad optimized images (ever heard of image sprites?), most of the CSS inefficient (no optimisation, what is .clearfix for?) and so on.

    But I think, it’s the nicest of them. :-)

    0
  49. 49

    Opinions. Everyone’s got one.

    Nice work by all – congrats to the winner too – even passed Accessibility tests with reasonable results.

    0
  50. 50

    Yeah, Greenie’s markup is green.

    0

↑ Back to top