Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Free HTML / CSS for type & palette proposals

Posted on 24 June 2011 Comments

Article illustration for Free HTML / CSS for type & palette proposals

During the research phase of a recent client project, I found myself creating some simple markup and styles to present the client with options for the project’s typeface and colour palette. On the assumption that I’ll probably re-use this code again, and in the hopes that someone else might find it useful, I thought I’d put it up here for people to download.

The premise is simple, but admittedly it’s for a pretty specific scenario, which is this: you want to try out some typeface ideas by rendering real fonts in the browser, using a font delivery service such as Typekit, Fontdeck, Google Web Fonts, etc. At the same time, you also want to test out potential colour palettes. You want to do this with minimum fuss and simple code this is easy to change once your client provides feedback, or when you re-use the code for your next project.

With me? Jolly good. Download the files.

Layout

The page layout is extremely simple: four floating divs containing text, with horizontal measurements declared in percentages and vertical measurements declared in ems to keep everything relative and highly flexible. To stop the line measure getting too short, a media query kicks in at 600px width to kill the floats and tweak a few margins. Yay, RWD!

Type

If you look at the basic version of the page, you’ll see that each block of dummy content is set in a different typeface, with the fonts delivered via Google Web Fonts. That doesn’t matter, though: you could easily use any font delivery network. In the actual client project, I was using a combination of Typekit and Fontdeck to display the potential typeface choices.

The CSS, as you might expect, looks like this:

div.one { font-family:'Droid Sans', Arial, sans-serif; }
div.two { font-family:'Droid Serif', Georgia, 'Times New Roman', serif; }
div.three { font-family:'PT Sans', Arial, sans-serif; }
div.four { font-family:'PT Serif', Georgia, 'Times New Roman', serif; }

Colour palette

I like to establish a palette with at least four base colours that includes one high-contrast accent colour (usually for links), and declare them in the comments (purely for reference) before assigning them to selectors, so you’ll see that in the CSS:

/* Palette 1

    Background 1: #f2f3ed
    Background 2: #fff
    Body: #333
    Accent: #ff5d52

*/

View: our page, using palette 1

Using a body class allows me to throw numerous colour values into one stylesheet and then just duplicate the HTML page several times, simply changing the body class with each new version. Super-easy to adjust after client feedback and super-easy to re-use for the next project.

body.palette-one { background:#f2f3ed; color:#333; }
body.palette-one a { color:#ff5d52; }
body.palette-one div p:last-child a { background:#ff5d52; color:#fff; }
body.palette-one div p:last-child a:hover { background:#000; }

Here’s palette 2; the only difference is the body class in the markup, so you use body.palette-two instead of body.palette-one .

Again, here are the files.

That’s all, folks. Hope this proves useful in some way!

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Siteleaf and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.