diff --git a/web/sections/FontSizesTab.tsx b/web/sections/FontSizesTab.tsx
index 2b6938e..e73827c 100644
--- a/web/sections/FontSizesTab.tsx
+++ b/web/sections/FontSizesTab.tsx
@@ -13,8 +13,16 @@ import { ROLES } from './roles';
  * ── One value per field ──
  *
  * The tabs at the top of the panel say which width. Unset inherits the smaller one, so "the same
- * everywhere" is one choice; the option names what it is inheriting rather than leaving it to be
- * worked out.
+ * everywhere" is one choice.
+ *
+ * ── The empty option NAMES the size ──
+ *
+ * It said "Inherit (default)", which answers a question nobody asked. What somebody wants from that
+ * dropdown is "what is it now", and a label that does not say makes them change the setting to find
+ * out — which is the one way to lose the answer.
+ *
+ * So it names the size that will actually apply: the nearest smaller width that has one, or the
+ * stylesheet's own, which the API reads out of styles.css rather than this file guessing.
  */
 
 export type FontSizes = Partial<Record<'title' | 'body' | 'sub' | 'display', Partial<Record<'base' | 'md' | 'lg', string>>>>;
@@ -36,11 +44,14 @@ const inherited = (
 export const FontSizesTab = ({
   sizes,
   steps,
+  defaults,
   onChange,
 }: {
   sizes: FontSizes;
   /** The scale, sent by the API so this file holds no copy of it. */
   steps: string[];
+  /** What each role is with nothing chosen, read from the site's stylesheet. */
+  defaults: Record<string, string>;
   onChange: (sizes: FontSizes) => void;
 }) => {
   const [device] = useDevice();
@@ -64,7 +75,8 @@ export const FontSizesTab = ({
       {ROLES.map((role) => {
         const current = sizes[role.size];
         const own = current?.[key];
-        const from = inherited(current, key);
+        // The nearest smaller width that has one, or the stylesheet's. Either way, a size to read.
+        const from = inherited(current, key) ?? defaults[role.size];
 
         return (
           <div key={role.size} className="flex flex-col gap-1">
@@ -74,10 +86,10 @@ export const FontSizesTab = ({
               onChange={(event) => set(role.size, event.currentTarget.value)}
               className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
             >
-              {/* Mobile is the smallest, so there is nothing below it to inherit from — and nothing
-                  chosen there means the stylesheet's own size. */}
+              {/* Mobile is the smallest, so nothing below it: what it falls back to is the
+                  stylesheet's own size rather than another breakpoint's. */}
               <option value="">
-                {key === 'base' ? 'Default' : from === null ? 'Inherit (default)' : `Inherit (${from})`}
+                {from ? `${key === 'base' ? 'Default' : 'Inherit'} (${from})` : 'Default'}
               </option>
               {steps.map((step) => (
                 <option key={step} value={step}>
diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index 78a792e..3157846 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -65,6 +65,8 @@ type Layout = {
   font_sizes: FontSizes;
   /** The type scale, sent by the API so this file holds no copy of it. */
   text_steps: string[];
+  /** What each role is with nothing chosen, read from the site's stylesheet. */
+  size_defaults: Record<string, string>;
   /** Each step's length, so the live preview can build the same CSS the site would. */
   text_sizes: Record<string, string>;
   /**
@@ -390,6 +392,7 @@ export const LayoutPanel = () => {
             <FontSizesTab
               sizes={draft.font_sizes}
               steps={draft.text_steps}
+              defaults={draft.size_defaults}
               onChange={(font_sizes) => patch({ font_sizes })}
             />
           </AccordionContent>