diff --git a/.storybook-s2/docs/Icons.jsx b/.storybook-s2/docs/Icons.jsx
index d1c6dc7019f..f5b9893fbae 100644
--- a/.storybook-s2/docs/Icons.jsx
+++ b/.storybook-s2/docs/Icons.jsx
@@ -6,9 +6,9 @@ import {highlight} from './highlight' with {type: 'macro'};
 
 export function Icons() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', fontFamily: 'sans'})}>
+    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
-        <h1 className={style({fontSize: 'heading-2xl', color: 'heading', marginBottom: 48})}>
+        <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Workflow icons
         </h1>
         <P>Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These icons can be imported from <Code>@react-spectrum/s2/icons</Code>.</P>
diff --git a/.storybook-s2/docs/Intro.jsx b/.storybook-s2/docs/Intro.jsx
index 6e94c202e3f..959677ea13d 100644
--- a/.storybook-s2/docs/Intro.jsx
+++ b/.storybook-s2/docs/Intro.jsx
@@ -9,11 +9,11 @@ import CommunityIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Community_20_N.
 import DeviceTabletIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import DeviceDesktopIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import {highlight} from './highlight' with {type: 'macro'};
-import {H2, H3, H4, P, Pre, Code} from './typography';
+import {H2, H3, H4, P, Pre, Code, Strong} from './typography';
 
 export function Docs() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', marginY: 48, fontFamily: 'sans'})}>
+    <div className={style({maxWidth: 'lg', marginX: 'auto', marginY: 48})}>
       <header
         style={{
           backgroundImage: `url(${new URL('wallpaper_collaborative_S2_desktop.webp', import.meta.url).toString()})`,
@@ -25,12 +25,12 @@ export function Docs() {
           marginBottom: 48,
           borderRadius: 'xl'
         })}>
-        <h1 className={style({fontSize: 'heading-2xl', color: 'white'})}>
+        <h1 className={style({font: 'heading-2xl', color: 'white'})}>
           Spectrum 2 in React Spectrum
         </h1>
       </header>
       <main className={style({marginX: 48})}>
-        <P><strong>Introducing <Link href="https://s2.spectrum.adobe.com" target="_blank">Spectrum 2</Link></strong> – a new update to Adobe's design system, now in pre-release! Designed to support our growing suite of products, Spectrum 2 aims to work seamlessly across experiences by balancing personality and function.</P>
+        <P><Strong>Introducing <Link href="https://s2.spectrum.adobe.com" target="_blank">Spectrum 2</Link></Strong> – a new update to Adobe's design system, now in pre-release! Designed to support our growing suite of products, Spectrum 2 aims to work seamlessly across experiences by balancing personality and function.</P>
         <P>The React Spectrum team has been hard at work to bring the Spectrum 2 design to our components. Spectrum 2 in React Spectrum is built on <Link href="https://react-spectrum.adobe.com/react-aria/" target="_blank">React Aria Components</Link> and a new styling foundation powered by <Link href="https://github.com/adobe/spectrum-tokens" target="_blank">Spectrum Tokens</Link>. This gives you access to Spectrum design fundamentals such as colors, spacing, sizing, and typography in your own applications and custom components. Spectrum 2 also brings new features such as t-shirt sizing, improved form layout, dynamic new press interactions, and more.</P>
         <P>Check out the new Button design, with fresh new colors and icons, a fun new press scaling interaction, and support for t-shirt sizes.</P>
         <Example>
@@ -156,7 +156,7 @@ function App() {
         <Example>
           <Button variant="accent" onPress={() => alert('Hey there!')}>Hello Spectrum 2!</Button>
         </Example>
-        <P><strong>Note</strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
+        <P><Strong>Note</Strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
         <H3>Overriding the color scheme</H3>
         <P>By default, the page follows the user’s operating system color scheme setting, supporting both light and dark mode. The page background is set to the <Code>base</Code> Spectrum background layer by default. This can be configured by setting the <Code>data-color-scheme</Code> and <Code>data-background</Code> attributes on the <Code>{'<html>'}</Code> element. For example, to force the application to only render in light mode, set <Code>data-color-scheme="light"</Code>.</P>
         <Pre>{highlight(`<html data-color-scheme="light">
diff --git a/.storybook-s2/docs/StyleMacro.jsx b/.storybook-s2/docs/StyleMacro.jsx
index 31a3e33fc10..0a9c2115633 100644
--- a/.storybook-s2/docs/StyleMacro.jsx
+++ b/.storybook-s2/docs/StyleMacro.jsx
@@ -1,17 +1,17 @@
 import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
-import {Link, LinkButton} from '@react-spectrum/s2';
+import {Link} from '@react-spectrum/s2';
 import {highlight} from './highlight' with {type: 'macro'};
-import {H2, H3, H3, P, Pre, Code} from './typography';
+import {H2, H3, H3, P, Pre, Code, Strong} from './typography';
 
 export function StyleMacro() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', fontFamily: 'sans', fontSize: 'body-lg'})}>
+    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
       <header
         className={style({
           paddingX: 48,
           marginBottom: 48
         })}>
-        <h1 className={style({fontSize: 'heading-2xl', color: 'heading'})}>
+        <h1 className={style({font: 'heading-2xl'})}>
           Style Macro
         </h1>
       </header>
@@ -22,14 +22,14 @@ export function StyleMacro() {
 <div className={style({backgroundColor: 'red-400', color: 'white'})}>
   {/* ... */}
 </div>`)}</Pre>
-        <P><strong>Atomic CSS</strong> scales as your application grows because it outputs a separate rule for each CSS property you write, ensuring there is no duplication across your whole app. The above example generates two CSS rules:</P>
+        <P><Strong>Atomic CSS</Strong> scales as your application grows because it outputs a separate rule for each CSS property you write, ensuring there is no duplication across your whole app. The above example generates two CSS rules:</P>
         <Pre>{highlight(`.bJ { background-color: #ffbcb4 }
 .ac { color: #fff }`, 'CSS')}</Pre>
         <P>These rules are reused across your app wherever the same values are used, which keeps your bundle size small even as you add features. In addition, you only pay for the values you use – there’s no unnecessary CSS custom properties for colors and other tokens that aren’t used.</P>
-        <P>The <Code>style</Code> macro <strong>colocates</strong> your styles with your component code, rather than in separate CSS files. Colocation enables you to:</P>
+        <P>The <Code>style</Code> macro <Strong>colocates</Strong> your styles with your component code, rather than in separate CSS files. Colocation enables you to:</P>
         <ul className="sb-unstyled">
-          <li className={style({lineHeight: 'body', color: 'body', marginTop: 0, marginBottom: 8})}><strong>Develop more efficiently</strong> – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.</li>
-          <li className={style({lineHeight: 'body', color: 'body', marginY: 0})}><strong>Refactor with confidence</strong> – Changing the styles in a component is guaranteed to never unintentionally affect any other parts of your application. When you delete a component, the corresponding styles are also removed, reducing technical debt.</li>
+          <li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Strong>Develop more efficiently</Strong> – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.</li>
+          <li className={style({font: 'body-lg', marginY: 0})}><Strong>Refactor with confidence</Strong> – Changing the styles in a component is guaranteed to never unintentionally affect any other parts of your application. When you delete a component, the corresponding styles are also removed, reducing technical debt.</li>
         </ul>
         <H2>Values</H2>
         <P>The <Code>style</Code> macro supports a constrained set of values for each CSS property, which conform to the Spectrum design system. For example, the <Code>backgroundColor</Code> property supports Spectrum colors, and does not allow arbitrary hex or rgb values by default. This helps make it easier to build consistent UIs that are maintainable over time.</P>
@@ -60,6 +60,7 @@ export function StyleMacro() {
     }
   }
 });
