diff --git a/scripts/generator.js b/scripts/generator.js
index 7f8a48c..f7ffe97 100644
--- a/scripts/generator.js
+++ b/scripts/generator.js
@@ -201,6 +201,7 @@ Generator.generate = function () {
 Generator.generateHorizontalBorder = function (borderId, title) {
     var options = Generator.options.border[borderId];
     var padding = Generator.options.border.padding;
+    Generator.options.magic = (options.height * 1.36); // make the magic text size accessible to other files
     
     // The only two options that will change in generating the blocks
     var x = options.x, remainingWidth = options.width;
@@ -210,7 +211,7 @@ Generator.generateHorizontalBorder = function (borderId, title) {
     // Handle title first in order to subtract text width from full width
     if (title) {
         // Yes, 1.36 is a magic number found by guess-and-check
-        var text = '<text font-size="' + (options.height * 1.36) + '">' + title + '</text>';
+        var text = '<text>' + title.toUpperCase() + '</text>';
         var textWidth = svgElementWidth(text);
         
         text = '<text x="' + (options.width - textWidth + x) + '" y="' + 
diff --git a/scripts/util/utils.js b/scripts/util/utils.js
index a28a268..7befb03 100644
--- a/scripts/util/utils.js
+++ b/scripts/util/utils.js
@@ -65,14 +65,22 @@ var rgbToHash = function (rgb) {
  * @return {Number} the width
  */
 var svgElementWidth = function (html) {
-    var code = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">' + html + '</svg>';
+    var code = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="font-family:trek;font-size:'+ Generator.options.magic +'px;">' + html + '</svg>';
     
     var $elem = $(code).appendTo('body');
     
     var width = $elem.find('text')[0].getBBox().width;
     $elem.remove();
     
-    // A magic number fix for an inexplicable phenomena where this function returns a width 2.104x 
+    // what used to be a magic number fix for an inexplicable phenomena (now explained) where this function returns a width 2.104x 
     //   the actual width of the element
-    return width * 0.4752; 
+
+    // the reason why this was happening is because the 'font-family' tag wasn't defined,
+    //   so it just used a default font to get the width of the element. this also caused some strange side effects
+    //   where the text area wouldn't be scaled properly depending on which characters were used, e.g. a lot of 1s would
+    //   cause it to be smaller than needed whereas a lot of Ws would cause it to be larger than needed.
+
+    // UPDATED FIX
+    // moving css to the 'code' variable because it doesn't work properly in utils.js' 'text' variable
+    return width // * 0.4752; 
 };