Free Typographic XHTML/CSS-Layouts For Your Designs


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

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

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

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

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

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

Type Layout For Free Download - Shalom Typo22

O’No! Typography

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

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 [ 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 [ 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 [ 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

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 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

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

Type Layout For Free Download - David Kruger55

Top Notch

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

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 [ preview64 | download65 ]
"A simple typographic portfolio template. " Designed by Markus Müller66 from Stuttgart, Germany.

Type Layout For Free Download - Anticipated67


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 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

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

Type Layout For Free Download - Theme74

Typo E-mag

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 [ 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

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

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, 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

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

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

Type Layout For Free Download - Better Web Readability98


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 [ 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 [ 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 [ 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

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

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 [ 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

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

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

Type Layout For Free Download - Exploring Web Typography133


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

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! [ 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 [ 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

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

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 [ 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

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, 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

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 [ 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 [ 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

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 [ 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!

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!

↑ Back to topShare on Twitter

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 and loves solving complex problems in large companies. Get in touch.

  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!

  2. 2

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

    DKumar M.

  3. 3

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

  4. 4

    greenie rocks ! nice collection :-)

  5. 5

    Nice Collection

  6. 6

    Best post ever!!

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

    Love it!

  7. 7

    NOW. what would i do without SM?

  8. 8

    sehr sehr nett! :)

  9. 9

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

  10. 10

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

    u rock bat!!!

  11. 11

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

  12. 12

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

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

    Thanks for the solid inspiration and layouts!

  13. 13

    Experimental is absolutely tremendous! (:

  14. 14

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

  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!!

  16. 16

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

  17. 17

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

  18. 18

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


  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.

  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!

  21. 21

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

  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.

  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.

  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.

  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.

  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 :)

  27. 27

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

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

  28. 28

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

  29. 29

    Ian Storm Taylor

    July 8, 2009 11:43 am

    I still love WP Typo the most.

  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.

  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?

  32. 32

    OMG. Amazing. Simple. Enviable.

  33. 33

    great collection! I like the style!

  34. 34

    “Typographic Times” thumb’s link is wrong

  35. 35

    Cool !

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

  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…

  37. 37

    Great collection! Thanks SM!

  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.

  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

  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!

  41. 41

    thank u very much!

  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!

  43. 43

    Thanks! Great collection!

  44. 44

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

  45. 45

    July 8, 2009 4:37 pm

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

  46. 46

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

  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!

  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. :-)

  49. 49

    Opinions. Everyone’s got one.

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

  50. 50

    Yeah, Greenie’s markup is green.

  51. 51

    Thanks for featuring mine! There are so many great themes on here it’s awesome to be shown next to them. Congratulations to all the winners and everyone else to have their work featured here.

  52. 52

    O’No! Typography… is awesome…

    Some of the sites in this collection simply sucks…Overall the collection is good.

  53. 53

    Extreme Georgia is using Caps with smallcaps a huge no no in Graphic design.

  54. 54

    Wow.. my design on the list (ihsanrama). Thanks SM.
    Congrats to the winner T-20. All of you really awesome… Great SM.

  55. 55

    Tejendra Shandilya

    July 8, 2009 7:41 pm

    AWESOME ………Great collection!

  56. 56

    Amazing work! The best post in several months. SM and all the artists thanks a lot for sharing.

  57. 57

    How interesting… Congratulations to all the winners. Great contest. Great participation. Great Work!

  58. 58

    Thanks for including our design, WORLDLINES.:)

  59. 59

    Nikolaj Sokolowski

    July 8, 2009 8:43 pm

    Hi Helen,

    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.

    Well, I´m really not an Expert in ortho-typography and semiotics but I think it works here. WIkipedia says in reference to the “amtlichen Regelwerkes der deutschen Rechtschreibung von 2006″:

    Die Verwendung von Anführungszeichen wird insbesondere in § 89 und § 94 des überarbeiteten amtlichen Regelwerkes der deutschen Rechtschreibung von 2006 geregelt.

    Mit Anführungszeichen schließt man etwas wörtlich Wiedergegebenes ein (§ 89). Dies betrifft

    1. wörtlich wiedergegebene Äußerungen (direkte Rede):
    „Immer muss ich arbeiten!“, seufzte sie.
    2. wörtlich wiedergegebene Textstellen (Zitate).

    Mit Anführungszeichen kann man Wörter oder Teile innerhalb eines Textes hervorheben und in bestimmten Fällen deutlich machen, dass man zu ihrer Verwendung Stellung nimmt oder sich auf sie bezieht (§ 94). Dies betrifft

    1. Überschriften, Werktitel (etwa von Büchern und Theaterstücken), Namen von Zeitungen und dergleichen:
    Sie las den Artikel „Chance für eine diplomatische Lösung“ in der „Wochenpost“. Sie liest Thomas Manns Roman „Tod in Venedig“. Kennst du Fontanes Roman „Effi Briest“? Wir lesen gerade „Unterm Rad“ von Hesse.
    Zur Groß- und Kleinschreibung siehe § 53 E1.

    By the Way, I´ve developed the Site on the Firefox on Windows-XP. If Clear-Type is activated it looks good enough to me. If someone uses this template, a good Post could be how to do this, but I think the audience of such a thing (Typografic-Related) will use a Mac or has already Clear-Type activated. Sure, it´s not good looking on very old machines and unconfigured systems – but then all type will look bad – sure italics the worst.

  60. 60

    Thanks dear,

    We here with to explain you…..thanks again, but any problem now how about me doing…. please inform me

    I was Copy paste Allowed tags

    Thanks/ wiwied

  61. 61

    wooo love the typo

  62. 62

    Simply awesome. SM is the best

  63. 63

    If you ask me, Extreme Georgia should have won.

  64. 64

    Congratulations to the winners, it was fun participating in this contest. ;-)

  65. 65

    Lakshmi Mareddy

    July 8, 2009 11:03 pm

    Congrats Nikolaj Sokolowski , Mohd Huzairy Mohd Rezuan and Rodrigo Galindez! Your designs rock..!!!

    Congrats to the rest of us too.. I personally am very excited and pleased as punch, to see my very first Smashing Magazine entry…!

    Thank You SM!!

  66. 66

    Without offense, but has anyone realized that Experimental looks just like a Mixture of and a one or two other designs shown on Smashingmagazine before?
    Still looks pretty good though, i especially like how the larger pictures like the one from paris overlap the first two columns!

    Overall the collection is awesome, but i would have hoped for more vanguard design!

  67. 67

    Hi I am new

  68. 68


  69. 69

    I love them all!

  70. 70

    Brill. There are enough examples here to dissect to keep a typography obsessive like me happy for a while. I can’t believe that there are still some people who don’t believe in the importance of proper typography – it can truly make or break a design.

  71. 71

    Amazing!!!! typography is so important in design and this guys just show that.
    excellent quality in all the layouts

  72. 72


  73. 73

    1. Experimental
    2. Megan
    3. Anticipated

  74. 74

    Joe Brightwell

    July 9, 2009 1:32 am

    Wow I am so stoked to have my website chosen amongst such a great group of template designs. The 3 winners definitely deserve the credit and prizes and well done to everyone. Some of them are just amazing and have given me inspiration to further improve my design work. Stoked!

  75. 75

    susan pierce sloan

    July 9, 2009 1:35 am

    woo! Great to see my theme featured amongst so many extraordinary designs! :D
    Hopefully I can get the wordpress version available within the next few days too..

    I noticed a small typo in my comments (my fault I’m sure!) where it says ‘ the XML file’ should read ‘the XHTML file’ ;)

  76. 76

    these are just great! thanks a lot

  77. 77

    Sigurdur Armannsson

    July 9, 2009 2:18 am

    This is the best collection of web looks I have yet seen. It’s obvious that the designers have really put their heart to this. Congratulations!

  78. 78

    I just downloaded the Goldenrod one, well done, sooooo good thanks so much man, frankly you are such a source of inspiration.

    Thanks from France, to the Smashing Magazine team for all your hard work.

  79. 79

    Amazing !!! Thanx a lot

  80. 80

    For me, “Contrast” layout is superb!! Good job, Paul Linder.
    The others are good too, but “Contrast” has more to do with me. :)

  81. 81

    Gorgeous collection, love it. Gratz to winners !

  82. 82

    Wonderful! Thanks

  83. 83

    Although your winner is truly gorgeous to look at, I’d question the use of a multi-column layout for a web page. This design will require a lot of scrolling (or a big screen). It seems like a triumph of form over function and treats a web page like a newspaper. #2 and #3 are much more usable designs.

  84. 84

    Wow, some really nice stuff…like the greenie much!

  85. 85

    Oh man that winning entry is simply stunning, I love it to bits. Well done guys, some great efforts.

  86. 86

    I think Paul’s “Contrast” looks very beautiful. I love the limiation of two colours and typography as the only decoration. Yet the body text could be bigger. Anyway. I like it!

    The winner template looks like a magazine page. I’m not sure if I like it. But – good use of a grid!

  87. 87

    Great work and great article!

  88. 88

    truely amazing! Tanx a lot for the hard work, reviewing all the posts, and many shoutouts to all designers!

  89. 89

    Wow, winning entry is very nice indeed. The majority worthy of show.

  90. 90

    I am very impressed. There are some really good ones. Love different things about each one. A great resource.

  91. 91

    O No and SimpleType my faves, and love the functionality and design of the vicard. Some very nice work.

    One criticism: The one opting for Times New Roman because everyone uses Georgia. Georgia is used for a reason: it was created and hinted for optimal display on monitors, sort of a digital version of Times. TNR was designed for print. It is not recommended for use on monitors because its hinting and aliasing are not going to display well at pixel resolutions.

  92. 92

    Excellent collection, I used the ‘Cornball’ theme at the code was really clean, especially the CSS which made things really easy to edit.

  93. 93

    Awesome! Thank you for all these XHTML/CSS layouts.

  94. 94

    Yes, that was a great typography contest, there are so much well designed layouts!

  95. 95

    Lots of nice work, but the green theme does it for me!

  96. 96

    Contrast seem to be broken for version 2.8. The themes do not have separate pages were bugs can be fixed.What are we to do.
    The error is Parse error: syntax error, unexpected T_OBJECT_OPERATOR in /hsphere……t/themes/contrast/contrast/index.php on line 48

  97. 97

    It’s such a shame, the 3rd winner theme is not original.
    Please compare it to
    Notice the posts and sidebar layout are similar.

  98. 98

    Lol, was just looking up to compare it to 3rd place. Very similar imo.

  99. 99

    I wish I could design like Nikolaj Sokolowski :-) Truly stunning work! Thanks Smashing Magazine for featuring my work: Experimental.

  100. 100

    Incredible collection of CSS layouts. As a person trying to learn CSS these are an incredible find and a great inspiration for my own designs.

  101. 101

    good job all contestant and SM.

  102. 102

    Good job. really good works.

  103. 103

    HI osize
    I used wordpress v 2.8 when I design the theme. If you want me to give you support, emai

  104. 104

    thank you smashing for publish my work, and thank you guys for positive comments ;)

  105. 105

    Thank you for publishing my work.

  106. 106

    Jan Harold Diaz

    July 10, 2009 7:21 am

    Thanks for Publishing my Work [theARTofTYPE] and congratulations to all the winners, wish there’s plenty more SM Competitions like this. :D

  107. 107

    nice layouts for me to preference :D

  108. 108

    Wellington Almeida

    July 10, 2009 3:12 pm

    Gosh, this article is brilliant indeed. I loved 90% of the layouts listed here. They inspire me a lot, thank you for the opportunity of a moment of inspiration. :)

    Thank you

  109. 109

    July 10, 2009 6:37 pm

    Another rock solid post!

  110. 110

    “Extreme Georgia” is exactly what I’ve been looking for! Oh man, if only they would turn it into a WordPress theme.

  111. 111

    Congrats winners!
    Really wish I could have participated, just didn’t have the time. Darn.

  112. 112

    To anyone who interested in Extreme Georgia, I am working on the wordpress theme for it. Thanks for your support!

  113. 113

    There are some great layouts here, and I enjoyed examining many of them closely. I was intrigued by Anticipated – the colors are so vibrant and fun, but I found they were forcing my mind to divide the page in half (red/orange – pink) and I couldn’t really look at the whole thing at once. Did anyone else experience this effect?

  114. 114

    Extreme Georgia, nice clean design.
    I actually prefer it and O’No! Typography to T-20.
    Really though it is up to personal taste isn’t it. Congratulations to all who submitted the featured layouts.
    But this is not really the purpose of my reply.
    I looked at Extreme Georgia in IE7 on my 19″ widescreen Laptop and the header is cut off at the top.
    I opened it up in Dreamweaver and changed the margin:80px 0; to the below.
    Easy fix but not a good look as it was.
    Also works in Opera and Firefox 3.0.
    Always remember to test…test…test.
    This also includes you guys at Smashing Magazine.

    padding:80px 0;

  115. 115

    Andrea, I am so sorry since I don’t have IE7 installed on my machine. Besides, I only tested it in my mere 15.4 inch screen.

    Will fix it for the wordpress version after this. Thanks Andrea for the heads up!

  116. 116

    mostly great stuff

  117. 117

    God is beautiful and loves beauty.

    Thank you all the wonderful designers for making the world wide web a beautiful place

    God bless you.

  118. 118

    Excellent collection. T-20 is my favorite too. Thank you.

  119. 119

    aswesome ! .. this is what i was looking for since many days …

  120. 120

    thx. nice share.


  121. 121

    Most talented designers on the web!And, Smash magazine is the the perfect platform to get a round of applause and a standing ovation from the talent scouts around the world.

  122. 122

    Simple Type should have placed higher, that is an awesome home page that really draws you attention to the content right away. If only there was a “posts” page included…

    Experimental should have won, that is the cleanest, easiest to look at, and features the most stuff without confusing the reader.

    Oh well, at least they are their for me to download. ;)

  123. 123

    wow…… so nice.. love beautiful Greenie…. congrats all!

  124. 124

    Joshua Schoenaker

    July 25, 2009 12:38 am


    I just wanted to drop my site which I built on the Simple Type-template by Ahmed Chergaoui from Agadir, Morocco.

    You can view a demo here:

    Hope you like it! Thank you very much for your effort!

  125. 125

    These are all lovely & wonderful designs. Upon viewing “The Art of Type” template, I was stoked to see that included as a sample in the layout was my font, “Caviar Dreams.” I am honored that my font was considered stylish enough to be used for display. Thanks! :D

  126. 126

    are any of these available for blogger?

  127. 127

    Thanks for sharing, I looking for many example to improve my skill, I like T-20 newspaper style….

  128. 128

    This is so cool of you to share! Thank you very much.

    With kind respect from Albania!

  129. 129

    Just want to drop my conversion work. 1st thanks for this collection. Inspired me to make it available for Joomla if you allow me. I’ve convert Unaghii to Joomla template and the demo can be seen in Joomlamini – minimal Joomla


  130. 130

    What do you with the flash file for the “Anticipated” layout by Markus Müller? It’s on the index page but where does one put it to get the navigation working correctly? Right now, I have no navigation. Can anyone help?

  131. 131

    These are all wonderful designs. I will definitely give them a try…… goeorgous!!

  132. 132

    nice list

  133. 133

    Most of the preview and download links from “Better Web Readability” and below are broken!! =(

  134. 134

    Maybe not the most! But for shure one of the TOP 5 articles on SM ;)

    Thank you for sharing!

    P.S.: I aknowledge the huge amount of research included into this article…

  135. 135

    Prahshant Yashpal

    December 20, 2009 1:36 am

    Thanks for a great article!
    Really nice selection of themes.

  136. 136

    It’s good design showcase. I hope to see more of marvellous work! It’s really awesome and thanks for sharing!

  137. 137

    Wow! It’s my first time here by friend’s recommendation & you have a really informative website for designers & students! Really good job! I love all the articles you featured!

  138. 138

    I had asked earlier about the navigation with the font in the layout “Anticipated.”

    I just wanted to mention that after visiting the which is in the read me, I figured out that there is a swf folder, to which one must add the swf file, that should be created. This will allow the font to be displayed and thus the navigation to appear properly.

  139. 139

    “O’No! Typography” is really great! Better than others IMHO.
    Megan is nice too…

  140. 140

    A great showcase of what’s possible with typography and CSS. Really opened my eyes to new possibilities for web design!

  141. 141

    thanks a lot for was very nice

  142. 142

    It Rocks! Thanks!

  143. 143

    Hi Chris,

    Thank you for explaining about the differences in the fonts and their usage. I am just starting to learn about programming web pages, so information like this is priceless.

    Could you possibly have the patience to answer another question for me? I just found this site today while looking for Icons and while browsing the freebies found these free Typographic XHTML/CSS-Layouts, which are apparently the result of a contest. My question is this… What makes them a “Typographic” design, and why is that a good thing? What are some other design ‘styles’ if Typography is a style? Where can I learn more, starting at a very basic level.

    Thanks for any and all help.


  144. 144

    One of the nicest collections I have ever seen. I had better get back to the drawing board to even touch some of those offerings.

  145. 145

    We’ve ported the famous typographic layout Shalom Typo for the blogging platform Serendipity.

  146. 146

    Would love to use Worldlines ,but so far it is not working on WordPress 3.0, do you have an update?

  147. 147

    Many thanks for the great article and the great designs. IMO excellent typography for the web is more and more important because we see it lacks so much of this important feature in the past. In the long run, it is the daily reader who decided about the fall or rise of each and every website and I believe not just me but many other also hate bad typography!

  148. 148
  149. 149

    Really a great collection!! I like the greenie, Contrast and O’No! Typography. And I ported the Greenie into a WordPress theme, you can take a look at

  150. 150

    Does anyone know the protocol with the copyright at the bottom of these templates? If you use the template for your own use, do you leave the copyright of the template creator at the bottom of the website? thanks

  151. 151

    Can you PLEASE repeat this competition more often
    - Not that I want to enter & win so much as I want to
    see the amazing inspirational work from such talented
    people from all countries more & more

  152. 152


  153. 153

    Ui, anh Thường pro quá.

  154. 154

    Very nice post. I simply stumbled upon your weblog and wanted to mention that I’ve really loved browsing your weblog posts. In any case I’ll be subscribing on your rss feed and I am hoping you write once more very soon!

  155. 155

    I am quite gracious for the fine posting sir! Keep up your superb work. A huge THANKS from me!

  156. 156

    Honestly it is tough to discover a worthy blog worth commenting on nowadays, the internet is genuinely too flooded. Love this post, adore your blog. Just thought i would let you know!

  157. 157

    Please repeat the competition for 2012!!

    This is amazing stuff. Thanks to all the designers! These are truly works borne out of love.

  158. 158

    Great stuff!

  159. 159

    Adapted extreme georgia to wolfcms and also to be more responsive (check it by resizing your navigation windows).. Check it out at Will provide a download link when it’s done.


↑ Back to top