Dynamic Typographic Styles

Beautifully Balanced CSS for Type

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.