diff --git a/docs/umbraformat_specification_document.md b/docs/umbraformat_specification_document.md
index 18554fb..0ce395b 100644
--- a/docs/umbraformat_specification_document.md
+++ b/docs/umbraformat_specification_document.md
@@ -200,6 +200,7 @@ To support non-English target languages (e.g., Spanish, German, CJK, Arabic):
 [ Layout Transformer & Pagination Builder ]
   ├── Enforce Recto / Verso Page Assignments
   ├── Apply Margins, Gutters, and Bleed Settings
+  │     └── Resolve dynamic gutter to fixed point (render → page count → rebuild)
   ├── Build Running Headers & Suppressions
   └── Resolve Graphic Positions / Stripping Logic
          │
diff --git a/umbraformat/app.py b/umbraformat/app.py
index 7742cd2..db624cc 100644
--- a/umbraformat/app.py
+++ b/umbraformat/app.py
@@ -105,8 +105,11 @@ def api_format():
 
     # Extract formatting options
     font_name = data.get("font", "Caladea")
-    font_size = int(data.get("fontSize", 12))
-    inner_margin = float(data.get("innerMargin", 0.500))
+    # Body typography is fixed by the WA style family (spec 2.2: Caladea 11pt);
+    # font/fontSize are accepted for backward compatibility and only affect
+    # the invisible runs that host inline images.
+    font_size = int(data.get("fontSize", 11))
+    inner_margin = float(data.get("innerMargin", 0.500))  # ignored: dynamic gutter
     trim_size = data.get("trimSize", "5.5x8.5")
     bleed = float(data.get("bleed", 0.0))
     author = data.get("author", "")
diff --git a/umbraformat/static/js/main.js b/umbraformat/static/js/main.js
index 52d6462..ff7ff13 100644
--- a/umbraformat/static/js/main.js
+++ b/umbraformat/static/js/main.js
@@ -8,6 +8,8 @@ const WORDS_PER_PAGE = {
     "Palatino":  { 10: 355, 11: 298, 12: 258 }
 };
 
+// UmbraFormat spec gutter table (spec section 2.1) — the server resolves
+// this same table server-side; the UI only previews the expected value.
 const MARGIN_TABLES = {
     umbraformat: [
         { min: 0, max: 149, margin: 0.500 },
@@ -36,11 +38,10 @@ function getRecommendedMargin(pageCount, table) {
 function updateMarginRecommendation() {
     const recDiv = document.getElementById('marginRecommendation');
     const recSpan = document.getElementById('recommendedMargin');
-    const marginTable = document.getElementById('marginTableSelect');
 
     if (window._pageCount) {
-        const rec = getRecommendedMargin(window._pageCount, marginTable.value);
-        recSpan.textContent = `${rec} in for ${window._pageCount} pages (applied automatically)`;
+        const rec = getRecommendedMargin(window._pageCount, 'umbraformat');
+        recSpan.textContent = `${rec} in for ~${window._pageCount} pages (resolved exactly from the rendered page count)`;
         recDiv.classList.remove('d-none');
     }
 }
@@ -163,12 +164,12 @@ function showResults(data) {
 function updatePageEstimate() {
     if (!analysisData) return;
 
-    const font = document.getElementById("fontSelect").value;
-    const fontSize = parseInt(document.getElementById("fontSizeSelect").value);
+    // Body typography is fixed by the WA styles (Caladea 11pt, spec 2.2),
+    // so the estimate no longer depends on font selectors.
     const trimSize = document.getElementById("trimSelect").value;
     const wordCount = analysisData.chapter_word_count || 0;
 
-    const wpp = (WORDS_PER_PAGE[font] && WORDS_PER_PAGE[font][fontSize]) || 300;
+    const wpp = 300;
     const trimFactor = trimSize === "6x9" ? 1.35 : 1.0;
     const bodyPages = Math.ceil(wordCount / (wpp * trimFactor));
     const totalPages = bodyPages + 10;  // Add 10 for front/back matter
@@ -274,8 +275,6 @@ function doFormat() {
     document.getElementById("formatBtn").disabled = true;
     showLoading("Formatting document...");
 
-    const font = document.getElementById("fontSelect").value;
-    const fontSize = document.getElementById("fontSizeSelect").value;
     const trimSize = document.getElementById("trimSelect").value;
     const bleed = document.getElementById("bleedCheck").checked ? 0.125 : 0;
     const author = document.getElementById("authorInput").value.trim();
@@ -290,8 +289,6 @@ function doFormat() {
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
             upload_id: currentUploadId,
-            font: font,
-            fontSize: fontSize,
             trimSize: trimSize,
             bleed: bleed,
             author: author,
diff --git a/umbraformat/templates/format.html b/umbraformat/templates/format.html
index f8615f4..bb08fe2 100644
--- a/umbraformat/templates/format.html
+++ b/umbraformat/templates/format.html
@@ -42,24 +42,13 @@
                 </div>
                 <div class="card-body">
                     <div class="row">
-                        <div class="col-md-3">
-                            <label for="fontSelect" class="form-label">Paragraph Font</label>
-                            <select id="fontSelect" class="form-select">
-                                <option value="Caladea" selected>Caladea</option>
-                                <option value="Garamond">Garamond</option>
-                                <option value="Baskerville">Baskerville</option>
-                                <option value="Palatino">Palatino</option>
-                            </select>
+                        <div class="col-md-4">
+                            <label class="form-label">Body Typography</label>
+                            <div class="form-control bg-light text-secondary" aria-readonly="true">
+                                Caladea 11 pt, justified (WA styles, spec 2.2)
+                            </div>
                         </div>
-                        <div class="col-md-2">
-                            <label for="fontSizeSelect" class="form-label">Font Size</label>
-                            <select id="fontSizeSelect" class="form-select">
-                                <option value="10">10 pt</option>
-                                <option value="11">11 pt</option>
-                                <option value="12" selected>12 pt</option>
-                            </select>
-                        </div>
-                        <div class="col-md-3">
+                        <div class="col-md-4">
                             <label class="form-label">Inside / Gutter Margin</label>
                             <div class="form-control bg-light text-secondary" aria-readonly="true">
                                 Computed automatically from the final page count
@@ -80,11 +69,10 @@
                             </select>
                         </div>
                         <div class="col-md-3">
-                            <label for="marginTableSelect" class="form-label">Gutter Table</label>
-                            <select id="marginTableSelect" class="form-select">
-                                <option value="umbraformat" selected>UmbraFormat spec (0.50 – 0.75 in)</option>
-                                <option value="kdp">KDP guidance (0.375 – 0.875 in)</option>
-                            </select>
+                            <label class="form-label">Gutter Table</label>
+                            <div class="form-control bg-light text-secondary" aria-readonly="true">
+                                UmbraFormat spec (0.50 – 0.75 in, spec 2.1)
+                            </div>
                         </div>
                         <div class="col-md-6">
                             <label class="form-label d-block">&nbsp;</label>
@@ -252,9 +240,6 @@
 
 {% block scripts %}
 <script>
-    document.getElementById('fontSelect').addEventListener('change', updatePageEstimate);
-    document.getElementById('fontSizeSelect').addEventListener('change', updatePageEstimate);
     document.getElementById('trimSelect').addEventListener('change', updatePageEstimate);
-    document.getElementById('marginTableSelect').addEventListener('change', updateMarginRecommendation);
 </script>
 {% endblock %}