diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx
index ae57f03..55a63cf 100644
--- a/web/sections/LayoutPanel.tsx
+++ b/web/sections/LayoutPanel.tsx
@@ -277,7 +277,7 @@ export const LayoutPanel = () => {
     setEditorRef.current(
       <Accordion type="multiple" defaultValue={[tab]} className="flex flex-col gap-2">
         <AccordionItem value="colours" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className="text-xs">Colours</AccordionTrigger>
+          <AccordionTrigger className="text-xs">Colors</AccordionTrigger>
           <AccordionContent>
       <>
           <div className="flex flex-wrap gap-4">
@@ -312,24 +312,24 @@ export const LayoutPanel = () => {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="typefaces" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className="text-xs">Typefaces</AccordionTrigger>
+          <AccordionTrigger className="text-xs">Fonts</AccordionTrigger>
           <AccordionContent>
       <>
           {/*
-            Four across, one row.
+            Two by two.
 
-            At `sm:` and not `lg:`. The breakpoint here is the BROWSER's, not the panel's — and this panel
-            is wide in every window anybody runs the admin in — but lg is 1024 and there was no reason to
-            make four short selects wait for it.
+            It was four across, to keep this section the same height as Colours — because they shared a
+            grid cell as tabs and a taller one moved everything below it. Stacked sections do not have
+            that constraint: each is as tall as it is, and nothing above it moves.
 
-            Two columns meant Typefaces was twice the height of Colours, so switching tabs moved
-            everything below it — and the preview above it changed size to match. A tab strip whose
-            contents jump is a tab strip that has to be re-read every time it is used.
+            What four across cost was the labels. In a panel this narrow they truncated to "Martia…" on
+            every select, so the row said four times that a font was chosen and never which. Two columns
+            give each one room to be read, which is the only thing this control is for.
 
             The hint moves into the option list's own space rather than a line under each select, which
             is where the second row of height was really going.
           */}
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <div className="grid grid-cols-2 gap-3">
             {ROLES.map(({ key, label, hint }) => (
               <div key={key} className="flex flex-col gap-1">
                 <label className="text-xs">{label}</label>