one list of roles, named for what they are

Fonts and Font Sizes are the same four things, so they now read in the same order
under the same names — Menu, Titles, Headings, Body — from one list.

font_display is the largest statements and font_title is a section heading, which
is the reverse of what the words suggest. The labels say what the reader sees.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/FontSizesTab.tsx

@@ -1,4 +1,5 @@
 import { useDevice } from '../DeviceToggle';
+import { ROLES } from './roles';
 
 /**
  * How big each role is, at the width being edited.
@@ -20,14 +21,6 @@ export type FontSizes = Partial<Record<'title' | 'body' | 'sub' | 'display', Par
 
 const BREAKPOINT = { desktop: 'lg', tablet: 'md', mobile: 'base' } as const;
 
-/** The order they are read in: biggest first, which is how a type scale is judged. */
-const ROLES = [
-  { key: 'display' as const, label: 'Display' },
-  { key: 'title' as const, label: 'Headings' },
-  { key: 'body' as const, label: 'Body' },
-  { key: 'sub' as const, label: 'Menu' },
-];
-
 const inherited = (
   steps: Partial<Record<'base' | 'md' | 'lg', string>> | undefined,
   key: 'base' | 'md' | 'lg',
@@ -69,16 +62,16 @@ export const FontSizesTab = ({
   return (
     <div className="grid grid-cols-2 gap-3">
       {ROLES.map((role) => {
-        const current = sizes[role.key];
+        const current = sizes[role.size];
         const own = current?.[key];
         const from = inherited(current, key);
 
         return (
-          <div key={role.key} className="flex flex-col gap-1">
+          <div key={role.size} className="flex flex-col gap-1">
             <label className="text-xs">{role.label}</label>
             <select
               value={own ?? ''}
-              onChange={(event) => set(role.key, event.currentTarget.value)}
+              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