This post assumes you've completed reading Graham Weldon (@predominant) article on using the plugin, the plugin pages them self and in specific the the tag cloud helper page. The helper example sets a size attribute  on the li tag. A way to utilize this would be writing a piece of jQuery (or javascript in general) that would take it and apply some styling to it. This would mean a lot more resource usage compared to pure CSS.

The PHP

At the PHP side we need to change a few things currently this is the code:

echo $this->TagCloud->display($tags, array(
    'before' => '<li size="%size%" class="tag">',
    'after' => '</li>'));

We'll be change that into this:

echo $this->TagCloud->display($tags, array(
    'before' => '<li class="fs%size% tag">',
    'after' => '</li>',
    'maxSize' => 50,
    'minSize' => 1));

As you can see a few things change. First off we also supply the min and maxSize options. The helper uses these and calculates a number in between those values, we'll use those numbers for the CSS classes later on. A option that change is before as you can see %size% is now used for a class, this class will contain it's font-size and any options you might want to add yourself.

Generating the CSS

If your lazy and just want a working example you can skip this bit and skip to The CSS. Since the example requires 50 css class and it takes alot of time to calculate the required values by hand I've a little script to do it for me/us.

<?php
$css = '';
$class = 'fs';
$start_size = 0.75;
$stop_size = 2.5;
$count = 50;
$precision = 4;
for($i=1;$i<=$count;$i++) {
        $css .= '.' . $class . $i . '{font-size:' . round((((($stop_size - $start_size) / ($count - 1)) * ($i - 1)) + $start_size),$precision) . "em;}\r\n";
}
echo $css;

The script has a few configuration values.

• class - the prefix to the %size% value
• start_size - the smallest possible tag size in em
• stop_size - the biggest possible tag size in em
• count - The number of classes and for now 50 :)
• precision - the maximum of digest behind the dot

The CSS

.fs1{font-size:0.75em;}
...
.fs50{font-size:2.5em;}

(Click here for the complete list.)

The Result