Use rem for scale instead of px.

views/projects/item/normalize/index.html

@@ -69,8 +69,8 @@
         <ul>
           <li>
             <code>--base-scale</code> - The defining em-size of the document, in
-            anything but em.<br />
-            Format: <code>[size]px (pt, in, cm, etc...)</code>
+            rem.<br />
+            Format: <code>[size]rem</code>
           </li>
           <li>
             <code>--document-width</code> - The width of the document.<br />

views/projects/item/normalize/scripts/generator.js

@@ -8,8 +8,9 @@ generator.innerHTML = `<h2>Generator</h2>
       id="g_base-scale"
       type="number"
       style="width: 8ch"
-      value="16"
-      min="8"
+      value="1"
+      min="0"
+      step="0.1"
     />
   </label><br />
   <label for="g_document-width">Document width:
@@ -155,7 +156,7 @@ generatorFields.borderRadius.addEventListener('change', preview);
 
 function generateNormalizeCode() {
   return `:root {
-    --base-scale: ${generatorFields.baseScale.value}px;
+    --base-scale: ${generatorFields.baseScale.value}rem;
     --document-width: ${generatorFields.documentWidth.value}em;
 
     --base-color: ${generatorFields.baseColor.hue.value}, ${generatorFields.baseColor.sat.value}%;

views/scripts/accessibility.js

@@ -34,9 +34,10 @@ function createAccessibilityNodes() {
         id="acc-scale"
         type="number"
         style="width: 8ch"
-        min="8"
-        max="48"
-        value="16"
+        min="0"
+        max="10"
+        value="1"
+        step="0.1"
       />
     </label><br />
     <label for="acc-width">Page width:
@@ -151,10 +152,10 @@ let prevBase; // previous base, for reload check
 function initializeChanges(_, loading) {
   if (window.frameElement == null) createAccessibilityNodes();
 
-  let scale = window.localStorage.getItem("acc-scale");
+  let scale = window.localStorage.getItem("acc-scale-v2");
   if (scale == null) {
-    window.localStorage.setItem("acc-scale", 16);
-    scale = window.localStorage.getItem("acc-scale");
+    window.localStorage.setItem("acc-scale-v2", 1);
+    scale = window.localStorage.getItem("acc-scale-v2");
   }
   let width = window.localStorage.getItem("acc-width");
   if (width == null) {
@@ -212,7 +213,7 @@ function initializeChanges(_, loading) {
 }
 
 function changeScale(scale) {
-  document.documentElement.style.setProperty("--base-scale", scale + "px");
+  document.documentElement.style.setProperty("--base-scale", scale + "rem");
 }
 
 function changeWidth(width) {

views/styles/normal.css

@@ -35,8 +35,8 @@
 /* Document form */
 
 :root {
-  /* The defining em-size of the document, in anything but em. */
-  --base-scale: 16px;
+  /* The defining em-size of the document, in rem. */
+  --base-scale: 1rem;
   /* The width of the document, in em. */
   --document-width: 50em;