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. It’s job is three fold, firstly, it resets 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, the power lies in the different settings you can add to the query line…

Here are some examples with text

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 : This site!

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

If you are interested in the inner workings of the script, I am more than happy to release it under a GNU license which would mean that you could use it for any reason you liked, so long as any improvements you do – I have access to! Everyone wins.

You can currently access the latest version in the SVN at Google Code.

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

By simply including the type.css file, you automatically reset and normalize the presentation of HTML elements.
The process creates a level playing field upon which to author your layout CSS. The most common elements are automatically created with sufficient vertical spacing so as to fit onto any sized grid

Typograhpy is handled internally so that all text is easy to read (even at the smallest sizes) and sticks to the specified baseline.
Kerning and Leading is added to all small fonts, and margins to all larger ones in keeping with the vertical rythmn that you can specify as part of the query string.
The current baseline is set at 22 pixels and the source code CSS can be viewed here.

The idea for this script came from various sources, most notably webtypography.net, and css reset by Eric Meyer.
Its main goal is to ensure that web principles for good typography are followed automatically for all type sizes, and that all elements flow vertically along a measured rythmn.
Almost all elements are affected by the CSS, from H1 through H6, to more obscure elements such as ABBR and KBD – each is reset so as to remove any existing styles imposed by certain browsers.
All code is fully cross platform and complies with W3C standards for web accessibilty.

CSS Source Code : type.css

Options :

Headings :

1. 
   

   Toggle Capitalisation of Headlines

2. 
   

   Toggle to SERIF Typefaces

3. 
   

   Print Mode

   Sizes :

4. 
   

   Increase Maximum Font Size by +1 (to 37 points)

5. 
   

   Decrease Maximum Font Size by +10 (to 46 points)

6. 
   

   Increase Maximum Font Size by -1 (to 35 points)

7. 
   

   Decrease Maximum Font Size by -10 (to 26 points)

8. Max Size : 36 points | 40 points | 48 points | 96 points

Grid :

9. 
   

   Increase Baseline by +1 (new size : 23 pixels)

10. 
    

    Decrease Baseline by -1 (new size : 21 pixels)

11. Baseline : 18 pixels | 20 pixels | 22 pixels | 24 pixels | 32 pixels

Colour :

1. 
   

   Black Text

2. 
   

   Brown Text

3. 
   

   Red Links

4. 
   

   Green Links

5. 
   

   Blue Links
6. Text Colour :
   (You can use Hex or RGB Values)
7. Link Colour :
   (You can use Hex or RGB Values)

Examples :

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 04 :
   Double size deafults

More like this css|php|Typography.