diff --git a/templates/objectives/skills/tree.html b/templates/objectives/skills/tree.html
index 78a7d9aff4..ae66854ee1 100644
--- a/templates/objectives/skills/tree.html
+++ b/templates/objectives/skills/tree.html
@@ -27,6 +27,20 @@
 <script src="{% static "js/plugins/D3-dag/d3.min.js" %}"></script>
 <script src="{% static "js/plugins/D3-dag/d3-dag.0.8.2.min.js" %}"></script>
 <script>
+    function compute_font_size(string)
+    {
+        number_of_spaces = string.split(/ /g).length - 1;
+        number_of_small_char = (string.split(/f/g).length - 1)
+            + (string.split(/i/g).length - 1)
+            + (string.split(/j/g).length - 1)
+            + (string.split(/l/g).length - 1)
+            + (string.split(/t/g).length - 1)
+            + (string.split(/\//g).length - 1);
+        number_of_big_char = (string.split(/½/g).length - 1)
+            + (string.split(/¾/g).length - 1)
+        return string.length + number_of_big_char - (number_of_spaces + (number_of_small_char / 2));
+    }
+
     (async () => {
         const data = [
             {% for key, value in node_dict.items %}
@@ -148,7 +162,8 @@
             // .attr("font-size", "8")
             // .attr("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 24) + "px"; })
             // .attr("font-size", function(d) {return (1 / d.data.id.length) * 60;})
-            .attr("font-size", function(d) {return (1 / d.data.id.replace(/ /g,'').length) * 60;})
+            // .attr("font-size", set_font_size(d.data.id))
+            .attr("font-size", function(d) {return (1 / compute_font_size(d.data.id)) * 60;})
             .attr("font-weight", "bold")
             .attr("font-family", "sans-serif")
             .attr("text-anchor", "middle")