diff --git a/index.html b/index.html
index bfcaefc5..22d43a30 100644
--- a/index.html
+++ b/index.html
@@ -1181,6 +1181,15 @@
               </tr>
             </tbody>
 
+            <tbody id="styleLetterSpacing">
+              <tr data-tip="Set letter spacing">
+                <td>Letter spacing</td>
+                <td>
+                  <slider-input id="styleLetterSpacingInput" min="0" max="20" step=".01"></slider-input>
+                </td>
+              </tr>
+            </tbody>
+
             <tbody id="styleStrokeDash">
               <tr data-tip="Set stroke dash array (e.g. 5 2) and linecap">
                 <td>Stroke dash</td>
@@ -2678,6 +2687,24 @@
           />
         </div>
 
+        <button id="labelLetterSpacingShow" data-tip="Show the letter spacing section" class="icon-text-width"></button>
+        <div id="labelLetterSpacingSection" style="display: none">
+          <button
+            id="labelLetterSpacingHide"
+            data-tip="Hide the letter spacing section"
+            class="icon-text-width"
+          ></button>
+          <slider-input
+            id="labelLetterSpacingSize"
+            style="display: inline-block"
+            data-tip="Set the letter spacing size for this label"
+            min="0"
+            max="20"
+            step=".01"
+            value="0"
+          ></slider-input>
+        </div>
+
         <button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
         <button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
         <button
@@ -8024,7 +8051,7 @@
     <script src="main.js?v=1.100.00"></script>
 
     <script defer src="modules/relief-icons.js?v=1.99.05"></script>
-    <script defer src="modules/ui/style.js?v=1.99.12"></script>
+    <script defer src="modules/ui/style.js?v=1.101.00"></script>
     <script defer src="modules/ui/editors.js?v=1.99.05"></script>
     <script defer src="modules/ui/tools.js?v=1.100.00"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.99.00"></script>
