The Spread of Weighted Lists

[SvN] All items in a list are not created equally. That’s the idea behind weighted lists that, via font size, emphasize popular items and minimize unpopular ones. The cool thing is that by merely altering font sizes, these lists suddenly gain a dimension; You can still find items alphabetically but you can also use visual weight to find the most requested items. My guess is we’ll be seeing a lot more of these weighted lists.

Indeed, since this post, 2 months ago, Technorati and Metafilter have added tags to their sites and launched their own weighted lists.
And I did too!

I don’t really have enough categories for this presentation to feel useful, especially since I already have the number of post for each category printed (next) to the keywords… but in fact, it instantly informs the reader on which are the more popular issues discussed on this site (saving him from comparing the numbers to find it out).

Here is the source code I used on this Movable Type installation 2.6xx. With the help of Tim Lawrenz and Max Paccagnella and Régine of We Make Money Not Art fame. Thank you guys!

<!– setting base variables. if you have more than 100000 entries in a category, please increase $iMin below –>

$iMax = -1;
$iMin = 100000;

<!– first run through all categories to know the smallest and largest number of posts in the categories.
nothing will be printed out here, it’s just for calculation. –>

if (<$MTCategoryCount$> > $iMax) { $iMax = <$MTCategoryCount$>; }
if (<$MTCategoryCount$> < $iMin) { $iMin = <$MTCategoryCount$>; }

<!– calculating the relative steps assuming that you want to have 5
different font-sizes. –>

$fSteps = ($iMax – $iMin) / 5;

<!– second run through the categories, now assigning font-sizes. –>

if (<$MTCategoryCount$> < $iMin + $fSteps) { $css = ‘g1’; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 1)) && <$MTCategoryCount$> < ($iMin + ($fSteps * 2))) { $css = ‘g2’; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 2)) && <$MTCategoryCount$> < ($iMin + ($fSteps * 3))) { $css = ‘g3’; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 3)) && <$MTCategoryCount$> < ($iMin + ($fSteps * 4))) { $css = ‘g4’; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 4))) { $css = ‘g5’; }

<!– printing the categories on the page –>

<span class=”<?php print($css)?>”> (<$MTCategoryCount$>)</span> |



and the CSS looks like:

.g1 {
font-size: 10px;

.g2 {
font-size: 13px;

.g3 {
font-size: 16px;

.g4 {
font-size: 19px;

.g5 {
font-size: 22px;



Let me know what you think?

Find below a list of other weighted lists:
Near Near Future
MetaFilter tags
Craiglist cities
Flickr tags
43 Things
Everything Burns: Zeitgeist
Technorati tags

Comments are closed.

    Based in Paris & Tokyo, Paul Baron is a senior product manager for hire. Ex-@AQworks. Co-founder of cultural platform Tokyo Art Beat.
    Service design, interaction design, startups, user research.
    Posts a few times a decade since 2003.

    Visit for the full site.

  • Tags

  • Archives