How to make <div> x times bigger? But not lineary bigger, it has to stop

Ok, so I have this tag cloud in the sidebar of my blog:

<div id="tags" class="widget clearfix">

    <h4 class="highlight-me">Nuage de tags</h4>
    <div class="tagcloud ">
        {% for tag, occurence in tags %}
            <a style="zoom: {{ 1 + (occurence - 1) * 0.25  }}" href="#">{{ tag }}</a>
        {% endfor %}
    </div>

</div>

tags is in array with the labels of tags as key and the number of appearance among all the blog articles as values. The goal is the more the tag appears, the bigger it is displayed (with the zoom: CSS inline declaration).

The formula I came up with is therefore : 1 + (x - 1) * 0.25. In that way, unique tags have a 1 zoom, tags that are twice are 1.25, three times tags are 1.50, 1.75, etc. This formula adds 0.25 by appearance to the value of the CSS zoom declaration in a linear way.

This is acceptable as long as no tags are used in more than 3 or 4 articles. But this won't be acceptable anymore when I'll have 50+ articles in the blog. I don't want the most popular tags to take too much space. For exemple, have a tag displayed with a 6.75 zoom which will be the case if used in 23 articles is not acceptable.

What would be the formula to make the zoom growth not linear anymore?

Thanks!

Solution

I don't know exactly what you are "allowed" to do or not.

but mathematically speeking this formula seems to do the exact value you want : y = arctan(x/4) + 1 Always rising and increasingly less rising, bounded toward infinite, etc...

Be also aware that your problem (considering your constraints) might not have a solution if do not have access to decent math functions.