After writing about vertical rhythms and using a fixed baseline to set type to fit perfectly  onto a grid,  I thought it fitting to release my Typographic CSS generator – a super simple script that creates beautiful, balanced typography that can be dropped straight into your webpage. It’s job is three fold, firstly, it resets and normalises all styles (negating the use for a reset.css), secondly it sets a cross-browser compatible baseline and adjusts all type to fit accordingly, and thirdly it kerns text to make it as readable as possible, especially at the smallest sizes.Try it out for yourself over at the Test Page

The power lies in the different settings you can append to the query line (adding the options after the ? in the url by prefixing it with an &). The easiest and most fun way is to simply play around with the test page above or pick from one of the examples below.

1. Example 01 : Red Links, Blue Text (set as individual RGB colours), Maximum font size is 96 points, baseline set at 22 pixels, paragraph set to 14pts
2. Example 01 : Red Links, Blue Text, Maximum font size is 96 points, baseline set at 22 pixels, Headlines in Capitals
3. Example 01 : Red Links, Brown Text (set as individual RGB colours), Maximum font size is 72 points, baseline set at 18 pixels
4. Example 02 : Blue Links, Maximum font size is 46 points, Minimum is 4 points, baseline set at 22 pixels, Headlines are in capitals
5. Example 03 : Green Links, H1 set as 56 points, p set to 18 points, baseline set at 34 pixels
6. Example 04 : Blue Text, H1 set at 100 points, H2 set at 90 points, H3 set at 80 points, H2 set at 40 points, blockquote set at 24points
7. Example 05 : Double size deafults
8. Example 06 : An example site, similar to this one!

Note : the query sent to the test page is identical to the query sent to the dynamic CSS file.

All of the output CSS is w3c valid, cross browser compatible, scales neatly and is commented and laid out readably (unless in deploy mode .

You can access the latest version of the source code over at Google Code. The source code is released under the MIT license so please improve it however you see fit, just let me see your awesome developments once you are done so that we can both benefit.

I have very personal preferences when it comes to typography, and for this site I want to focus on readability, rather than aesthetics. I like big fonts, with big gaps between words and lots of space between lines – making it very easy to read, and incredibly easy to skim read. This is an important quality as many people will stumble onto this site needing to be made instantly familiar with the context. For important words, and to highlight significant sentences there are a number of extra CSS classes to handle fancy formatting.

An important part of any site is how it moves your user’s eyes around the page, and in particular how the vertical spacing between headings,  paragraphs and other elements maintains a rhythmn that balances and spaces out all of the information. To develop, demonstrate and code the typography I have created a special test page which contains all the headings, paragraphs and special class codes that need to be styled for the content on this site. In the background you can see the vertical rythmn shown as equally spaced horizontal stripes, or ‘baselines’.

This is the vertical drumbeat for our content. All headings, paragraphs, images and charts have to be able to sit perfectly either on these lines or use margins to offset themselves asymnetrically between (like an offbeat). This beat runs through all sections of the site and never changes.

For designerZen, I am using an 18px baseline. This was derived from playing around with the basic 12pt font (that is used for most of the site content) and changing the leading until a long paragraph was easily readable, and short paragraphs were clear. 18px with a 12px base font means 12 pixels vertically of text, then 6 pixels of space below.

Check out this page for the test.

For all fonts smaller than 18px, it is important to add line-height so that their baseline extend to the full 18px. For fonts larger than 18px, it is important to set it so that the entire hieght of the font plus line-height is a direct multiple of 18px and also the margins above and below them. Take a look at the typography.css for more information.

There are many resources to help you build to a baseline, my favourite debugging tool is syncotype, which overlays a grid of horizontal lines spaced along a baseline that you can specify. Try it out for yourself on the test page!

New logo, old school software

Want music making to be instant and fun again? Try Med. As version 2 is finally nearing completion I have designer a new logo for the product. Made up of musical clefs, staves and punctuation, this is a super-musical logotype!

Future Retro Kitch

Designed as the main logo for the reborn ‘Box Office Poison’ band. Commissioned for the sleeve art, T-shirts and PR material, the logo is sultry and exotic, with just a cheeky dash of kitsch.
Subversively there is a hidden face. Can you find him???