@@ -8040,7 +8067,7 @@
     <script defer src="modules/ui/ice-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/lakes-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/coastline-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/labels-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/labels-editor.js?v=1.101.00"></script>
     <script defer src="modules/ui/rivers-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/rivers-creator.js?v=1.99.00"></script>
     <script defer src="modules/ui/relief-editor.js?v=1.99.00"></script>
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index d19de7ae..809be210 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -26,28 +26,32 @@ function editLabel() {
   modules.editLabel = true;
 
   // add listeners
-  document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
-  document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
-  document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
-  document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
-  document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
-  document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
+  byId("labelGroupShow").on("click", showGroupSection);
+  byId("labelGroupHide").on("click", hideGroupSection);
+  byId("labelGroupSelect").on("click", changeGroup);
+  byId("labelGroupInput").on("change", createNewGroup);
+  byId("labelGroupNew").on("click", toggleNewGroupInput);
+  byId("labelGroupRemove").on("click", removeLabelsGroup);
 
-  document.getElementById("labelTextShow").addEventListener("click", showTextSection);
-  document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
-  document.getElementById("labelText").addEventListener("input", changeText);
-  document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
+  byId("labelTextShow").on("click", showTextSection);
+  byId("labelTextHide").on("click", hideTextSection);
+  byId("labelText").on("input", changeText);
+  byId("labelTextRandom").on("click", generateRandomName);
 
-  document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
+  byId("labelEditStyle").on("click", editGroupStyle);
 
-  document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
-  document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
-  document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
-  document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
+  byId("labelSizeShow").on("click", showSizeSection);
+  byId("labelSizeHide").on("click", hideSizeSection);
+  byId("labelStartOffset").on("input", changeStartOffset);
+  byId("labelRelativeSize").on("input", changeRelativeSize);
 
-  document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
-  document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
-  document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
+  byId("labelLetterSpacingShow").on("click", showLetterSpacingSection);
+  byId("labelLetterSpacingHide").on("click", hideLetterSpacingSection);
+  byId("labelLetterSpacingSize").on("input", changeLetterSpacingSize);
+
+  byId("labelAlign").on("click", editLabelAlign);
+  byId("labelLegend").on("click", editLabelLegend);
+  byId("labelRemoveSingle").on("click", removeLabel);
 
   function showEditorTips() {
     showMainTip();
@@ -62,12 +66,12 @@ function editLabel() {
     const group = text.parentNode.id;
 
     if (group === "states" || group === "burgLabels") {
-      document.getElementById("labelGroupShow").style.display = "none";
+      byId("labelGroupShow").style.display = "none";
       return;
     }
 
     hideGroupSection();
-    const select = document.getElementById("labelGroupSelect");
+    const select = byId("labelGroupSelect");
     select.options.length = 0; // remove all options
 
     labels.selectAll(":scope > g").each(function () {
@@ -78,17 +82,17 @@ function editLabel() {
   }
 
   function updateValues(textPath) {
-    document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")]
-      .map(tspan => tspan.textContent)
-      .join("|");
-    document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
-    document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
+    byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
+    byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
+    byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
+    let letterSpacingSize = textPath.getAttribute("letter-spacing") ? textPath.getAttribute("letter-spacing") : 0;
+    byId("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
   }
 
   function drawControlPointsAndLine() {
     debug.select("#controlPoints").remove();
     debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
+    const path = byId("textPath_" + elSelected.attr("id"));
     debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
     const l = path.getTotalLength();
     if (!l) return;
@@ -117,7 +121,7 @@ function editLabel() {
   }
 
   function redrawLabelPath() {
-    const path = document.getElementById("textPath_" + elSelected.attr("id"));
+    const path = byId("textPath_" + elSelected.attr("id"));
     lineGen.curve(d3.curveBundle.beta(1));
     const points = [];
     debug
@@ -188,19 +192,19 @@ function editLabel() {
 
   function showGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelGroupSection").style.display = "inline-block";
+    byId("labelGroupSection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelGroupSection").style.display = "none";
-    document.getElementById("labelGroupInput").style.display = "none";
-    document.getElementById("labelGroupInput").value = "";
-    document.getElementById("labelGroupSelect").style.display = "inline-block";
+    byId("labelGroupSection").style.display = "none";
+    byId("labelGroupInput").style.display = "none";
+    byId("labelGroupInput").value = "";
+    byId("labelGroupSelect").style.display = "inline-block";
   }
 
   function changeGroup() {
-    document.getElementById(this.value).appendChild(elSelected.node());
+    byId(this.value).appendChild(elSelected.node());
   }
 
   function toggleNewGroupInput() {
@@ -224,7 +228,7 @@ function editLabel() {
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (document.getElementById(group)) {
+    if (byId(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
@@ -237,22 +241,22 @@ function editLabel() {
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
-      document.getElementById("labelGroupSelect").selectedOptions[0].remove();
-      document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
+      byId("labelGroupSelect").selectedOptions[0].remove();
+      byId("labelGroupSelect").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      document.getElementById("labelGroupInput").value = "";
+      byId("labelGroupInput").value = "";
       return;
     }
 
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    document.getElementById("labels").appendChild(newGroup);
+    byId("labels").appendChild(newGroup);
     newGroup.id = group;
-    document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
-    document.getElementById(group).appendChild(elSelected.node());
+    byId("labelGroupSelect").options.add(new Option(group, group, false, true));
+    byId(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    document.getElementById("labelGroupInput").value = "";
+    byId("labelGroupInput").value = "";
   }
 
   function removeLabelsGroup() {
@@ -275,7 +279,7 @@ function editLabel() {
             .select("#" + group)
             .selectAll("text")
             .each(function () {
-              document.getElementById("textPath_" + this.id).remove();
+              byId("textPath_" + this.id).remove();
               this.remove();
             });
           if (!basic) labels.select("#" + group).remove();
@@ -289,16 +293,16 @@ function editLabel() {
 
   function showTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelTextSection").style.display = "inline-block";
+    byId("labelTextSection").style.display = "inline-block";
   }
 
   function hideTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelTextSection").style.display = "none";
+    byId("labelTextSection").style.display = "none";
   }
 
   function changeText() {
-    const input = document.getElementById("labelText").value;
+    const input = byId("labelText").value;
     const el = elSelected.select("textPath").node();
 
     const lines = input.split("|");
@@ -323,7 +327,7 @@ function editLabel() {
       const culture = pack.cells.culture[cell];
       name = Names.getCulture(culture);
     }
-    document.getElementById("labelText").value = name;
+    byId("labelText").value = name;
     changeText();
   }
 
@@ -334,12 +338,22 @@ function editLabel() {
 
   function showSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    document.getElementById("labelSizeSection").style.display = "inline-block";
+    byId("labelSizeSection").style.display = "inline-block";
   }
 
   function hideSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("labelSizeSection").style.display = "none";
+    byId("labelSizeSection").style.display = "none";
+  }
+
+  function showLetterSpacingSection() {
+    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
+    byId("labelLetterSpacingSection").style.display = "inline-block";
+  }
+
+  function hideLetterSpacingSection() {
+    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
+    byId("labelLetterSpacingSection").style.display = "none";
   }
 
   function changeStartOffset() {
@@ -353,6 +367,12 @@ function editLabel() {
     changeText();
   }
 
+  function changeLetterSpacingSize() {
+    elSelected.select("textPath").attr("letter-spacing", this.value + "px");
+    tip("Label letter-spacing size: " + this.value + "px");
+    changeText();
+  }
+
   function editLabelAlign() {
     const bbox = elSelected.node().getBBox();
     const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
diff --git a/modules/ui/style-presets.js b/modules/ui/style-presets.js
index ff3ae365..01626205 100644
--- a/modules/ui/style-presets.js
+++ b/modules/ui/style-presets.js
@@ -271,7 +271,15 @@ function addStylePreset() {
         "data-columns"
       ],
       "#legendBox": ["fill", "fill-opacity"],
-      "#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"],
+      "#burgLabels > #cities": [
+        "opacity",
+        "fill",
+        "text-shadow",
+        "letter-spacing",
+        "data-size",
+        "font-size",
+        "font-family"
+      ],
       "#burgIcons > #cities": [
         "opacity",
         "fill",
@@ -283,7 +291,15 @@ function addStylePreset() {
         "stroke-linecap"
       ],
       "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"],
-      "#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"],
+      "#burgLabels > #towns": [
+        "opacity",
+        "fill",
+        "text-shadow",
+        "letter-spacing",
+        "data-size",
+        "font-size",
+        "font-family"
+      ],
       "#burgIcons > #towns": [
         "opacity",
         "fill",
@@ -301,6 +317,7 @@ function addStylePreset() {
         "stroke",
         "stroke-width",
         "text-shadow",
+        "letter-spacing",
         "data-size",
         "font-size",
         "font-family",
@@ -312,6 +329,7 @@ function addStylePreset() {
         "stroke",
         "stroke-width",
         "text-shadow",
+        "letter-spacing",
         "data-size",
         "font-size",
         "font-family",
diff --git a/modules/ui/style.js b/modules/ui/style.js
index fb62a8e5..4f003bb1 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -18,7 +18,7 @@
 }
 
 // store some style inputs as options
-styleElements.addEventListener("change", function (ev) {
+styleElements.on("change", function (ev) {
   if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
 });
 
@@ -71,7 +71,7 @@ function getColorScheme(scheme = "bright") {
 }
 
 // Toggle style sections on element select
-styleElementSelect.addEventListener("change", selectStyleElement);
+styleElementSelect.on("change", selectStyleElement);
 
 function selectStyleElement() {
   const styleElement = styleElementSelect.value;
@@ -239,6 +239,7 @@ function selectStyleElement() {
     styleFill.style.display = "block";
     styleStroke.style.display = "block";
     styleStrokeWidth.style.display = "block";
+    styleLetterSpacing.style.display = "block";
 
     styleShadow.style.display = "block";
     styleSize.style.display = "block";
@@ -246,6 +247,7 @@ function selectStyleElement() {
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
     styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
+    styleLetterSpacingInput.value = el.attr("letter-spacing") || 0;
     styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
 
     styleFont.style.display = "block";
@@ -407,7 +409,7 @@ function selectStyleElement() {
 }
 
 // Handle style inputs change
-styleGroupSelect.addEventListener("change", selectStyleElement);
+styleGroupSelect.on("change", selectStyleElement);
 
 function getEl() {
   const el = styleElementSelect.value;
@@ -416,42 +418,46 @@ function getEl() {
   else return svg.select("#" + el).select("#" + g);
 }
 
-styleFillInput.addEventListener("input", function () {
+styleFillInput.on("input", function () {
   styleFillOutput.value = this.value;
   getEl().attr("fill", this.value);
 });
 
-styleStrokeInput.addEventListener("input", function () {
+styleStrokeInput.on("input", function () {
   styleStrokeOutput.value = this.value;
   getEl().attr("stroke", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeWidthInput.addEventListener("input", e => {
+styleStrokeWidthInput.on("input", e => {
   getEl().attr("stroke-width", e.target.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeDasharrayInput.addEventListener("input", function () {
+styleLetterSpacingInput.on("input", e => {
+  getEl().attr("letter-spacing", e.target.value);
+});
+
+styleStrokeDasharrayInput.on("input", function () {
   getEl().attr("stroke-dasharray", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeLinecapInput.addEventListener("change", function () {
+styleStrokeLinecapInput.on("change", function () {
   getEl().attr("stroke-linecap", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleOpacityInput.addEventListener("input", e => {
+styleOpacityInput.on("input", e => {
   getEl().attr("opacity", e.target.value);
 });
 
-styleFilterInput.addEventListener("change", function () {
+styleFilterInput.on("change", function () {
   if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value);
   getEl().attr("filter", this.value);
 });
 
-styleTextureInput.addEventListener("change", function () {
+styleTextureInput.on("change", function () {
   changeTexture(this.value);
 });
 
@@ -470,7 +476,7 @@ function updateTextureSelectValue(href) {
   }
 }
 
-styleTextureShiftX.addEventListener("input", function () {
+styleTextureShiftX.on("input", function () {
   texture.attr("data-x", this.value);
   texture
     .select("image")
@@ -478,7 +484,7 @@ styleTextureShiftX.addEventListener("input", function () {
     .attr("width", graphWidth - this.valueAsNumber);
 });
 
-styleTextureShiftY.addEventListener("input", function () {
+styleTextureShiftY.on("input", function () {
   texture.attr("data-y", this.value);
   texture
     .select("image")
@@ -486,17 +492,17 @@ styleTextureShiftY.addEventListener("input", function () {
     .attr("height", graphHeight - this.valueAsNumber);
 });
 
-styleClippingInput.addEventListener("change", function () {
+styleClippingInput.on("change", function () {
   getEl().attr("mask", this.value);
 });
 
-styleGridType.addEventListener("change", function () {
+styleGridType.on("change", function () {
   getEl().attr("type", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
   calculateFriendlyGridSize();
 });
 
-styleGridScale.addEventListener("input", function () {
+styleGridScale.on("input", function () {
   getEl().attr("scale", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
   calculateFriendlyGridSize();
@@ -508,52 +514,52 @@ function calculateFriendlyGridSize() {
   styleGridSizeFriendly.value = friendly;
 }
 
-styleGridShiftX.addEventListener("input", function () {
+styleGridShiftX.on("input", function () {
   getEl().attr("dx", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleGridShiftY.addEventListener("input", function () {
+styleGridShiftY.on("input", function () {
   getEl().attr("dy", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleRescaleMarkers.addEventListener("change", function () {
+styleRescaleMarkers.on("change", function () {
   markers.attr("rescale", +this.checked);
   invokeActiveZooming();
 });
 
-styleCoastlineAuto.addEventListener("change", function () {
+styleCoastlineAuto.on("change", function () {
   coastline.select("#sea_island").attr("auto-filter", +this.checked);
   styleFilter.style.display = this.checked ? "none" : "block";
   invokeActiveZooming();
 });
 
-styleOceanFill.addEventListener("input", function () {
+styleOceanFill.on("input", function () {
   oceanLayers.select("rect").attr("fill", this.value);
   styleOceanFillOutput.value = this.value;
 });
 
-styleOceanPattern.addEventListener("change", function () {
+styleOceanPattern.on("change", function () {
   byId("oceanicPattern")?.setAttribute("href", this.value);
 });
 
-styleOceanPatternOpacity.addEventListener("input", e => {
+styleOceanPatternOpacity.on("input", e => {
   byId("oceanicPattern").setAttribute("opacity", e.target.value);
 });
 
-outlineLayers.addEventListener("change", function () {
+outlineLayers.on("change", function () {
   oceanLayers.selectAll("path").remove();
   oceanLayers.attr("layers", this.value);
   OceanLayers();
 });
 
-styleHeightmapScheme.addEventListener("change", function () {
+styleHeightmapScheme.on("change", function () {
   getEl().attr("scheme", this.value);
   drawHeightmap();
 });
 
-openCreateHeightmapSchemeButton.addEventListener("click", function () {
+openCreateHeightmapSchemeButton.on("click", function () {
   // start with current scheme
   const scheme = getEl().attr("scheme");
   this.dataset.stops = scheme.startsWith("#")
@@ -672,97 +678,97 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
   });
 });
 
-styleHeightmapRenderOcean.addEventListener("change", e => {
+styleHeightmapRenderOcean.on("change", e => {
   const checked = +e.target.checked;
   getEl().attr("data-render", checked);
   drawHeightmap();
 });
 
-styleHeightmapTerracing.addEventListener("input", e => {
+styleHeightmapTerracing.on("input", e => {
   getEl().attr("terracing", e.target.value);
   drawHeightmap();
 });
 
-styleHeightmapSkip.addEventListener("input", e => {
+styleHeightmapSkip.on("input", e => {
   getEl().attr("skip", e.target.value);
   drawHeightmap();
 });
 
-styleHeightmapSimplification.addEventListener("input", e => {
+styleHeightmapSimplification.on("input", e => {
   getEl().attr("relax", e.target.value);
   drawHeightmap();
 });
 
-styleHeightmapCurve.addEventListener("change", e => {
+styleHeightmapCurve.on("change", e => {
   getEl().attr("curve", e.target.value);
   drawHeightmap();
 });
 
-styleReliefSet.addEventListener("change", e => {
+styleReliefSet.on("change", e => {
   terrain.attr("set", e.target.value);
   ReliefIcons.draw();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleReliefSize.addEventListener("change", e => {
+styleReliefSize.on("change", e => {
   terrain.attr("size", e.target.value);
   ReliefIcons.draw();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleReliefDensity.addEventListener("change", e => {
+styleReliefDensity.on("change", e => {
   terrain.attr("density", e.target.value);
   ReliefIcons.draw();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleTemperatureFillOpacityInput.addEventListener("input", e => {
+styleTemperatureFillOpacityInput.on("input", e => {
   temperature.attr("fill-opacity", e.target.value);
 });
 
-styleTemperatureFontSizeInput.addEventListener("input", e => {
+styleTemperatureFontSizeInput.on("input", e => {
   temperature.attr("font-size", e.target.value + "px");
 });
 
-styleTemperatureFillInput.addEventListener("input", e => {
+styleTemperatureFillInput.on("input", e => {
   temperature.attr("fill", e.target.value);
   styleTemperatureFillOutput.value = e.target.value;
 });
 
-stylePopulationRuralStrokeInput.addEventListener("input", e => {
+stylePopulationRuralStrokeInput.on("input", e => {
   population.select("#rural").attr("stroke", e.target.value);
   stylePopulationRuralStrokeOutput.value = e.target.value;
 });
 
-stylePopulationUrbanStrokeInput.addEventListener("input", e => {
+stylePopulationUrbanStrokeInput.on("input", e => {
   population.select("#urban").attr("stroke", e.target.value);
   stylePopulationUrbanStrokeOutput.value = e.target.value;
 });
 
-styleCompassSizeInput.addEventListener("input", shiftCompass);
-styleCompassShiftX.addEventListener("input", shiftCompass);
-styleCompassShiftY.addEventListener("input", shiftCompass);
+styleCompassSizeInput.on("input", shiftCompass);
+styleCompassShiftX.on("input", shiftCompass);
+styleCompassShiftY.on("input", shiftCompass);
 
 function shiftCompass() {
   const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
   compass.select("use").attr("transform", tr);
 }
 
-styleLegendColItems.addEventListener("input", e => {
+styleLegendColItems.on("input", e => {
   legend.select("#legendBox").attr("data-columns", e.target.value);
   redrawLegend();
 });
 
-styleLegendBack.addEventListener("input", e => {
+styleLegendBack.on("input", e => {
   styleLegendBackOutput.value = e.target.value;
   legend.select("#legendBox").attr("fill", e.target.value);
 });
 
-styleLegendOpacity.addEventListener("input", e => {
+styleLegendOpacity.on("input", e => {
   legend.select("#legendBox").attr("fill-opacity", e.target.value);
 });
 
-styleSelectFont.addEventListener("change", changeFont);
+styleSelectFont.on("change", changeFont);
 function changeFont() {
   const family = styleSelectFont.value;
   getEl().attr("font-family", family);
@@ -770,11 +776,11 @@ function changeFont() {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
-styleShadowInput.addEventListener("input", function () {
+styleShadowInput.on("input", function () {
   getEl().style("text-shadow", this.value);
 });
 
-styleFontAdd.addEventListener("click", function () {
+styleFontAdd.on("click", function () {
   addFontNameInput.value = "";
   addFontURLInput.value = "";
 
@@ -811,20 +817,20 @@ styleFontAdd.addEventListener("click", function () {
   });
 });
 
-addFontMethod.addEventListener("change", function () {
+addFontMethod.on("change", function () {
   addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none";
 });
 
-styleFontSize.addEventListener("change", function () {
+styleFontSize.on("change", function () {
   changeFontSize(getEl(), +this.value);
 });
 
-styleFontPlus.addEventListener("click", function () {
+styleFontPlus.on("click", function () {
   const current = +styleFontSize.value || 12;
   changeFontSize(getEl(), Math.min(current + 1, 999));
 });
 
-styleFontMinus.addEventListener("click", function () {
+styleFontMinus.on("click", function () {
   const current = +styleFontSize.value || 12;
   changeFontSize(getEl(), Math.max(current - 1, 1));
 });
@@ -847,16 +853,16 @@ function changeFontSize(el, size) {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
-styleRadiusInput.addEventListener("change", function () {
+styleRadiusInput.on("change", function () {
   changeRadius(+this.value);
 });
 
-styleRadiusPlus.addEventListener("click", function () {
+styleRadiusPlus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
   changeRadius(size);
 });
 
-styleRadiusMinus.addEventListener("click", function () {
+styleRadiusMinus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
   changeRadius(size);
 });
@@ -878,16 +884,16 @@ function changeRadius(size, group) {
   changeIconSize(size * 2, g); // change also anchor icons
 }
 
-styleIconSizeInput.addEventListener("change", function () {
+styleIconSizeInput.on("change", function () {
   changeIconSize(+this.value);
 });
 
-styleIconSizePlus.addEventListener("click", function () {
+styleIconSizePlus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
   changeIconSize(size);
 });
 
-styleIconSizeMinus.addEventListener("click", function () {
+styleIconSizeMinus.on("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
   changeIconSize(size);
 });
@@ -912,34 +918,34 @@ function changeIconSize(size, group) {
   styleIconSizeInput.value = size;
 }
 
-styleStatesBodyOpacity.addEventListener("input", e => {
+styleStatesBodyOpacity.on("input", e => {
   statesBody.attr("opacity", e.target.value);
 });
 
-styleStatesBodyFilter.addEventListener("change", function () {
+styleStatesBodyFilter.on("change", function () {
   statesBody.attr("filter", this.value);
 });
 
-styleStatesHaloWidth.addEventListener("input", e => {
+styleStatesHaloWidth.on("input", e => {
   const value = e.target.value;
   statesHalo.attr("data-width", value).attr("stroke-width", value);
 });
 
-styleStatesHaloOpacity.addEventListener("input", e => {
+styleStatesHaloOpacity.on("input", e => {
   statesHalo.attr("opacity", e.target.value);
 });
 
-styleStatesHaloBlur.addEventListener("input", e => {
+styleStatesHaloBlur.on("input", e => {
   const value = Number(e.target.value);
   const blur = value > 0 ? `blur(${value}px)` : null;
   statesHalo.attr("filter", blur);
 });
 
-styleArmiesFillOpacity.addEventListener("input", e => {
+styleArmiesFillOpacity.on("input", e => {
   armies.attr("fill-opacity", e.target.value);
 });
 
-styleArmiesSize.addEventListener("input", e => {
+styleArmiesSize.on("input", e => {
   const value = Number(e.target.value);
   armies.attr("box-size", value).attr("font-size", value * 2);
 
@@ -950,17 +956,17 @@ styleArmiesSize.addEventListener("input", e => {
   });
 });
 
-emblemsStateSizeInput.addEventListener("change", e => {
+emblemsStateSizeInput.on("change", e => {
   emblems.select("#stateEmblems").attr("data-size", e.target.value);
   drawEmblems();
 });
 
-emblemsProvinceSizeInput.addEventListener("change", e => {
+emblemsProvinceSizeInput.on("change", e => {
   emblems.select("#provinceEmblems").attr("data-size", e.target.value);
   drawEmblems();
 });
 
-emblemsBurgSizeInput.addEventListener("change", e => {
+emblemsBurgSizeInput.on("change", e => {
   emblems.select("#burgEmblems").attr("data-size", e.target.value);
   drawEmblems();
 });
@@ -1015,7 +1021,7 @@ Object.keys(vignettePresets).forEach(preset => {
   styleVignettePreset.options.add(new Option(preset, preset, false, false));
 });
 
-styleVignettePreset.addEventListener("change", function () {
+styleVignettePreset.on("change", function () {
   const attributes = JSON.parse(vignettePresets[this.value]);
 
   for (const selector in attributes) {
@@ -1047,35 +1053,35 @@ styleVignettePreset.addEventListener("change", function () {
   }
 });
 
-styleVignetteX.addEventListener("input", e => {
+styleVignetteX.on("input", e => {
   byId("vignette-rect")?.setAttribute("x", `${e.target.value}%`);
 });
 
-styleVignetteWidth.addEventListener("input", e => {
+styleVignetteWidth.on("input", e => {
   byId("vignette-rect")?.setAttribute("width", `${e.target.value}%`);
 });
 
-styleVignetteY.addEventListener("input", e => {
+styleVignetteY.on("input", e => {
   byId("vignette-rect")?.setAttribute("y", `${e.target.value}%`);
 });
 
-styleVignetteHeight.addEventListener("input", e => {
+styleVignetteHeight.on("input", e => {
   byId("vignette-rect")?.setAttribute("height", `${e.target.value}%`);
 });
 
-styleVignetteRx.addEventListener("input", e => {
+styleVignetteRx.on("input", e => {
   byId("vignette-rect")?.setAttribute("rx", `${e.target.value}%`);
 });
 
-styleVignetteRy.addEventListener("input", e => {
+styleVignetteRy.on("input", e => {
   byId("vignette-rect")?.setAttribute("ry", `${e.target.value}%`);
 });
 
-styleVignetteBlur.addEventListener("input", e => {
+styleVignetteBlur.on("input", e => {
   byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`);
 });
 
-styleScaleBar.addEventListener("input", function (event) {
+styleScaleBar.on("input", function (event) {
   const scaleBarBack = scaleBar.select("#scaleBarBack");
   if (!scaleBarBack.size()) return;
 
@@ -1155,7 +1161,7 @@ function updateElements() {
 }
 
 // GLOBAL FILTERS
-mapFilters.addEventListener("click", applyMapFilter);
+mapFilters.on("click", applyMapFilter);
 function applyMapFilter(event) {
   if (event.target.tagName !== "BUTTON") return;
   const button = event.target;
diff --git a/styles/ancient.json b/styles/ancient.json
index 8bc05ec2..d57aa524 100644
--- a/styles/ancient.json
+++ b/styles/ancient.json
@@ -332,6 +332,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 12,
     "font-size": 12,
     "font-family": "Great Vibes"
@@ -357,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Great Vibes"
@@ -384,6 +386,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 22,
     "font-size": 22,
     "font-family": "Great Vibes",
@@ -395,6 +398,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Times New Roman",
diff --git a/styles/atlas.json b/styles/atlas.json
index d7990935..ef7d7f8a 100644
--- a/styles/atlas.json
+++ b/styles/atlas.json
@@ -332,6 +332,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Amarante"
@@ -357,6 +358,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Amarante"
@@ -384,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 21,
     "font-size": 21,
     "font-family": "Amarante",
@@ -395,6 +398,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Amarante",
diff --git a/styles/clean.json b/styles/clean.json
index 82681e28..c5aad094 100644
--- a/styles/clean.json
+++ b/styles/clean.json
@@ -319,22 +319,22 @@
     "mask": "url(#land)"
   },
   "#legend": {
-    "data-size": 12.74,
-    "font-size": 12.74,
+    "data-size": 12,
+    "font-size": 12,
     "font-family": "Arial",
     "stroke": "#909090",
-    "stroke-width": 1.13,
+    "stroke-width": 1,
     "stroke-dasharray": 0,
     "stroke-linecap": "round",
-    "data-x": 98.39,
-    "data-y": 12.67,
-    "data-columns": null
+    "data-x": 99,
+    "data-y": 93,
+    "data-columns": 8
   },
-  "#legendBox": {},
   "#burgLabels > #cities": {
     "opacity": 1,
     "fill": "#414141",
     "text-shadow": "white 0 0 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Arial"
@@ -359,6 +359,8 @@
   "#burgLabels > #towns": {
     "opacity": 1,
     "fill": "#414141",
+    "text-shadow": "none",
+    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Arial"
@@ -386,6 +388,7 @@
     "stroke": "#303030",
     "stroke-width": 0,
     "text-shadow": "white 0 0 2px",
+    "letter-spacing": 0,
     "data-size": 10,
     "font-size": 10,
     "font-family": "Arial",
@@ -397,6 +400,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0 0 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Arial",
diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json
index 2821eb7f..93f22284 100644
--- a/styles/cyberpunk.json
+++ b/styles/cyberpunk.json
@@ -332,6 +332,7 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Orbitron"
@@ -357,6 +358,7 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Orbitron"
@@ -384,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Orbitron",
@@ -395,6 +398,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/darkSeas.json b/styles/darkSeas.json
index 9bed1ef2..2bc90fa6 100644
--- a/styles/darkSeas.json
+++ b/styles/darkSeas.json
@@ -321,6 +321,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Lugrasimo"
@@ -345,6 +346,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Lugrasimo"
@@ -371,6 +373,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 21,
     "font-size": 21,
     "font-family": "Eagle Lake",
@@ -382,6 +385,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Eagle Lake",
diff --git a/styles/default.json b/styles/default.json
index 623e37f3..9168debc 100644
--- a/styles/default.json
+++ b/styles/default.json
@@ -332,6 +332,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Almendra SC"
@@ -357,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Almendra SC"
@@ -384,6 +386,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 22,
     "font-size": 22,
     "font-family": "Almendra SC",
@@ -395,6 +398,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/gloom.json b/styles/gloom.json
index 858c807c..19318882 100644
--- a/styles/gloom.json
+++ b/styles/gloom.json
@@ -335,6 +335,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0 0 2px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Underdog"
@@ -359,6 +360,8 @@
   "#burgLabels > #towns": {
     "opacity": 1,
     "fill": "#3e3e4b",
+    "text-shadow": "none",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Underdog"
@@ -386,6 +389,7 @@
     "stroke": "#b5b5b5",
     "stroke-width": 0,
     "text-shadow": "white 0 0 2px",
+    "letter-spacing": 0,
     "data-size": 20,
     "font-size": 20,
     "font-family": "Underdog",
@@ -397,6 +401,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0 0 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Underdog",
diff --git a/styles/light.json b/styles/light.json
index cf846e1b..de539872 100644
--- a/styles/light.json
+++ b/styles/light.json
@@ -332,6 +332,7 @@
     "opacity": 1,
     "fill": "#3a3a3a",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "IM Fell English"
@@ -357,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "IM Fell English"
@@ -384,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0.3,
     "text-shadow": "white 0px 0px 6px",
+    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "IM Fell English",
@@ -395,6 +398,7 @@
     "stroke": "#701b05",
     "stroke-width": 0.1,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 6,
     "font-size": 6,
     "font-family": "IM Fell English",
diff --git a/styles/monochrome.json b/styles/monochrome.json
index 20d3e588..1ee17c43 100644
--- a/styles/monochrome.json
+++ b/styles/monochrome.json
@@ -328,6 +328,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Courier New"
@@ -353,6 +354,7 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Courier New"
@@ -380,6 +382,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Courier New",
@@ -390,7 +393,8 @@
     "fill": "#3e3e4b",
     "stroke": "#3a3a3a",
     "stroke-width": 0,
-    "text-shadow": "white 0 0 4px",
+    "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Courier New",
diff --git a/styles/night.json b/styles/night.json
index 90b40e75..67a5e799 100644
--- a/styles/night.json
+++ b/styles/night.json
@@ -332,6 +332,7 @@
     "opacity": 1,
     "fill": "#dbdbe1",
     "text-shadow": "black 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Courier New"
@@ -357,6 +358,7 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "black 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4.28,
     "font-size": 4.28,
     "font-family": "Courier New"
@@ -384,6 +386,7 @@
     "stroke": "#7a83ae",
     "stroke-width": 0.3,
     "text-shadow": "black 0px 0px 0.1px",
+    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "Courier New",
@@ -394,7 +397,8 @@
     "fill": "#3e3e4b",
     "stroke": "#3a3a3a",
     "stroke-width": 0,
-    "text-shadow": "white 0px 0px 4px",
+    "text-shadow": "black 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/pale.json b/styles/pale.json
index 312009b9..8e839600 100644
--- a/styles/pale.json
+++ b/styles/pale.json
@@ -332,6 +332,7 @@
     "opacity": 0.8,
     "fill": "#3a3a3a",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Arima Madurai"
@@ -357,6 +358,7 @@
     "opacity": 0.8,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Arima Madurai"
@@ -384,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 6px",
+    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "Arima Madurai",
@@ -395,6 +398,7 @@
     "stroke": "#701b05",
     "stroke-width": 0.1,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 6,
     "font-size": 6,
     "font-family": "Arima Madurai",
diff --git a/styles/watercolor.json b/styles/watercolor.json
index 79cc9484..982c1b49 100644
--- a/styles/watercolor.json
+++ b/styles/watercolor.json
@@ -332,6 +332,7 @@
     "opacity": 1,
     "fill": "#043449",
     "text-shadow": "white 0px 0px 2px",
+    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Comfortaa"
@@ -357,6 +358,7 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Comfortaa"
@@ -384,6 +386,7 @@
     "stroke": "#000000",
     "stroke-width": 0.15,
     "text-shadow": "black 1px 1px 3px",
+    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Gloria Hallelujah",
@@ -395,6 +398,7 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
+    "letter-spacing": 0,
     "data-size": 16,
     "font-size": 16,
     "font-family": "Comfortaa",
diff --git a/versioning.js b/versioning.js
index c8acea04..8a5f9393 100644
--- a/versioning.js
+++ b/versioning.js
@@ -12,7 +12,7 @@
  *
  * Example: 1.102.0 -> Major version 1, Minor version 102, Patch version 0
  */
-const VERSION = "1.100.00";
+const VERSION = "1.101.00";
 
 {
   document.title += " v" + VERSION;
@@ -20,7 +20,7 @@ const VERSION = "1.100.00";
   if (loadingScreenVersion) loadingScreenVersion.innerText = `v${VERSION}`;
 
   const storedVersion = localStorage.getItem("version");
-  if (compareVersions(storedVersion, VERSION).isOlder) setTimeout(showUpdateWindow, 6000);
+  if (compareVersions(storedVersion, VERSION, {patch: false}).isOlder) setTimeout(showUpdateWindow, 6000);
 
   function showUpdateWindow() {
     const changelog = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog";
@@ -33,6 +33,7 @@ const VERSION = "1.100.00";
 
       <ul>
         <strong>Latest changes:</strong>
+        <li>Style: ability to set letter spacing</li>
         <li>Zones update</li>
         <li>Notes Editor: on-demand AI text generation</li>
         <li>New style preset: Dark Seas</li>
@@ -43,12 +44,6 @@ const VERSION = "1.100.00";
         <li>Ability to render ocean heightmap</li>
         <li>Scale bar styling features</li>
         <li>Vignette visual layer and vignette styling options</li>
-        <li>Ability to define custom heightmap color scheme</li>
-        <li>New style preset Night and new heightmap color schemes</li>
-        <li>Random encounter markers (integration with <a href="https://deorum.vercel.app/" target="_blank">Deorum</a>)</li>
-        <li>Auto-load of the last saved map is now optional (see <i>Onload behavior</i> in Options)</li>
-        <li>New label placement algorithm for states</li>
-        <li>North and South Poles temperature can be set independently</li>
       </ul>
 
       <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>
@@ -57,16 +52,12 @@ const VERSION = "1.100.00";
     const buttons = {
       Ok: function () {
         $(this).dialog("close");
-        if (storedVersion) {
-          clearCache();
-          localStorage.clear();
-        }
         localStorage.setItem("version", VERSION);
       }
     };
 
     if (storedVersion) {
-      buttons.Reload = () => {
+      buttons.Cleanup = () => {
         clearCache();
         localStorage.clear();
         localStorage.setItem("version", VERSION);
@@ -95,11 +86,15 @@ function isValidVersion(versionString) {
   return !isNaN(major) && !isNaN(minor) && !isNaN(patch);
 }
 
-function compareVersions(version1, version2) {
+function compareVersions(version1, version2, options = {major: true, minor: true, patch: true}) {
   if (!isValidVersion(version1) || !isValidVersion(version2)) return {isEqual: false, isNewer: false, isOlder: false};
 
-  const [major1, minor1, patch1] = version1.split(".").map(Number);
-  const [major2, minor2, patch2] = version2.split(".").map(Number);
+  let [major1, minor1, patch1] = version1.split(".").map(Number);
+  let [major2, minor2, patch2] = version2.split(".").map(Number);
+
+  if (!options.major) major1 = major2 = 0;
+  if (!options.minor) minor1 = minor2 = 0;
+  if (!options.patch) patch1 = patch2 = 0;
 
   const isEqual = major1 === major2 && minor1 === minor2 && patch1 === patch2;
   const isNewer = major1 > major2 || (major1 === major2 && (minor1 > minor2 || (minor1 === minor2 && patch1 > patch2)));