diff --git a/.vscode/settings.json b/.vscode/settings.json
index 39144f8..e678c95 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,6 +4,7 @@
         "audioshowkitlib",
         "ckeditor",
         "Ctrls",
+        "Disp",
         "easings",
         "linebreak",
         "musicplayer",
diff --git a/src/mappings/dimensions.js b/src/mappings/dimensions.js
index a566a27..18320d6 100644
--- a/src/mappings/dimensions.js
+++ b/src/mappings/dimensions.js
@@ -82,7 +82,7 @@ export function height({ element, growLower, growUpper, unit, lowerBin, visUpdat
  * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
  */
 export function fontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
-    const getter = () => parseInt(element.style.fontSize);
+    const getter = () => parseInt(element.style.fontSize) || 0;
     const setter = (value) => element.style.fontSize = value + unit;
     const conf = {
         minVal: growLower,
diff --git a/tutorials/VisMusicPlayer.html b/tutorials/VisMusicPlayer.html
index ea70591..75eb211 100644
--- a/tutorials/VisMusicPlayer.html
+++ b/tutorials/VisMusicPlayer.html
@@ -94,6 +94,15 @@
             ask.mappings.dimensions.height(squareElemConf);
         </code></pre>
     </div>
+    <div class="part">
+        <h3>Mapping Font Size</h3>
+        <p>You can map font size to frequency bins as well.</p>
+        <div class="result" style="height: 6rem;">
+            <div id="font-size-map-demo">
+                Wonky text!
+            </div>
+        </div>
+    </div>
     <div class="part">
         <h3>Mapping Font Color</h3>
         <p>Now for a bit more of an eccentric mapping, you can map the color of a font to the music!</p>
@@ -113,23 +122,24 @@
             });
         </code></pre>
     </div>
-    <p>In the same vein of mapping, we can also map HSL values. If you haven't heard of HSL values, you can read up about it <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">anywhere online really</a>, but essentially, it's another way of describing a color where a hue is used to describe a color, and then the color is adjusted by its saturation and lightness. Importantly for your case, it may make it easier to achieve the type of dynamic color mapping you're looking for (potentially when used in conjunction with any of RGBA components).</p>
-    <div class="result">
-        <div id="font-color-hsla-map-demo">
-            <strong>Hello more colors!</strong>
+    <div class="part">
+        <p>In the same vein of mapping, we can also map HSL values. If you haven't heard of HSL values, you can read up about it <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">anywhere online really</a>, but essentially, it's another way of describing a color where a hue is used to describe a color, and then the color is adjusted by its saturation and lightness. Importantly for your case, it may make it easier to achieve the type of dynamic color mapping you're looking for (potentially when used in conjunction with any of RGBA components).</p>
+        <div class="result">
+            <div id="font-color-hsla-map-demo">
+                <strong>Hello more colors!</strong>
+            </div>
         </div>
+        <pre><code class="language-js">
+            ask.mappings.coloring.fontColorHsla({ // Similar to the rgba example, except now with hsla.
+                element: document.getElementById("font-color-hsla-map-demo"),
+                select: "h", // Selecting the "hue" component.
+                lowerBin: 200,
+                upperBin: 220,
+                visUpdateRouter: player.visUpdateRouter,
+                interpolator: ask.support.easings.createEaseLinear(2.5)
+            })
+        </code></pre>
     </div>
-    <pre><code class="language-js">
-        ask.mappings.coloring.fontColorHsla({ // Similar to the rgba example, except now with hsla.
-            element: document.getElementById("font-color-hsla-map-demo"),
-            select: "h", // Selecting the "hue" component.
-            lowerBin: 200,
-            upperBin: 220,
-            visUpdateRouter: player.visUpdateRouter,
-            interpolator: ask.support.easings.createEaseLinear(2.5)
-        })
-    </code></pre>
-
     <div class="part">
         <h3>Mapping Background Color</h3>
         <p>This is kind of like the one for fonts, except, instead, rgba for background colors!</p>
@@ -219,6 +229,17 @@
     ask.mappings.dimensions.width(squareElemConf);
     ask.mappings.dimensions.height(squareElemConf);
 
+    ask.mappings.dimensions.fontSize({
+        element: document.getElementById("font-size-map-demo"),
+        growLower: 1,
+        growUpper: 3,
+        unit: "rem",
+        lowerBin: 200,
+        upperBin: 256,
+        visUpdateRouter: player.visUpdateRouter,
+        interpolator: ask.support.easings.createEaseLinear(2)
+    });
+
     ask.mappings.coloring.fontColorRgba({
         element: document.getElementById("font-color-rgba-map-demo"),
         select: "r",