diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx
index a19b193f925..cfac63ad930 100644
--- a/packages/dev/s2-docs/src/ColorSearchView.tsx
+++ b/packages/dev/s2-docs/src/ColorSearchView.tsx
@@ -201,10 +201,11 @@ interface ColorSearchViewProps {
   /** Names of colors that exactly match the searched hex value. */
   exactMatches?: Set<string>,
   /** Names of the closest matching colors when no exact matches exist. */
-  closestMatches?: Set<string>
+  closestMatches?: Set<string>,
+  listBoxClassName?: string
 }
 
-export function ColorSearchView({filteredItems, exactMatches = new Set(), closestMatches = new Set()}: ColorSearchViewProps) {
+export function ColorSearchView({filteredItems, exactMatches = new Set(), closestMatches = new Set(), listBoxClassName}: ColorSearchViewProps) {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -261,7 +262,7 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
           }
         }}
         layout="grid"
-        className={style({
+        className={listBoxClassName || style({
           width: 'full',
           display: 'flex',
           flexDirection: 'column',
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index 4a226bfbd27..d76ced5f506 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -76,7 +76,7 @@ function IconListBox({items, copiedId, onAction, listBoxClassName}: IconListBoxP
         onAction={(item) => onAction(item.toString())}
         items={items}
         layout="grid"
-        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, overflow: 'auto'})}
+        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, padding: 8})}
         dependencies={[copiedId]}
         renderEmptyState={() => (
           <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 501f7d71a5e..89d51b997c7 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -17,6 +17,7 @@ import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
 import {type Library} from './constants';
 import React, {cloneElement, CSSProperties, ReactElement, ReactNode, Suspense, useContext, useEffect, useRef, useState} from 'react';
 import {SearchTagGroups} from './SearchTagGroups';
+import {TypographySearchView} from './TypographySearchView';
 import {useId} from '@react-aria/utils';
 import {useRouter} from './Router';
 
@@ -242,6 +243,7 @@ function MobileNav({initialTag}: {initialTag?: string}) {
 
   const filteredColors = useFilteredColors(searchValue);
   const isColorsSelected = selectedSection === 'colors';
+  const isTypographySelected = selectedSection === 'typography';
 
   let handleSearchFocus = () => {
     setSearchFocused(true);
@@ -311,7 +313,10 @@ function MobileNav({initialTag}: {initialTag?: string}) {
             const showIcons = isIconsSelected && library.id === 'react-spectrum';
             return (
               <MobileTabPanel key={library.id} id={library.id}>
-                <Autocomplete filter={showIcons ? iconFilter : undefined}>
+                <Autocomplete
+                  key={isTypographySelected ? 'typography' : 'default'}
+                  filter={showIcons ? iconFilter : undefined}
+                  disableVirtualFocus={isTypographySelected}>
                   <div className={stickySearchContainer}>
                     <SearchField
                       aria-label="Search"
@@ -359,10 +364,19 @@ function MobileNav({initialTag}: {initialTag?: string}) {
                         <LazyColorSearchView
                           filteredItems={filteredColors.sections}
                           exactMatches={filteredColors.exactMatches}
-                          closestMatches={filteredColors.closestMatches} />
+                          closestMatches={filteredColors.closestMatches}
+                          listBoxClassName={style({
+                            flexGrow: 1,
+                            overflow: 'auto',
+                            width: '100%',
+                            scrollPaddingY: 4
+                          })} />
                       </Suspense>
                     )}
-                    {!showIcons && (!isColorsSelected || library.id !== 'react-spectrum') && (
+                    {!showIcons && isTypographySelected && library.id === 'react-spectrum' && (
+                      <TypographySearchView searchValue={searchValue} />
+                    )}
+                    {!showIcons && !isColorsSelected && !isTypographySelected && (
                       <ComponentCardView
                         currentUrl={currentUrl}
                         onAction={key => {
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 7e5eb7964ae..a15c544881a 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -20,6 +20,7 @@ import {SearchTagGroups} from './SearchTagGroups';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from './Tabs';
 import {TextFieldRef} from '@react-types/textfield';
+import {TypographySearchView} from './TypographySearchView';
 import {useRouter} from './Router';
 import './SearchMenu.css';
 import {preloadComponentImages} from './ComponentCard';
@@ -160,7 +161,10 @@ export function SearchMenu(props: SearchMenuProps) {
           const placeholderText = getPlaceholderText(tab.label);
           return (
             <TabPanel key={tab.id} id={tab.id}>
-              <Autocomplete filter={isIconsSelected ? iconFilter : undefined}>
+              <Autocomplete
+                key={selectedTagId === 'typography' ? 'typography' : 'default'}
+                filter={isIconsSelected ? iconFilter : undefined}
+                disableVirtualFocus={selectedTagId === 'typography'}>
                 <div className={style({display: 'flex', flexDirection: 'column', height: 'full'})}>
                   <div className={style({flexShrink: 0, marginStart: 16, marginEnd: 64})}>
                     <SearchField
@@ -182,6 +186,8 @@ export function SearchMenu(props: SearchMenuProps) {
                       selectedTagId={selectedTagId}
                       onSectionSelectionChange={handleTagSelectionChange}
                       onResourceSelectionChange={handleTagSelectionChange}
+                      wrapperClassName={style({paddingTop: 16, flexShrink: 0, zIndex: 1})}
+                      contentClassName={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 16})}
                       onHover={tag => {
                         preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []);
                       }} />
@@ -198,11 +204,20 @@ export function SearchMenu(props: SearchMenuProps) {
                   {selectedTagId === 'colors' && (
                     <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
                       <Suspense fallback={<ColorSearchSkeleton />}>
-                        <LazyColorSearchView filteredItems={filteredColors.sections} exactMatches={filteredColors.exactMatches} closestMatches={filteredColors.closestMatches} />
+                        <LazyColorSearchView 
+                          filteredItems={filteredColors.sections} 
+                          exactMatches={filteredColors.exactMatches} 
+                          closestMatches={filteredColors.closestMatches}
+                          listBoxClassName={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})} />
                       </Suspense>
                     </div>
                   )}
-                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && (
+                  {selectedTagId === 'typography' && (
+                    <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
+                      <TypographySearchView searchValue={searchValue} />
+                    </div>
+                  )}
+                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && selectedTagId !== 'typography' && (
                     <ComponentCardView
                       key={selectedLibrary + selectedTagId}
                       currentUrl={currentUrl}
diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx
new file mode 100644
index 00000000000..6d3c964d3a2
--- /dev/null
+++ b/packages/dev/s2-docs/src/TypographySearchView.tsx
@@ -0,0 +1,371 @@
+'use client';
+
+import {ActionButton, Content, DialogTrigger, Heading, IllustratedMessage, Link, Popover, Text, ToggleButton, ToggleButtonGroup} from '@react-spectrum/s2';
+import {CopyButton} from './CopyButton';
+import {FieldInputContext, Header, Input, InputRenderProps, Key, ListBox, ListBoxItem, ListBoxSection, TextField} from 'react-aria-components';
+import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import InfoCircle from '@react-spectrum/s2/icons/InfoCircle';
+import {InfoMessage} from './colorSearchData';
+// eslint-disable-next-line monorepo/no-internal-import
+import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
+import React, {useMemo, useState} from 'react';
+
+const listBoxStyle = style({
+  width: 'full',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 24,
+  flexWrap: 'wrap',
+  alignItems: 'start'
+});
+
+const sectionStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4
+});
+
+const headerStyle = style({
+  font: 'heading-xs',
+  marginBottom: 4,
+  color: 'neutral-subdued',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4
+});
+
+const typographySections = [
+  {
+    id: 'heading',
+    name: 'Heading',
+    description: 'Use for headings in content pages',
+    items: ['heading-2xs', 'heading-xs', 'heading-sm', 'heading', 'heading-lg', 'heading-xl', 'heading-2xl', 'heading-3xl']
+  },
+  {
+    id: 'title',
+    name: 'Title',
+    description: 'Use for titles within UI components such as cards or panels',
+    items: ['title-xs', 'title-sm', 'title', 'title-lg', 'title-xl', 'title-2xl', 'title-3xl']
+  },
+  {
+    id: 'body',
+    name: 'Body',
+    description: 'Use for the content of pages that are primarily text',
+    items: ['body-2xs', 'body-xs', 'body-sm', 'body', 'body-lg', 'body-xl', 'body-2xl', 'body-3xl']
+  },
+  {
+    id: 'ui',
+    name: 'UI',
+    description: 'Use within interactive UI components',
+    items: ['ui-xs', 'ui-sm', 'ui', 'ui-lg', 'ui-xl', 'ui-2xl', 'ui-3xl']
+  },
+  {
+    id: 'detail',
+    name: 'Detail',
+    description: 'Use for less important metadata',
+    items: ['detail-sm', 'detail', 'detail-lg', 'detail-xl']
+  },
+  {
+    id: 'code',
+    name: 'Code',
+    description: 'Use for source code',
+    items: ['code-sm', 'code', 'code-lg', 'code-xl']
+  }
+];
+
+const htmlElements = [
+  {id: 'h1', name: '<h1>'},
+  {id: 'h2', name: '<h2>'},
+  {id: 'h3', name: '<h3>'},
+  {id: 'h4', name: '<h4>'},
+  {id: 'h5', name: '<h5>'},
+  {id: 'h6', name: '<h6>'},
+  {id: 'p', name: '<p>'},
+  {id: 'span', name: '<span>'},
+  {id: 'div', name: '<div>'},
+  {id: 'label', name: '<label>'},
+  {id: 'strong', name: '<strong>'},
+  {id: 'em', name: '<em>'}
+];
+
+const itemStyle = style({
+  ...focusRing(),
+  display: 'flex',
+  alignItems: 'center',
+  paddingX: 12,
+  paddingY: 8,
+  backgroundColor: {
+    default: 'gray-50',
+    isHovered: 'gray-100',
+    isFocused: 'gray-100',
+    isSelected: 'accent'
+  },
+  color: {
+    default: 'body',
+    isSelected: 'white'
+  },
+  borderRadius: 'lg',
+  transition: 'default',
+  cursor: 'default'
+});
+
+const fontStyles = {
+  // UI
+  'ui-xs': style({font: 'ui-xs', color: 'inherit'}),
+  'ui-sm': style({font: 'ui-sm', color: 'inherit'}),
+  'ui': style({font: 'ui', color: 'inherit'}),
+  'ui-lg': style({font: 'ui-lg', color: 'inherit'}),
+  'ui-xl': style({font: 'ui-xl', color: 'inherit'}),
+  'ui-2xl': style({font: 'ui-2xl', color: 'inherit'}),
+  'ui-3xl': style({font: 'ui-3xl', color: 'inherit'}),
+  // Body
+  'body-2xs': style({font: 'body-2xs', color: 'inherit'}),
+  'body-xs': style({font: 'body-xs', color: 'inherit'}),
+  'body-sm': style({font: 'body-sm', color: 'inherit'}),
+  'body': style({font: 'body', color: 'inherit'}),
+  'body-lg': style({font: 'body-lg', color: 'inherit'}),
+  'body-xl': style({font: 'body-xl', color: 'inherit'}),
+  'body-2xl': style({font: 'body-2xl', color: 'inherit'}),
+  'body-3xl': style({font: 'body-3xl', color: 'inherit'}),
+  // Heading
+  'heading-2xs': style({font: 'heading-2xs', color: 'inherit'}),
+  'heading-xs': style({font: 'heading-xs', color: 'inherit'}),
+  'heading-sm': style({font: 'heading-sm', color: 'inherit'}),
+  'heading': style({font: 'heading', color: 'inherit'}),
+  'heading-lg': style({font: 'heading-lg', color: 'inherit'}),
+  'heading-xl': style({font: 'heading-xl', color: 'inherit'}),
+  'heading-2xl': style({font: 'heading-2xl', color: 'inherit'}),
+  'heading-3xl': style({font: 'heading-3xl', color: 'inherit'}),
+  // Title
+  'title-xs': style({font: 'title-xs', color: 'inherit'}),
+  'title-sm': style({font: 'title-sm', color: 'inherit'}),
+  'title': style({font: 'title', color: 'inherit'}),
+  'title-lg': style({font: 'title-lg', color: 'inherit'}),
+  'title-xl': style({font: 'title-xl', color: 'inherit'}),
+  'title-2xl': style({font: 'title-2xl', color: 'inherit'}),
+  'title-3xl': style({font: 'title-3xl', color: 'inherit'}),
+  // Detail
+  'detail-sm': style({font: 'detail-sm', color: 'inherit'}),
+  'detail': style({font: 'detail', color: 'inherit'}),
+  'detail-lg': style({font: 'detail-lg', color: 'inherit'}),
+  'detail-xl': style({font: 'detail-xl', color: 'inherit'}),
+  // Code
+  'code-sm': style({font: 'code-sm', color: 'inherit'}),
+  'code': style({font: 'code', color: 'inherit'}),
+  'code-lg': style({font: 'code-lg', color: 'inherit'}),
+  'code-xl': style({font: 'code-xl', color: 'inherit'})
+} as const;
+
+// We hard-code these since the code is dynamic and we can't run our highlighter in the browser.
+const syntaxStyles = {
+  tag: style({color: 'red-1000'}),
+  attribute: style({color: 'indigo-1000'}),
+  string: style({color: 'green-1000'})
+};
+
+type FontStyleKey = keyof typeof fontStyles;
+
+const defaultPreviewInputStyle = style({
+  ...focusRing(),
+  backgroundColor: 'transparent',
+  borderStyle: 'hidden',
+  borderRadius: 'lg',
+  textAlign: 'center',
+  width: 'full'
+});
+
+interface TypographySearchViewProps {
+  searchValue?: string
+}
+
+export function TypographySearchView({searchValue = ''}: TypographySearchViewProps) {
+  const [selectedFont, setSelectedFont] = useState<string>('heading');
+  const [selectedElement, setSelectedElement] = useState<Key>('h1');
+  const [previewText, setPreviewText] = useState<string>('Sample Text');
+
+  const selectedElementTag = String(selectedElement || 'span');
+  const codeSnippet = `<${selectedElementTag} className={style({font: '${selectedFont}'})}>${previewText}</${selectedElementTag}>`;
+  const fontStyleClass = selectedFont in fontStyles ? fontStyles[selectedFont as FontStyleKey] : undefined;
+  const previewInputStyle = (renderProps: InputRenderProps) => `${defaultPreviewInputStyle(renderProps)} ${fontStyleClass || ''}`;
+
+  const sections = useMemo(() => {
+    const searchLower = searchValue.toLowerCase();
+    
+    return typographySections.map(section => ({
+      id: section.id,
+      name: section.name,
+      description: section.description,
+      items: section.items
+        .filter(name => name.toLowerCase().includes(searchLower))
+        .map(name => ({
+          id: `${section.id}-${name}`,
+          name
+        }))
+    })).filter(section => section.items.length > 0);
+  }, [searchValue]);
+
+  const handleSelectionChange = (keys: Set<Key>) => {
+    const selectedKey = Array.from(keys)[0];
+    if (selectedKey) {
+      // Extract font name from the key (format: "section-fontname")
+      const parts = String(selectedKey).split('-');
+      // Handle cases like "ui-2xl" or "heading-xl"
+      const fontName = parts.slice(1).join('-');
+      setSelectedFont(fontName);
+    }
+  };
+
+  const handleElementChange = (keys: Set<Key>) => {
+    const selectedKey = Array.from(keys)[0];
+    if (selectedKey) {
+      setSelectedElement(selectedKey);
+    }
+  };
+
+  // Find the currently selected key for the ListBox
+  const selectedKeys = useMemo(() => {
+    for (const section of sections) {
+      const item = section.items.find(item => item.name === selectedFont);
+      if (item) {
+        return new Set([item.id]);
+      }
+    }
+    return new Set<Key>();
+  }, [selectedFont, sections]);
+
+  return (
+    <>
+      <InfoMessage>Select a typography style and customize the sample text to preview its rendered output and code snippet. See <Link href="styling">styling</Link> for more information.</InfoMessage>
+      <div className={style({flexGrow: 1, overflow: 'auto', padding: 8})}>
+        <ListBox
+          aria-label="Typography styles"
+          selectionMode="single"
+          selectedKeys={selectedKeys}
+          onSelectionChange={handleSelectionChange as (keys: 'all' | Set<Key>) => void}
+          className={listBoxStyle}
+          items={sections}
+          renderEmptyState={() => (
+            <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
+              <NoSearchResults />
+              <Heading>No results</Heading>
+              <Content>Try a different search term.</Content>
+            </IllustratedMessage>
+          )}>
+          {section => (
+            <ListBoxSection id={section.id} className={sectionStyle}>
+              <Header className={headerStyle}>
+                {section.name}
+                <DialogTrigger>
+                  <ActionButton size="XS" isQuiet aria-label={`About ${section.name}`}><InfoCircle /></ActionButton>
+                  <Popover>
+                    <div className={style({padding: 8, maxWidth: 240})}>
+                      <span className={style({font: 'body'})}>{section.description}</span>
+                    </div>
+                  </Popover>
+                </DialogTrigger>
+              </Header>
+              {section.items.map(item => (
+                <ListBoxItem
+                  key={item.id}
+                  id={item.id}
+                  textValue={item.name}
+                  className={itemStyle}>
+                  <span className={item.name in fontStyles ? fontStyles[item.name as FontStyleKey] : undefined}>
+                    {item.name}
+                  </span>
+                </ListBoxItem>
+              ))}
+            </ListBoxSection>
+          )}
+        </ListBox>
+      </div>
+
+      <div className={style({flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 8, paddingX: 8, paddingBottom: 8})}>
+        <div className={style({overflowX: 'auto', overflowY: 'visible', width: 'full', paddingY: 8})}>
+          <ToggleButtonGroup
+            aria-label="Element type"
+            density="compact"
+            selectionMode="single"
+            disallowEmptySelection
+            selectedKeys={[selectedElement]}
+            onSelectionChange={handleElementChange as (keys: Set<Key>) => void}>
+            {htmlElements.map(option => (
+              <ToggleButton key={option.id} id={option.id}>
+                <Text>{option.name}</Text>
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </div>
+        
+        <div
+          className={style({
+            backgroundColor: 'layer-1',
+            borderRadius: 'lg',
+            padding: 16,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+            borderWidth: 1,
+            borderColor: 'gray-200',
+            borderStyle: 'solid'
+          })}>
+          <div
+            className={style({
+              backgroundColor: 'layer-2',
+              borderRadius: 'default',
+              padding: 16,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              minHeight: 80
+            })}>
+            <FieldInputContext.Provider value={null}>
+              <TextField aria-label="Editable preview text" value={previewText} onChange={setPreviewText} className={style({width: 'full'})}>
+                <Input className={previewInputStyle} />
+              </TextField>
+            </FieldInputContext.Provider>
+          </div>
+          
+          <div className={style({display: 'flex', flexDirection: 'column', gap: 12})}>
+            <div
+              className={style({
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                backgroundColor: 'gray-100',
+                borderRadius: 'default',
+                paddingX: 12,
+                paddingY: 8,
+                font: 'code-sm'
+              })}>
+              <code className={style({flexGrow: 1, overflow: 'auto', whiteSpace: 'nowrap'})}>
+                &lt;
+                <span className={syntaxStyles.tag}>{selectedElementTag}</span>
+                {' '}
+                <span className={syntaxStyles.attribute}>className</span>
+                =
+                {'{'}
+                <span className={syntaxStyles.tag}>style</span>
+                {'('}
+                {'{'}
+                <span className={syntaxStyles.attribute}>font</span>
+                :
+                {' '}
+                <span className={syntaxStyles.string}>'{selectedFont}'</span>
+                {'}'}
+                {')'}
+                {'}'}
+                &gt;
+                {previewText}
+                &lt;/
+                <span className={syntaxStyles.tag}>{selectedElementTag}</span>
+                &gt;
+              </code>
+              <CopyButton text={codeSnippet} tooltip="Copy code snippet" ariaLabel="Copy code snippet" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
index e8b5cd25ec1..da97af7e5da 100644
--- a/packages/dev/s2-docs/src/searchUtils.tsx
+++ b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -479,6 +479,7 @@ export function getResourceTags(library: Library): Tag[] {
     return [
       {id: 'icons', name: 'Icons'},
       {id: 'colors', name: 'Colors'},
+      {id: 'typography', name: 'Typography'},
       {id: 'v3', name: 'React Spectrum v3', href: getBaseUrl('s2') + '/v3/getting-started.html'}
     ];
   }
@@ -867,6 +868,9 @@ export function useSearchMenuState(options: SearchMenuStateOptions): SearchMenuS
     if (selectedTagId === 'colors') {
       return 'Search color names or hex values';
     }
+    if (selectedTagId === 'typography') {
+      return 'Search typography styles';
+    }
     return selectedResourceTag
       ? `Search ${selectedResourceTag.name}`
       : `Search ${libraryLabel}`;