+
 function MyComponent({variant}) {
   return <div className={styles({variant})} />
 }`)}</Pre>
@@ -70,9 +71,11 @@ function MyComponent({variant}) {
     isSelected: 'gray-900'
   }
 });
+
 <div className={styles({isSelected: true})} />`)}</Pre>
         <P>Runtime conditions also work well with the <Link href="https://react-spectrum.adobe.com/react-aria/styling.html#render-props" target="_blank">render props</Link> in React Aria Components. If you define your styles inline, you’ll even get autocomplete for all of the available conditions.</P>
         <Pre>{highlight(`import {Checkbox} from 'react-aria-components';
+
 <Checkbox
   className={style({
     backgroundColor: {
@@ -97,6 +100,7 @@ function MyComponent({variant}) {
     }
   }
 });
+
 <div className={styles({isSelected, isEmphasized, isDisabled})} />`)}</Pre>
         <P>The above example has three runtime conditions (<Code>isSelected</Code>, <Code>isEmphasized</Code>, and <Code>isDisabled</Code>), and uses the <Code>forcedColors</Code> condition to apply styles for <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors" target="_blank">Windows High Contrast Mode</Link> (WHCM). The order of precedence follows the order the conditions are defined in the object, with the <Code>isSelected</Code> + <Code>isDisabled</Code> + <Code>forcedColors</Code> state having the highest priority.</P>
         <H2>Reusing styles</H2>
@@ -106,6 +110,7 @@ function MyComponent({variant}) {
   alignItems: 'center',
   columnGap: 8
 };
