Free Typographic XHTML/CSS Layouts For Your Designs
In May we announced the Typographic Layout Design Contest 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 [ preview | download ] "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 Sokolowski from Bremen/Germany.
Winner (2nd place): Extreme Georgia
Extreme Georgia [ preview | download ] "I hand-in a single-page template for blogs. The title for this work is Extreme Georgia. It is 100% Georgia-based, and I am aware that it is a bit old-school. However, the design itselft reflect back the concept that I want to bring, which is, content is the king. I took into account the colors, whitespaces, line-height, font-size and also the content width for this design.
It might look plain, but it can be customized easily, let’s say, the color of the links, background image can be added later, and also the background colors. My work is heavily influenced by many designers, such as Jason Santa Maria, Jon Tangerine, Tim Van Damme, Khoi Vinh, and especially, the Georgia font which was designed by Matthew Carter. Without them, I wonder where could I be now in web design industry." Designed by Mohd Huzairy Mohd Rezuan from Kuala Lumpur, Malaysia.
Winner (3rd place): Experimental
Experimental [ preview 1 preview 2 | download ] "A minimal blog theme inspired in the Swiss Style of Design: It features Arial/Helvetica, grids, a generous use of whitespace for better readability and a strong focus in typography. The idea was to design an universal WordPress theme that’s focused on content and images, with an invisible, yet sleek design. Authors can modify the header as they wish, including images or playing with typography as in the example. this layout was coded using EMs, so it doesn’t break when you make text size changes in your browser. It’s an elastic design." Designed by Rodrigo Galindez from Argentina.
Greenie Theme
Greenie Theme [ preview | download ] "Greenie Theme is suitable for portfolio site, but can be used elsewhere where client needs to show his works. I used big typographic claim for catch users attention and other typo elements. Like its name, theme used fresh green color for main content page, and for background." Designed by Ondrej Lechan from Slovakia.
Shalom Typo
Shalom Typo [ preview | download ] Designed by David Hellmann from Cologne, Germany.
O’No! Typography
O’No! Typography [ preview | download ] "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’Nolan from United Kingdom.
Typographic Times
Typographic Times [ preview | download ] "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.org (for the general page structure) and http://weblog.cynosura.eu (for the top navigation)." Designed by Evan Hensleigh from United States.
Geotypisch
Geotypisch [ preview | download ] "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 Coster from Netherlands.
Megan
Megan [ preview | download ] "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 Sullivan from Grand Rapids, Michigan, USA.
Maintenance
Maintenance [ preview | download ] "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 King from United States.
WP Typo
WP Typo [ preview | download ] "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 Coyier from United States.
theARTofTYPE
theARTofTYPE Typography Blog Template [ preview | download ] "A Very Light Blog Template. " Designed by Jan Harold Diaz from Philippines.
David Kruger
David Kruger [ preview | download ] Designed by David Kruger from Paraguay.
Top Notch
Top Notch [ preview | download ] "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 Braithwaite from US.
Simple Type
Simple type [ preview | download ] "A minimalistic & typographic layout, based on a 960 pixels grid system." Designed by Ahmed Chergaoui from Agadir, Morocco.
Anticipated
Anticipated [ preview | download ] "A simple typographic portfolio template. " Designed by Markus Müller from Stuttgart, Germany.
MiniCon
MiniCon [ preview | download ] "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 Brightwell from New Zealand.
The theme
Theme [ preview | download ] Designed by Leo DINH from Vietnam.
Typo E-mag
Typo E-mag [ preview | download ] "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ý from Czech Republic.
Luvbold
Luvbold [ preview | download ] "Simple and clean layout with bold and characteristic fonts." Designed by Wojtek Konieczny from Poland.
Happy Go Try
happy-go-try [ preview | download | release post of the WordPress theme (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 Dawson from Iowa City, IA, USA.
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!