+
 const styles = style({
   ...horizontalStack,
   columnGap: 4
@@ -122,6 +127,7 @@ export function horizontalStack(gap: number) {
         <P>Then, import your macro and use it in a component.</P>
         <Pre>{highlight(`// component.tsx
 import {horizontalStack} from './style-utils' with {type: 'macro'};
+
 const styles = style({
   ...horizontalStack(4),
   backgroundColor: 'base'
diff --git a/.storybook-s2/docs/typography.js b/.storybook-s2/docs/typography.js
index 8ec984c32e2..64e3f183764 100644
--- a/.storybook-s2/docs/typography.js
+++ b/.storybook-s2/docs/typography.js
@@ -3,30 +3,34 @@ import {Link} from '@react-spectrum/s2';
 
 export function H2({children}) {
   let id = anchorId(children);
-  return <h2 className={style({fontSize: 'heading-xl', lineHeight: 'heading', color: 'heading', marginTop: 48, marginBottom: 24})} id={id}>{children}</h2>
+  return <h2 className={style({font: 'heading-xl', marginTop: 48, marginBottom: 24})} id={id}>{children}</h2>
 }
 
 export function H3({children}) {
   let id = anchorId(children);
-  return <h3 className={style({fontSize: 'heading', lineHeight: 'heading', color: 'heading', marginTop: 32, marginBottom: 16})} id={anchorId(children)}>{children}</h3>
+  return <h3 className={style({font: 'heading', marginTop: 32, marginBottom: 16})} id={anchorId(children)}>{children}</h3>
 }
 
 export function H4({children}) {
   let id = anchorId(children);
-  return <h4 className={style({fontSize: 'heading-sm', lineHeight: 'heading', color: 'heading', marginTop: 32, marginBottom: 8})} id={anchorId(children)}>{children}</h4>
+  return <h4 className={style({font: 'heading-sm', marginTop: 32, marginBottom: 8})} id={anchorId(children)}>{children}</h4>
 }
 
 export function P({children}) {
-  return <p className={style({fontSize: 'body-lg', lineHeight: 'body', color: 'body', marginTop: 0, marginBottom: 24})}>{children}</p>
+  return <p className={style({font: 'body-lg', marginTop: 0, marginBottom: 24})}>{children}</p>
 }
 
 export function Code({children}) {
-  return <code className={style({fontFamily: 'code', fontSize: 'code-sm', backgroundColor: 'layer-1', paddingX: 4, borderWidth: 1, borderColor: 'gray-100', borderStyle: 'solid', borderRadius: 'sm'})}>{children}</code>;
+  return <code className={style({font: 'code-sm', backgroundColor: 'layer-1', paddingX: 4, borderWidth: 1, borderColor: 'gray-100', borderStyle: 'solid', borderRadius: 'sm'})}>{children}</code>;
+}
+
+export function Strong({children}) {
+  return <strong className={style({fontWeight: 'bold'})}>{children}</strong>;
 }
 
 export function Pre({children}) {
   return (
-    <pre className={'sb-unstyled ' + style({padding: 32, marginY: 32, backgroundColor: 'layer-1', borderRadius: 'xl', fontFamily: 'code', fontSize: 'code-sm', lineHeight: 'code'})}>
+    <pre className={'sb-unstyled ' + style({padding: 32, marginY: 32, backgroundColor: 'layer-1', borderRadius: 'xl', font: 'code-sm'})}>
       <code dangerouslySetInnerHTML={{__html: children}} />
     </pre>
   );
diff --git a/.storybook-s2/preview-head.html b/.storybook-s2/preview-head.html
index 3901b66fd7c..050321f834d 100644
--- a/.storybook-s2/preview-head.html
+++ b/.storybook-s2/preview-head.html
@@ -6,7 +6,7 @@
 <script>
 (function(d) {
   var config = {
-    kitId: 'uei1lip',
+    kitId: 'fqj0dxc',
     scriptTimeout: 3000,
     async: true
   },
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index e9468932e57..1d168660a2d 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -53,9 +53,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   alignItems: 'center',
   justifyContent: 'center',
   columnGap: 'text-to-visual',
-  fontFamily: 'sans',
+  font: 'control',
   fontWeight: 'medium',
-  fontSize: 'control',
   userSelect: 'none',
   height: 'control',
   minWidth: 'control',
diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index 1239a555750..9bd534811d0 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -45,8 +45,7 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
 
 const badge = style<BadgeStyleProps>({
   display: 'flex',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: 'control',
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index 62d06b7157c..44e96870c1f 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -146,8 +146,7 @@ const linkStyles = style({
     }
   },
   transition: 'default',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   fontWeight: {
     default: 'normal',
     isCurrent: 'bold'
@@ -166,53 +165,23 @@ const linkStyles = style({
     default: 'focus-ring',
     forcedColors: 'Highlight'
   },
-  disableTapHighlight: true,
-  marginTop: {
-    size: {
-      M: size(6), // component-top-to-text-100
-      L: size(9) // component-top-to-text-200
-    }
-  },
-  marginBottom: {
-    size: {
-      M: size(8), // component-bottom-to-text-100
-      L: size(11) // component-bottom-to-text-200
-    }
-  }
+  disableTapHighlight: true
 });
 
-const currentStyles = style({
+const currentStyles = style<{size: string}>({
   color: {
     default: 'neutral',
     forcedColors: 'ButtonText'
   },
   transition: 'default',
-  fontFamily: 'sans',
-  fontSize: 'control',
-  fontWeight: 'bold',
-  marginTop: {
-    default: {
-      size: {
-        M: size(6), // component-top-to-text-100
-        L: size(9) // component-top-to-text-200
-      }
-    }
-  },
-  marginBottom: {
-    default: {
-      size: {
-        M: size(9), // component-bottom-to-text-100
-        L: size(11) // component-bottom-to-text-200
-      }
-    }
-  }
+  font: 'control',
+  fontWeight: 'bold'
 });
 
 // TODO: support user heading size customization, for now just set it to large
 const heading = style({
   margin: 0,
-  fontFamily: 'sans',
-  fontSize: 'heading-lg',
+  font: 'heading-lg',
   fontWeight: 'extra-bold'
 });
 
@@ -234,7 +203,7 @@ export function Breadcrumb({children, ...props}: BreadcrumbProps) {
       className={breadcrumbStyles({size, isCurrent})} >
       {isCurrent ?
         <span
-          className={currentStyles({size, isCurrent})}>
+          className={currentStyles({size})}>
           <Provider
             values={[
               [HeadingContext, {className: heading}]
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index a03dd2f45ce..87118e06e8b 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -72,9 +72,8 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
   justifyContent: 'center',
   textAlign: 'start',
   columnGap: 'text-to-visual',
-  fontFamily: 'sans',
+  font: 'control',
   fontWeight: 'bold',
-  fontSize: 'control',
   userSelect: 'none',
   minHeight: 'control',
   minWidth: {
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 312296acbef..0b6820963c5 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -49,8 +49,7 @@ const wrapper = style({
   columnGap: 'text-to-control',
   alignItems: 'baseline',
   width: 'fit',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   transition: 'colors',
   color: {
     default: 'neutral',
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index 9633681adf9..b0b072350d3 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -80,9 +80,7 @@ function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
           <SliderOutput
             className={style({
               gridArea: 'output',
-              fontFamily: 'sans',
-              fontSize: 'control',
-              lineHeight: 'ui',
+              font: 'control',
               cursor: 'default',
               color: {
                 default: 'neutral-subdued',
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 2ea345eb91f..5c2b55daa58 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -105,23 +105,15 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
                 }
               }],
               [HeadingContext, {className: style({
-                fontSize: 'heading-xs',
-                fontWeight: 'heading',
-                lineHeight: 'heading',
-                color: 'heading',
+                font: 'heading-xs',
                 margin: 0,
                 marginBottom: styleSize(8) // This only makes it 10px on mobile and should be 12px
               })}],
               [ContentContext, {className: style({
-                fontSize: 'ui',
-                fontWeight: 'normal',
-                lineHeight: 'body',
-                color: 'body'
+                font: 'body-sm'
               })}],
               [FooterContext, {className: style({
-                fontSize: 'ui',
-                lineHeight: 'body',
-                color: 'body',
+                font: 'body-sm',
                 marginTop: 16
               })}]
             ]}>
diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
index 383ef00b7d4..a35fd4a47b5 100644
--- a/packages/@react-spectrum/s2/src/Dialog.tsx
+++ b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -45,15 +45,11 @@ const image = style({
 const heading = style({
   flexGrow: 1,
   marginY: 0,
-  fontSize: 'heading',
-  lineHeight: 'heading',
-  color: 'heading'
+  font: 'heading'
 });
 
 const header = style({
-  fontSize: 'body-lg',
-  color: 'body',
-  lineHeight: 'body'
+  font: 'body-lg'
 });
 
 const content =  style({
@@ -66,9 +62,7 @@ const content =  style({
       popover: 'visible'
     }
   },
-  fontSize: 'body',
-  lineHeight: 'body',
-  color: 'body',
+  font: 'body',
   // TODO: adjust margin on mobile?
   marginX: {
     default: 32
@@ -77,9 +71,7 @@ const content =  style({
 
 const footer = style({
   flexGrow: 1,
-  fontSize: 'body',
-  lineHeight: 'body',
-  color: 'body'
+  font: 'body'
 });
 
 const buttonGroup = style({
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index 2cf42bbdf77..55a668e7ad9 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -153,8 +153,7 @@ const fieldGroupStyles = style({
   height: 'control',
   boxSizing: 'border-box',
   paddingX: 'edge-to-text',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   borderRadius: 'control',
   borderWidth: 2,
   borderStyle: 'solid',
@@ -227,6 +226,7 @@ function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
         color: '[inherit]',
         fontFamily: '[inherit]',
         fontSize: '[inherit]',
+        fontWeight: '[inherit]',
         flexGrow: 1,
         flexShrink: 1,
         minWidth: 0,
@@ -253,10 +253,8 @@ const helpTextStyles = style({
   gridArea: 'helptext',
   display: 'flex',
   alignItems: 'baseline',
-  lineHeight: 'ui',
   gap: 'text-to-visual',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   color: {
     default: 'neutral-subdued',
     isInvalid: 'negative',
diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index af0ba090b01..de13a375d2e 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -120,12 +120,11 @@ const illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolea
 
 const heading = style<IllustratedMessageStyleProps>({
   gridArea: 'heading',
-  color: 'heading',
-  fontSize: {
+  font: {
     size: {
-      S: 'body',
-      M: 'body-xl',
-      L: 'body-2xl'
+      S: 'title',
+      M: 'title-xl',
+      L: 'title-2xl'
     }
   },
   alignSelf: 'end',
@@ -133,7 +132,13 @@ const heading = style<IllustratedMessageStyleProps>({
 });
 
 const content = style({
-  color: 'gray-800',
+  font: {
+    size: {
+      S: 'body-xs',
+      M: 'body-sm',
+      L: 'body-sm'
+    }
+  },
   gridArea: 'content',
   alignSelf: 'start'
 });
@@ -178,7 +183,7 @@ function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRe
       <Provider
         values={[
           [HeadingContext, {className: heading({orientation, size})}],
-          [ContentContext, {className: content}],
+          [ContentContext, {className: content({size})}],
           [IllustrationContext, {className: illustration({orientation, size, isInDropZone, isDropTarget})}],
           [ButtonGroupContext, {styles: buttonGroup}]
         ]}>
diff --git a/packages/@react-spectrum/s2/src/InlineAlert.tsx b/packages/@react-spectrum/s2/src/InlineAlert.tsx
index f3ba603c8d8..d1076515e1e 100644
--- a/packages/@react-spectrum/s2/src/InlineAlert.tsx
+++ b/packages/@react-spectrum/s2/src/InlineAlert.tsx
@@ -55,8 +55,6 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
   position: 'relative',
   boxSizing: 'border-box',
   maxWidth: 320,
-  fontSize: 'ui',
-  fontFamily: 'sans',
   padding: 24,
   borderRadius: 'lg',
   borderStyle: 'solid',
@@ -114,17 +112,6 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
         }
       }
     }
-  },
-  color: {
-    default: 'gray-900',
-    fillStyle: {
-      boldFill: {
-        default: 'white',
-        variant: {
-          notice: 'black'
-        }
-      }
-    }
   }
 }, getAllowedOverrides());
 
@@ -186,15 +173,34 @@ let ICONS = {
 const heading = style({
   marginTop: 0,
   gridArea: 'heading',
-  fontSize: 'ui',
-  lineHeight: 'ui',
-  color: '[inherit]'
+  font: 'title-sm',
+  color: {
+    default: 'title',
+    fillStyle: {
+      boldFill: {
+        default: 'white',
+        variant: {
+          notice: 'black'
+        }
+      }
+    }
+  }
 });
 
 const content = style({
   gridArea: 'content',
-  fontSize: 'body-sm',
-  lineHeight: 'body'
+  font: 'body-sm',
+  color: {
+    default: 'body',
+    fillStyle: {
+      boldFill: {
+        default: 'white',
+        variant: {
+          notice: 'black'
+        }
+      }
+    }
+  }
 });
 
 function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
@@ -241,8 +247,8 @@ function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
         className={grid}>
         <Provider
           values={[
-            [HeadingContext, {className: heading}],
-            [ContentContext, {className: content}],
+            [HeadingContext, {className: heading({fillStyle})}],
+            [ContentContext, {className: content({fillStyle})}],
             [IconContext, {styles: icon({variant, fillStyle})}]
           ]}>
           {Icon && <Icon aria-label={iconAlt} />}
diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx
index 268424dbd33..093a7c40c30 100644
--- a/packages/@react-spectrum/s2/src/Link.tsx
+++ b/packages/@react-spectrum/s2/src/Link.tsx
@@ -38,6 +38,9 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
 const link = style<LinkRenderProps & LinkStyleProps>({
   ...focusRing(),
   borderRadius: 'sm',
+  font: {
+    isStandalone: 'ui'
+  },
   color: {
     variant: {
       primary: 'accent',
@@ -50,15 +53,9 @@ const link = style<LinkRenderProps & LinkStyleProps>({
     forcedColors: 'LinkText'
   },
   transition: 'default',
-  fontFamily: {
-    isStandalone: 'sans'
-  },
   fontWeight: {
     isStandalone: 'medium'
   },
-  fontSize: {
-    isStandalone: 'ui'
-  },
   textDecoration: {
     default: 'underline',
     isStandalone: {
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 1cdca4e5264..fb8f1141a0f 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -122,6 +122,7 @@ export let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
 });
 
 export let sectionHeading = style({
+  font: 'ui',
   fontWeight: 'bold',
   margin: 0
 });
@@ -130,6 +131,7 @@ export let menuitem = style({
   ...focusRing(),
   boxSizing: 'border-box',
   borderRadius: 'control',
+  font: 'ui',
   '--labelPadding': {
     type: 'paddingTop',
     value: centerPadding()
@@ -237,6 +239,8 @@ let image = style({
 
 export let label = style({
   gridArea: 'label',
+  font: 'ui',
+  color: '[inherit]',
   fontWeight: 'medium',
   // TODO: token values for padding not defined yet, revisit
   marginTop: '--labelPadding'
@@ -244,16 +248,7 @@ export let label = style({
 
 export let description = style({
   gridArea: 'description',
-  fontFamily: 'sans',
-  color: {
-    default: 'neutral-subdued',
-    // Ideally this would use the same token as hover, but we don't have access to that here.
-    // TODO: should we always consider isHovered and isFocused to be the same thing?
-    isFocused: 'gray-800',
-    isDisabled: 'disabled'
-  },
-  transition: 'default',
-  fontSize: {
+  font: {
     default: 'ui-sm',
     size: {
       S: 'ui-xs',
@@ -261,7 +256,15 @@ export let description = style({
       L: 'ui',
       XL: 'ui-lg'
     }
-  }
+  },
+  color: {
+    default: 'neutral-subdued',
+    // Ideally this would use the same token as hover, but we don't have access to that here.
+    // TODO: should we always consider isHovered and isFocused to be the same thing?
+    isFocused: 'gray-800',
+    isDisabled: 'disabled'
+  },
+  transition: 'default'
 });
 
 let value = style({
@@ -272,6 +275,8 @@ let value = style({
 let keyboard = style({
   gridArea: 'keyboard',
   marginStart: 8,
+  font: 'ui',
+  fontWeight: 'light',
   color: {
     default: 'gray-600',
     isDisabled: 'disabled',
@@ -279,9 +284,7 @@ let keyboard = style({
       isDisabled: 'GrayText'
     }
   },
-  fontFamily: 'sans',
   background: 'gray-25',
-  fontWeight: 'light',
   unicodeBidi: 'plaintext'
 });
 
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index f03d503752d..3efa2db37d9 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -102,8 +102,7 @@ const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
   ...focusRing(),
   ...fieldInput(),
   position: 'relative',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   display: 'flex',
   textAlign: 'start',
   borderStyle: 'none',
@@ -174,6 +173,7 @@ const iconStyles = style({
 });
 
 let InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
+let InsideSelectValueContext = createContext(false);
 
 function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
@@ -266,7 +266,8 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                                   truncate: true
                                 })}
                               }
-                            }]
+                            }],
+                            [InsideSelectValueContext, true]
                           ]}>
                           {defaultChildren}
                         </Provider>
@@ -310,7 +311,12 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
               <Provider
                 values={[
                   [HeaderContext, {className: sectionHeader({size})}],
-                  [HeadingContext, {className: sectionHeading}]
+                  [HeadingContext, {className: sectionHeading}],
+                  [TextContext, {
+                    slots: {
+                      description: {className: description({size})}
+                    }
+                  }]
                 ]}>
                 <ListBox
                   items={items}
@@ -373,11 +379,10 @@ export function PickerItem(props: PickerItemProps) {
   );
 }
 
-// A Context.Provider that only sets a value if one is not already set higher in the tree.
-// This is so the slots can be overridden inside of SelectValue.
+// A Context.Provider that only sets a value if not inside SelectValue.
 function DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {
-  let cur = useContext(context);
-  if (Object.keys(cur).length) {
+  let inSelectValue = useContext(InsideSelectValueContext);
+  if (inSelectValue) {
     return children;
   }
 
diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
index 16160cad892..caf73718869 100644
--- a/packages/@react-spectrum/s2/src/Radio.tsx
+++ b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -52,8 +52,7 @@ const wrapper = style({
   display: 'flex',
   columnGap: 'text-to-control',
   alignItems: 'baseline',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   transition: 'colors',
   color: {
     default: 'neutral',
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index df2ae3c1129..3d8d473c441 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -65,8 +65,7 @@ export interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>,
 }
 
 const slider = style({
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   alignItems: {
     labelPosition: {
       side: 'center'
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index 333dd952348..7a985c24c05 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -50,8 +50,7 @@ const wrapper = style<StatusLightStyleProps>({
   gap: 'text-to-visual',
   alignItems: 'baseline',
   width: 'fit',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   color: {
     default: 'neutral',
     variant: {
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index 048b53f09aa..c956325244b 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -48,8 +48,7 @@ const wrapper = style({
   columnGap: 'text-to-control',
   alignItems: 'baseline',
   width: 'fit',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   transition: 'colors',
   color: {
     default: 'neutral',
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index fbcc4b9ddd1..5c6a8d3fbbe 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -68,10 +68,8 @@ const helpTextStyles = style({
   gridArea: 'helptext',
   display: 'flex',
   alignItems: 'baseline',
-  lineHeight: 'ui',
   gap: 'text-to-visual',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: 'control',
   color: {
     default: 'neutral-subdued',
     isInvalid: 'negative'
@@ -176,7 +174,7 @@ function TagGroup<T extends object>(
                 display: 'flex',
                 minWidth: 'full',
                 flexWrap: 'wrap',
-                fontFamily: 'sans'
+                font: 'ui'
               })({isEmpty})}>
               {children}
             </TagList>
@@ -197,9 +195,7 @@ const tagStyles = style({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
-  fontFamily: 'sans',
-  fontWeight: 'medium',
-  fontSize: 'control',
+  font: 'control',
   height: 'control',
   transition: 'default',
   minWidth: 0,
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 20f2a9c57bd..2c2df1704ad 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -197,7 +197,8 @@ function TextAreaInput() {
         color: '[inherit]',
         fontFamily: '[inherit]',
         fontSize: '[inherit]',
-        lineHeight: 'ui',
+        fontWeight: '[inherit]',
+        lineHeight: '[inherit]',
         flexGrow: 1,
         minWidth: 0,
         outlineStyle: 'none',
diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx
index c367075e8cd..103e5dd61e8 100644
--- a/packages/@react-spectrum/s2/src/Tooltip.tsx
+++ b/packages/@react-spectrum/s2/src/Tooltip.tsx
@@ -63,6 +63,7 @@ const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light da
   maxWidth: 160,
   minHeight: 24,
   boxSizing: 'border-box',
+  font: 'ui-sm',
   color: {
     default: 'gray-25',
     forcedColors: 'ButtonText'
@@ -78,9 +79,6 @@ const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light da
   },
   backgroundColor: 'neutral',
   borderRadius: 'control',
-  fontFamily: 'sans',
-  fontWeight: 'normal',
-  fontSize: 'ui-sm',
   paddingX: 'edge-to-text',
   paddingY: centerPadding(),
   margin: 8,
diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
index bd1bb4ba2f3..174ec2ca2ca 100644
--- a/packages/@react-spectrum/s2/src/style-utils.ts
+++ b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -88,9 +88,7 @@ export const field = () => ({
 } as const);
 
 export const fieldLabel = () => ({
-  fontFamily: 'sans',
-  fontSize: 'control',
-  lineHeight: 'ui',
+  font: 'control',
   cursor: 'default',
   color: {
     default: 'neutral-subdued',
diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
index b18b8e78684..4371f93c54f 100644
--- a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
@@ -113,19 +113,12 @@ export const Fonts: Story = {
     return (
       <div style={{display: 'grid', gridTemplateColumns: 'repeat(5, auto)', alignItems: 'center', justifyItems: 'start', gap: 8}}>
         <div lang="en-US" style={{display: 'contents'}}>
-          English (adobe-colin)
+          English (adobe-clean-vf)
           <ActionButton {...args}><NewIcon /><Text>{messages['en-US'].button}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['en-US'].copy}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['en-US'].cut}</Text></ActionButton>
           <ActionButton {...args}><NewIcon /><Text>{messages['en-US'].paste}</Text></ActionButton>
         </div>
-        <div lang="en-US" style={{display: 'contents'}}>
-          English (adobe-clean)
-          <ActionButton {...args} UNSAFE_style={{fontFamily: 'adobe-clean'}}><NewIcon /><Text>{messages['en-US'].button}</Text></ActionButton>
-          <ActionButton {...args} UNSAFE_style={{fontFamily: 'adobe-clean'}}><NewIcon /><Text>{messages['en-US'].copy}</Text></ActionButton>
-          <ActionButton {...args} UNSAFE_style={{fontFamily: 'adobe-clean'}}><NewIcon /><Text>{messages['en-US'].cut}</Text></ActionButton>
-          <ActionButton {...args} UNSAFE_style={{fontFamily: 'adobe-clean'}}><NewIcon /><Text>{messages['en-US'].paste}</Text></ActionButton>
-        </div>
         <div lang="ar-AR" dir="rtl" style={{display: 'contents'}}>
           Arabic (myriad-arabic)
           <ActionButton {...args}><NewIcon /><Text>{messages['ar-AR'].button}</Text></ActionButton>
diff --git a/packages/@react-spectrum/s2/stories/Divider.stories.tsx b/packages/@react-spectrum/s2/stories/Divider.stories.tsx
index 7ca6786d615..53890f6fbd0 100644
--- a/packages/@react-spectrum/s2/stories/Divider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Divider.stories.tsx
@@ -41,7 +41,7 @@ export const Example = {
             'vertical': 'row'
           }
         },
-        fontFamily: 'sans',
+        font: 'body',
         color: {
           staticColor: {
             default: 'gray-900',
diff --git a/packages/@react-spectrum/s2/stories/Link.stories.tsx b/packages/@react-spectrum/s2/stories/Link.stories.tsx
index feb9c2687ba..32a53b5b944 100644
--- a/packages/@react-spectrum/s2/stories/Link.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Link.stories.tsx
@@ -36,12 +36,11 @@ export default meta;
 export const Inline = (args: any) => (
   <p
     className={style({
+      font: 'body',
       color: {
         default: 'body',
         staticColor: {white: 'white', black: 'black'}
-      },
-      fontSize: 'body',
-      fontFamily: 'sans'
+      }
     })({staticColor: args.staticColor})}>
     Checkbox groups should use <Link {...args}>help text</Link> for error messaging and descriptions. Descriptions are valuable for giving context.
   </p>
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index 431db3b600f..d71cec5e31b 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -338,6 +338,65 @@ const i18nFonts = {
   ':lang(zh-Hans, zh-CN, zh-SG)': "adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif"
 } as const;
 
+const fontSize = {
+  // The default font size scale is for use within UI components.
+  'ui-xs': fontSizeToken('font-size-50'),
+  'ui-sm': fontSizeToken('font-size-75'),
+  ui: fontSizeToken('font-size-100'),
+  'ui-lg': fontSizeToken('font-size-200'),
+  'ui-xl': fontSizeToken('font-size-300'),
+  'ui-2xl': fontSizeToken('font-size-400'),
+  'ui-3xl': fontSizeToken('font-size-500'),
+
+  control: {
+    default: fontSizeToken('font-size-100'),
+    size: {
+      XS: fontSizeToken('font-size-50'),
+      S: fontSizeToken('font-size-75'),
+      L: fontSizeToken('font-size-200'),
+      XL: fontSizeToken('font-size-300')
+    }
+  },
+
+  'heading-2xs': fontSizeToken('heading-size-xxs'),
+  'heading-xs': fontSizeToken('heading-size-xs'),
+  'heading-sm': fontSizeToken('heading-size-s'),
+  heading: fontSizeToken('heading-size-m'),
+  'heading-lg': fontSizeToken('heading-size-l'),
+  'heading-xl': fontSizeToken('heading-size-xl'),
+  'heading-2xl': fontSizeToken('heading-size-xxl'),
+  'heading-3xl': fontSizeToken('heading-size-xxxl'),
+
+  'title-xs': fontSizeToken('title-size-xs'),
+  'title-sm': fontSizeToken('title-size-s'),
+  title: fontSizeToken('title-size-m'),
+  'title-lg': fontSizeToken('title-size-l'),
+  'title-xl': fontSizeToken('title-size-xl'),
+  'title-2xl': fontSizeToken('title-size-xxl'),
+  'title-3xl': fontSizeToken('title-size-xxxl'),
+
+  // Body is for large blocks of text, e.g. paragraphs, not in UI components.
+  'body-2xs': fontSizeToken('font-size-50'), // TODO: seems like there is no token for this
+  'body-xs': fontSizeToken('body-size-xs'),
+  'body-sm': fontSizeToken('body-size-s'),
+  body: fontSizeToken('body-size-m'),
+  'body-lg': fontSizeToken('body-size-l'),
+  'body-xl': fontSizeToken('body-size-xl'),
+  'body-2xl': fontSizeToken('body-size-xxl'),
+  'body-3xl': fontSizeToken('body-size-xxxl'),
+
+  'detail-sm': fontSizeToken('detail-size-s'),
+  detail: fontSizeToken('detail-size-m'),
+  'detail-lg': fontSizeToken('detail-size-l'),
+  'detail-xl': fontSizeToken('detail-size-xl'),
+
+  'code-xs': fontSizeToken('code-size-xs'),
+  'code-sm': fontSizeToken('code-size-s'),
+  code: fontSizeToken('code-size-m'),
+  'code-lg': fontSizeToken('code-size-l'),
+  'code-xl': fontSizeToken('code-size-xl')
+} as const;
+
 export const style = createTheme({
   properties: {
     // colors
@@ -375,6 +434,7 @@ export const style = createTheme({
         // forcedColors: 'GrayText'
       },
       heading: colorToken('heading-color'),
+      title: colorToken('title-color'),
       body: colorToken('body-color'),
       detail: colorToken('detail-color'),
       code: colorToken('code-color')
@@ -590,7 +650,7 @@ export const style = createTheme({
     // text
     fontFamily: {
       sans: {
-        default: 'Adobe Colin VF, adobe-clean, ui-sans-serif, system-ui, sans-serif',
+        default: 'adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif',
         ...i18nFonts
       },
       serif: {
@@ -599,65 +659,33 @@ export const style = createTheme({
       },
       code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
     },
-    fontSize: {
-      // The default font size scale is for use within UI components.
-      'ui-xs': fontSizeToken('font-size-50'),
-      'ui-sm': fontSizeToken('font-size-75'),
-      ui: fontSizeToken('font-size-100'),
-      'ui-lg': fontSizeToken('font-size-200'),
-      'ui-xl': fontSizeToken('font-size-300'),
-      'ui-2xl': fontSizeToken('font-size-400'),
-      'ui-3xl': fontSizeToken('font-size-500'),
-
-      control: {
-        default: fontSizeToken('font-size-100'),
-        size: {
-          XS: fontSizeToken('font-size-50'),
-          S: fontSizeToken('font-size-75'),
-          L: fontSizeToken('font-size-200'),
-          XL: fontSizeToken('font-size-300')
-        }
-      },
+    fontSize,
+    fontWeight: createMappedProperty((value, property) => {
+      if (property === 'fontWeight') {
+        return {
+          // Set font-variation-settings in addition to font-weight to work around typekit issue.
+          fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
+          fontWeight: value as any,
+          fontSynthesisWeight: 'none'
+        };
+      }
 
-      'heading-xs': fontSizeToken('heading-size-xs'),
-      'heading-sm': fontSizeToken('heading-size-s'),
-      heading: fontSizeToken('heading-size-m'),
-      'heading-lg': fontSizeToken('heading-size-l'),
-      'heading-xl': fontSizeToken('heading-size-xl'),
-      'heading-2xl': fontSizeToken('heading-size-xxl'),
-      'heading-3xl': fontSizeToken('heading-size-xxxl'),
-
-      // Body is for large blocks of text, e.g. paragraphs, not in UI components.
-      'body-xs': fontSizeToken('body-size-xs'),
-      'body-sm': fontSizeToken('body-size-s'),
-      body: fontSizeToken('body-size-m'),
-      'body-lg': fontSizeToken('body-size-l'),
-      'body-xl': fontSizeToken('body-size-xl'),
-      'body-2xl': fontSizeToken('body-size-xxl'),
-      'body-3xl': fontSizeToken('body-size-xxxl'),
-
-      'detail-sm': fontSizeToken('detail-size-s'),
-      detail: fontSizeToken('detail-size-m'),
-      'detail-lg': fontSizeToken('detail-size-l'),
-      'detail-xl': fontSizeToken('detail-size-xl'),
-
-      'code-xs': fontSizeToken('code-size-xs'),
-      'code-sm': fontSizeToken('code-size-s'),
-      code: fontSizeToken('code-size-m'),
-      'code-lg': fontSizeToken('code-size-l'),
-      'code-xl': fontSizeToken('code-size-xl')
-    },
-    fontWeight: {
+      return {[property]: value};
+    }, {
       ...fontWeightBase,
       heading: {
         default: fontWeightBase[getToken('heading-sans-serif-font-weight') as keyof typeof fontWeightBase],
         ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('heading-cjk-font-weight') as keyof typeof fontWeightBase]
       },
+      title: {
+        default: fontWeightBase[getToken('title-sans-serif-font-weight') as keyof typeof fontWeightBase],
+        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('title-cjk-font-weight') as keyof typeof fontWeightBase]
+      },
       detail: {
         default: fontWeightBase[getToken('detail-sans-serif-font-weight') as keyof typeof fontWeightBase],
         ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('detail-cjk-font-weight') as keyof typeof fontWeightBase]
       }
-    },
+    }),
     lineHeight: {
       // See https://spectrum.corp.adobe.com/page/typography/#Line-height
       ui: {
@@ -668,6 +696,10 @@ export const style = createTheme({
         default: getToken('heading-line-height'),
         ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('heading-cjk-line-height')
       },
+      title: {
+        default: getToken('title-line-height'),
+        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('title-cjk-line-height')
+      },
       body: {
         default: getToken('body-line-height'),
         ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('body-cjk-line-height')
@@ -888,7 +920,20 @@ export const style = createTheme({
       overflowY: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap'
-    })
+    }),
+    font: (value: keyof typeof fontSize) => {
+      let type = value.split('-')[0];
+      if (type === 'control') {
+        type = 'ui';
+      }
+      return {
+        fontFamily: type === 'code' ? 'code' : 'sans',
+        fontSize: value,
+        fontWeight: type === 'heading' || type === 'title' || type === 'detail' ? type : 'normal',
+        lineHeight: type,
+        color: type === 'ui' ? 'body' : type
+      };
+    }
   },
   conditions: {
     forcedColors: '@media (forced-colors: active)',
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index fcb06e11c49..988c50c881d 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Condition, CSSProperties, CSSValue, CustomValue, PropertyFunction, PropertyValueDefinition, PropertyValueMap, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
+import type {Condition, CSSProperties, CSSValue, CustomValue, PropertyFunction, PropertyValueDefinition, PropertyValueMap, RenderProps, ShorthandProperty, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
 
 let defaultArbitraryProperty = <T extends Value>(value: T, property: string) => ({[property]: value} as CSSProperties);
 export function createArbitraryProperty<T extends Value>(fn: (value: T, property: string) => CSSProperties = defaultArbitraryProperty): PropertyFunction<T> {
@@ -76,6 +76,22 @@ function mapConditionalValue<T, U>(value: PropertyValueDefinition<T>, fn: (value
   }
 }
 
+function mapConditionalShorthand<T, C extends string, R extends RenderProps<string>>(value: PropertyValueDefinition<T>, fn: ShorthandProperty<T>): {[property: string]: StyleValue<Value, C, R>} {
+  if (typeof value === 'object') {
+    let res = {};
+    for (let condition in value) {
+      let properties = mapConditionalShorthand(value[condition], fn);
+      for (let property in properties) {
+        res[property] ??= {};
+        res[property][condition] = properties[property];
+      }
+    }
+    return res;
+  } else {
+    return fn(value);
+  }
+}
+
 function createValueLookup(values: Array<CSSValue>, atStart = false) {
   let map = new Map<CSSValue, string>();
   for (let value of values) {
@@ -147,7 +163,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       if (theme.shorthands[key]) {
         let shorthand = theme.shorthands[key];
         if (typeof shorthand === 'function') {
-          let expanded = shorthand(value);
+          let expanded = mapConditionalShorthand(value, shorthand);
           for (let k in expanded) {
             let v = expanded[k];
             values.set(k, v);