Rework all typography

src/view/com/composer/Autocomplete.tsx

@@ -50,9 +50,9 @@ export function Autocomplete({
           key={i}
           style={[pal.border, styles.item]}
           onPress={() => onSelect(item.handle)}>
-          <Text style={pal.text}>
+          <Text type="md-medium" style={pal.text}>
             {item.displayName || item.handle}
-            <Text type="body2" style={pal.textLight}>
+            <Text type="sm" style={pal.textLight}>
               &nbsp;@{item.handle}
             </Text>
           </Text>

src/view/com/composer/ComposePost.tsx

@@ -243,12 +243,12 @@ export const ComposePost = observer(function ComposePost({
               />
               <View style={styles.replyToPost}>
                 <TextLink
-                  type="h5"
+                  type="xl-medium"
                   href={`/profile/${replyTo.author.handle}`}
                   text={replyTo.author.displayName || replyTo.author.handle}
                   style={[pal.text]}
                 />
-                <Text style={pal.text} numberOfLines={6}>
+                <Text type="post-text" style={pal.text} numberOfLines={6}>
                   {replyTo.text}
                 </Text>
               </View>
@@ -408,9 +408,12 @@ const styles = StyleSheet.create({
   textInput: {
     flex: 1,
     padding: 5,
-    fontSize: 18,
     marginLeft: 8,
     alignSelf: 'flex-start',
+    fontSize: 18,
+    letterSpacing: 0.2,
+    fontWeight: '400',
+    lineHeight: 23.4, // 1.3*16
   },
   replyToLayout: {
     flexDirection: 'row',

src/view/com/composer/Prompt.tsx

@@ -26,7 +26,7 @@ export function ComposePrompt({
       ]}
       onPress={onPressCompose}>
       <View style={styles.textContainer}>
-        <Text type="h5" style={[pal.textLight, {fontWeight: 'normal'}]}>
+        <Text type="lg" style={[pal.textLight]}>
           {text}
         </Text>
       </View>

src/view/com/discover/SuggestedFollows.tsx

@@ -160,7 +160,7 @@ const User = ({
           />
         </View>
         <View style={styles.actorContent}>
-          <Text type="h5" style={pal.text} numberOfLines={1}>
+          <Text type="title-sm" style={pal.text} numberOfLines={1}>
             {item.displayName || item.handle}
           </Text>
           <Text style={pal.textLight} numberOfLines={1}>

src/view/com/post-thread/PostThreadItem.tsx

@@ -130,17 +130,19 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
             <View style={styles.layoutContent}>
               <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
-                <Link
+                <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
-                  style={styles.metaItem}
+                  <Link
-                  href={authorHref}
+                    style={styles.metaItem}
-                  title={authorTitle}>
+                    href={authorHref}
-                  <Text type="h5" style={[pal.text]} numberOfLines={1}>
+                    title={authorTitle}>
-                    {item.post.author.displayName || item.post.author.handle}
+                    <Text type="xl-bold" style={[pal.text]} numberOfLines={1}>
+                      {item.post.author.displayName || item.post.author.handle}
+                    </Text>
+                  </Link>
+                  <Text type="md" style={[styles.metaItem, pal.textLight]}>
+                    &middot; {ago(item.post.indexedAt)}
                   </Text>
-                </Link>
+                </View>
-                <Text type="h6" style={[styles.metaItem, pal.textLight]}>
-                  &middot; {ago(item.post.indexedAt)}
-                </Text>
                 <View style={s.flex1} />
                 <PostDropdownBtn
                   style={styles.metaItem}
@@ -161,7 +163,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.metaItem}
                   href={authorHref}
                   title={authorTitle}>
-                  <Text type="h6" style={[pal.textLight]} numberOfLines={1}>
+                  <Text type="md" style={[pal.textLight]} numberOfLines={1}>
                     @{item.post.author.handle}
                   </Text>
                 </Link>
@@ -176,9 +178,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   styles.postTextLargeContainer,
                 ]}>
                 <RichText
-                  type="h3"
+                  type="post-text-lg"
                   text={record.text}
                   entities={record.entities}
+                  lineHeight={1.3}
                 />
               </View>
             ) : undefined}
@@ -190,8 +193,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.expandedInfoItem}
                     href={repostsHref}
                     title={repostsTitle}>
-                    <Text type="h6" style={pal.textLight}>
+                    <Text type="lg" style={pal.textLight}>
-                      <Text type="h5" style={pal.text}>
+                      <Text type="xl-bold" style={pal.text}>
                         {item.post.repostCount}
                       </Text>{' '}
                       {pluralize(item.post.repostCount, 'repost')}
@@ -205,8 +208,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.expandedInfoItem}
                     href={upvotesHref}
                     title={upvotesTitle}>
-                    <Text type="h6" style={pal.textLight}>
+                    <Text type="lg" style={pal.textLight}>
-                      <Text type="h5" style={pal.text}>
+                      <Text type="xl-bold" style={pal.text}>
                         {item.post.upvoteCount}
                       </Text>{' '}
                       {pluralize(item.post.upvoteCount, 'like')}
@@ -289,14 +292,16 @@ export const PostThreadItem = observer(function PostThreadItem({
               {item.post.author.viewer?.muted ? (
                 <View style={[styles.mutedWarning, pal.btn]}>
                   <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-                  <Text type="body2">This post is by a muted account.</Text>
+                  <Text type="sm">This post is by a muted account.</Text>
                 </View>
               ) : record.text ? (
                 <View style={styles.postTextContainer}>
                   <RichText
+                    type="post-text"
                     text={record.text}
                     entities={record.entities}
                     style={pal.text}
+                    lineHeight={1.3}
                   />
                 </View>
               ) : (
@@ -394,6 +399,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 8,
+    paddingRight: 20,
     minHeight: 36,
   },
   postTextLargeContainer: {

src/view/com/post/Post.tsx

@@ -20,7 +20,6 @@ import {Text} from '../util/text/Text'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
-import {ErrorMessage} from '../util/error/ErrorMessage'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {usePalette} from '../../lib/hooks/usePalette'
@@ -166,12 +165,12 @@ export const Post = observer(function Post({
                 size={9}
                 style={[pal.textLight, s.mr5]}
               />
-              <Text type="body2" style={[pal.textLight, s.mr2]}>
+              <Text type="sm" style={[pal.textLight, s.mr2]}>
                 Reply to
               </Text>
               <Link href={replyHref} title="Parent post">
                 <UserInfoText
-                  type="body2"
+                  type="sm"
                   did={replyAuthorDid}
                   attr="displayName"
                   style={[pal.textLight]}
@@ -182,11 +181,16 @@ export const Post = observer(function Post({
           {item.post.author.viewer?.muted ? (
             <View style={[styles.mutedWarning, pal.btn]}>
               <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-              <Text type="body2">This post is by a muted account.</Text>
+              <Text type="sm">This post is by a muted account.</Text>
             </View>
           ) : record.text ? (
             <View style={styles.postTextContainer}>
-              <RichText text={record.text} entities={record.entities} />
+              <RichText
+                type="post-text"
+                text={record.text}
+                entities={record.entities}
+                lineHeight={1.3}
+              />
             </View>
           ) : (
             <View style={{height: 5}} />

src/view/com/posts/FeedItem.tsx

@@ -15,7 +15,7 @@ import {PostEmbeds} from '../util/PostEmbeds'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s} from '../../lib/styles'
 import {useStores} from '../../../state'
 import {useTheme} from '../../lib/ThemeContext'
 import {usePalette} from '../../lib/hooks/usePalette'
@@ -30,7 +30,6 @@ export const FeedItem = observer(function ({
   ignoreMuteFor?: string
 }) {
   const store = useStores()
-  const theme = useTheme()
   const pal = usePalette('default')
   const [deleted, setDeleted] = useState(false)
   const record = item.postRecord
@@ -144,12 +143,7 @@ export const FeedItem = observer(function ({
               icon="retweet"
               style={[styles.includeReasonIcon, {color: pal.colors.textLight}]}
             />
-            <Text
+            <Text type="sm-bold" style={pal.textLight}>
-              type="body2"
-              style={{
-                fontWeight: '600',
-                color: pal.colors.textLight,
-              }}>
               Reposted by{' '}
               {item.reasonRepost.by.displayName || item.reasonRepost.by.handle}
             </Text>
@@ -180,15 +174,15 @@ export const FeedItem = observer(function ({
                   size={9}
                   style={[{color: pal.colors.textLight}, s.mr5]}
                 />
-                <Text type="body2" style={[pal.textLight, s.mr2]}>
+                <Text type="md" style={[pal.textLight, s.mr2]}>
                   Reply to
                 </Text>
                 <Link href={replyHref} title="Parent post">
                   <UserInfoText
-                    type="body2"
+                    type="md"
                     did={replyAuthorDid}
                     attr="displayName"
-                    style={[pal.textLight]}
+                    style={[pal.textLight, s.ml2]}
                   />
                 </Link>
               </View>
@@ -197,14 +191,15 @@ export const FeedItem = observer(function ({
             ignoreMuteFor !== item.post.author.did ? (
               <View style={[styles.mutedWarning, pal.btn]}>
                 <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-                <Text type="body2">This post is by a muted account.</Text>
+                <Text type="sm">This post is by a muted account.</Text>
               </View>
             ) : record.text ? (
               <View style={styles.postTextContainer}>
                 <RichText
-                  type="body1"
+                  type="post-text"
                   text={record.text}
                   entities={record.entities}
+                  lineHeight={1.3}
                 />
               </View>
             ) : (
@@ -251,7 +246,7 @@ export const FeedItem = observer(function ({
               <Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} />
             </Svg>
           </View>
-          <Text style={[pal.link, theme.typography.body2]}>
+          <Text type="md" style={pal.link}>
             View full thread
           </Text>
         </Link>
@@ -322,6 +317,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 4,
+    paddingRight: 20,
   },
   embed: {
     marginBottom: 6,

src/view/com/profile/ProfileCard.tsx

@@ -39,7 +39,7 @@ export function ProfileCard({
           <Text style={[s.bold, pal.text]} numberOfLines={1}>
             {displayName || handle}
           </Text>
-          <Text type="body2" style={[pal.textLight]} numberOfLines={1}>
+          <Text type="sm" style={[pal.textLight]} numberOfLines={1}>
             @{handle}
           </Text>
         </View>

src/view/com/profile/ProfileFollowers.tsx

@@ -99,7 +99,7 @@ const User = ({item}: {item: FollowerItem}) => {
           <Text style={[s.bold, pal.text]}>
             {item.displayName || item.handle}
           </Text>
-          <Text type="body2" style={[pal.textLight]}>
+          <Text type="sm" style={[pal.textLight]}>
             @{item.handle}
           </Text>
         </View>

src/view/com/profile/ProfileFollows.tsx

@@ -99,7 +99,7 @@ const User = ({item}: {item: FollowItem}) => {
           <Text style={[s.bold, pal.text]}>
             {item.displayName || item.handle}
           </Text>
-          <Text type="body2" style={pal.textLight}>
+          <Text type="sm" style={pal.textLight}>
             @{item.handle}
           </Text>
         </View>

src/view/com/profile/ProfileHeader.tsx

@@ -108,7 +108,7 @@ export const ProfileHeader = observer(function ProfileHeader({
             />
           </View>
           <View style={styles.displayNameLine}>
-            <Text type="h2" style={[pal.text, {lineHeight: 38}]}>
+            <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
               {view.displayName || view.handle}
             </Text>
           </View>
@@ -200,7 +200,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           ) : undefined}
         </View>
         <View style={styles.displayNameLine}>
-          <Text type="h2" style={[pal.text, {lineHeight: 38}]}>
+          <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
             {view.displayName || view.handle}
           </Text>
         </View>
@@ -212,10 +212,10 @@ export const ProfileHeader = observer(function ProfileHeader({
             testID="profileHeaderFollowersButton"
             style={[s.flexRow, s.mr10]}
             onPress={onPressFollowers}>
-            <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
+            <Text type="md" style={[s.bold, s.mr2, pal.text]}>
               {view.followersCount}
             </Text>
-            <Text type="body2" style={[pal.textLight]}>
+            <Text type="md" style={[pal.textLight]}>
               {pluralize(view.followersCount, 'follower')}
             </Text>
           </TouchableOpacity>
@@ -224,19 +224,19 @@ export const ProfileHeader = observer(function ProfileHeader({
               testID="profileHeaderFollowsButton"
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
-              <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
+              <Text type="md" style={[s.bold, s.mr2, pal.text]}>
                 {view.followsCount}
               </Text>
-              <Text type="body2" style={[pal.textLight]}>
+              <Text type="md" style={[pal.textLight]}>
                 following
               </Text>
             </TouchableOpacity>
           ) : undefined}
           <View style={[s.flexRow, s.mr10]}>
-            <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
+            <Text type="md" style={[s.bold, s.mr2, pal.text]}>
               {view.postsCount}
             </Text>
-            <Text type="body2" style={[pal.textLight]}>
+            <Text type="md" style={[pal.textLight]}>
               {pluralize(view.postsCount, 'post')}
             </Text>
           </View>
@@ -255,7 +255,7 @@ export const ProfileHeader = observer(function ProfileHeader({
               icon={['far', 'eye-slash']}
               style={[pal.text, s.mr5]}
             />
-            <Text type="body2" style={[s.mr2, pal.text]}>
+            <Text type="md" style={[s.mr2, pal.text]}>
               Account muted.
             </Text>
           </View>

src/view/com/util/EmptyState.tsx

@@ -29,7 +29,7 @@ export function EmptyState({
           />
         )}
       </View>
-      <Text type="body1" style={[pal.textLight, styles.text]}>
+      <Text type="xl" style={[pal.textLight, styles.text]}>
         {message}
       </Text>
     </View>

src/view/com/util/Link.tsx

@@ -58,7 +58,7 @@ export const Link = observer(function Link({
 })
 
 export const TextLink = observer(function Link({
-  type = 'body1',
+  type = 'md',
   style,
   href,
   text,

src/view/com/util/PostEmbeds.tsx

@@ -92,21 +92,18 @@ export function PostEmbeds({
           />
         )}
         <View style={styles.extInner}>
-          <Text
+          <Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
-            type="body2"
-            numberOfLines={2}
-            style={[pal.text, styles.extTitle]}>
             {link.title || link.uri}
           </Text>
           <Text
-            type="body2"
+            type="sm"
             numberOfLines={1}
             style={[pal.textLight, styles.extUri]}>
             {link.uri}
           </Text>
           {link.description ? (
             <Text
-              type="body2"
+              type="sm"
               numberOfLines={2}
               style={[pal.text, styles.extDescription]}>
               {link.description}
@@ -140,9 +137,6 @@ const styles = StyleSheet.create({
   extImageFallback: {
     height: 160,
   },
-  extTitle: {
-    fontWeight: '600',
-  },
   extUri: {
     marginTop: 2,
   },

src/view/com/util/PostMeta.tsx

@@ -40,16 +40,16 @@ export function PostMeta(opts: PostMetaOpts) {
         style={[styles.metaItem, styles.maxWidth]}
         href={opts.authorHref}
         title={opts.authorHandle}>
-        <Text type="h5" style={[pal.text]} numberOfLines={1}>
+        <Text type="lg-bold" style={[pal.text]} numberOfLines={1}>
           {displayName}
           {handle ? (
-            <Text type="h6" style={[pal.textLight]}>
+            <Text type="md" style={[pal.textLight]}>
               &nbsp;{handle}
             </Text>
           ) : undefined}
         </Text>
       </Link>
-      <Text type="h6" style={[styles.metaItem, pal.textLight]}>
+      <Text type="md" style={[styles.metaItem, pal.textLight]}>
         &middot; {ago(opts.timestamp)}
       </Text>
     </View>

src/view/com/util/UserInfoText.tsx

@@ -8,7 +8,7 @@ import {useStores} from '../../../state'
 import {TypographyVariant} from '../../lib/ThemeContext'
 
 export function UserInfoText({
-  type = 'body1',
+  type = 'md',
   did,
   attr,
   loading,

src/view/com/util/ViewHeader.tsx

@@ -68,12 +68,12 @@ export const ViewHeader = observer(function ViewHeader({
         )}
       </TouchableOpacity>
       <View style={styles.titleContainer} pointerEvents="none">
-        <Text type="h4" style={[pal.text, styles.title]}>
+        <Text type="title" style={[pal.text, styles.title]}>
           {title}
         </Text>
         {subtitle ? (
           <Text
-            type="h5"
+            type="title-sm"
             style={[styles.subtitle, pal.textLight]}
             numberOfLines={1}>
             {subtitle}

src/view/com/util/error/ErrorMessage.tsx

@@ -31,7 +31,7 @@ export function ErrorMessage({
         <FontAwesomeIcon icon="exclamation" style={pal.text} size={16} />
       </View>
       <Text
-        type="body2"
+        type="sm"
         style={[styles.message, pal.text]}
         numberOfLines={numberOfLines}>
         {message}

src/view/com/util/error/ErrorScreen.tsx

@@ -36,14 +36,14 @@ export function ErrorScreen({
           />
         </View>
       </View>
-      <Text type="h3" style={[styles.title, pal.text]}>
+      <Text type="title-lg" style={[styles.title, pal.text]}>
         {title}
       </Text>
       <Text style={[styles.message, pal.textLight]}>{message}</Text>
       {details && (
         <Text
           testID={`${testID}-details`}
-          type="body2"
+          type="sm"
           style={[
             styles.details,
             pal.textInverted,

src/view/com/util/text/RichText.tsx

@@ -15,21 +15,23 @@ type Entity = {
 }
 
 export function RichText({
-  type = 'body1',
+  type = 'md',
   text,
   entities,
+  lineHeight = 1.2,
   style,
   numberOfLines,
 }: {
   type?: TypographyVariant
   text: string
   entities?: Entity[]
+  lineHeight?: number
   style?: StyleProp<TextStyle>
   numberOfLines?: number
 }) {
   const theme = useTheme()
   const pal = usePalette('default')
-  const lineHeightStyle = lh(theme, type, 1.2)
+  const lineHeightStyle = lh(theme, type, lineHeight)
   if (!entities?.length) {
     if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
       style = {

src/view/com/util/text/Text.tsx

@@ -8,7 +8,7 @@ export type CustomTextProps = TextProps & {
 }
 
 export function Text({
-  type = 'body1',
+  type = 'md',
   children,
   style,
   ...props

src/view/lib/ThemeContext.tsx

@@ -27,21 +27,39 @@ export type ShapeName = 'button' | 'bigButton' | 'smallButton'
 export type Shapes = Record<ShapeName, ViewStyle>
 
 export type TypographyVariant =
-  | 'h1'
+  | 'xl-thin'
-  | 'h2'
+  | 'xl'
-  | 'h3'
+  | 'xl-medium'
-  | 'h4'
+  | 'xl-bold'
-  | 'h5'
+  | 'xl-heavy'
-  | 'h6'
+  | 'lg-thin'
-  | 'subtitle1'
+  | 'lg'
-  | 'subtitle2'
+  | 'lg-medium'
-  | 'body1'
+  | 'lg-bold'
-  | 'body2'
+  | 'lg-heavy'
+  | 'md-thin'
+  | 'md'
+  | 'md-medium'
+  | 'md-bold'
+  | 'md-heavy'
+  | 'sm-thin'
+  | 'sm'
+  | 'sm-medium'
+  | 'sm-bold'
+  | 'sm-heavy'
+  | 'xs-thin'
+  | 'xs'
+  | 'xs-medium'
+  | 'xs-bold'
+  | 'xs-heavy'
+  | 'title-xl'
+  | 'title-lg'
+  | 'title'
+  | 'title-sm'
+  | 'post-text-lg'
+  | 'post-text'
   | 'button'
-  | 'caption'
+  | 'mono'
-  | 'overline1'
-  | 'overline2'
-  | 'mono1'
 export type Typography = Record<TypographyVariant, TextStyle>
 
 export interface Theme {

src/view/lib/themes.ts

@@ -75,70 +75,167 @@ export const defaultTheme: Theme = {
     },
   },
   typography: {
-    h1: {
+    'xl-thin': {
-      fontSize: 48,
+      fontSize: 17,
+      letterSpacing: 0.25,
+      fontWeight: '300',
+    },
+    xl: {
+      fontSize: 17,
+      letterSpacing: 0.25,
+      fontWeight: '400',
+    },
+    'xl-medium': {
+      fontSize: 17,
+      letterSpacing: 0.25,
       fontWeight: '500',
     },
-    h2: {
+    'xl-bold': {
+      fontSize: 17,
+      letterSpacing: 0.25,
+      fontWeight: '700',
+    },
+    'xl-heavy': {
+      fontSize: 17,
+      letterSpacing: 0.25,
+      fontWeight: '800',
+    },
+    'lg-thin': {
+      fontSize: 16,
+      letterSpacing: 0.25,
+      fontWeight: '300',
+    },
+    lg: {
+      fontSize: 16,
+      letterSpacing: 0.25,
+      fontWeight: '400',
+    },
+    'lg-medium': {
+      fontSize: 16,
+      letterSpacing: 0.25,
+      fontWeight: '500',
+    },
+    'lg-bold': {
+      fontSize: 16,
+      letterSpacing: 0.25,
+      fontWeight: '700',
+    },
+    'lg-heavy': {
+      fontSize: 16,
+      letterSpacing: 0.25,
+      fontWeight: '800',
+    },
+    'md-thin': {
+      fontSize: 15,
+      letterSpacing: 0.25,
+      fontWeight: '300',
+    },
+    md: {
+      fontSize: 15,
+      letterSpacing: 0.25,
+      fontWeight: '400',
+    },
+    'md-medium': {
+      fontSize: 15,
+      letterSpacing: 0.25,
+      fontWeight: '500',
+    },
+    'md-bold': {
+      fontSize: 15,
+      letterSpacing: 0.25,
+      fontWeight: '700',
+    },
+    'md-heavy': {
+      fontSize: 15,
+      letterSpacing: 0.25,
+      fontWeight: '800',
+    },
+    'sm-thin': {
+      fontSize: 14,
+      letterSpacing: 0.25,
+      fontWeight: '300',
+    },
+    sm: {
+      fontSize: 14,
+      letterSpacing: 0.25,
+      fontWeight: '400',
+    },
+    'sm-medium': {
+      fontSize: 14,
+      letterSpacing: 0.25,
+      fontWeight: '500',
+    },
+    'sm-bold': {
+      fontSize: 14,
+      letterSpacing: 0.25,
+      fontWeight: '700',
+    },
+    'sm-heavy': {
+      fontSize: 14,
+      letterSpacing: 0.25,
+      fontWeight: '800',
+    },
+    'xs-thin': {
+      fontSize: 13,
+      letterSpacing: 0.25,
+      fontWeight: '300',
+    },
+    xs: {
+      fontSize: 13,
+      letterSpacing: 0.25,
+      fontWeight: '400',
+    },
+    'xs-medium': {
+      fontSize: 13,
+      letterSpacing: 0.25,
+      fontWeight: '500',
+    },
+    'xs-bold': {
+      fontSize: 13,
+      letterSpacing: 0.25,
+      fontWeight: '700',
+    },
+    'xs-heavy': {
+      fontSize: 13,
+      letterSpacing: 0.25,
+      fontWeight: '800',
+    },
+
+    'title-xl': {
       fontSize: 34,
       letterSpacing: 0.25,
       fontWeight: '500',
     },
-    h3: {
+    'title-lg': {
       fontSize: 24,
       fontWeight: '500',
     },
-    h4: {
+    title: {
       fontWeight: '500',
       fontSize: 20,
       letterSpacing: 0.15,
     },
-    h5: {
+    'title-sm': {
       fontWeight: 'bold',
       fontSize: 17,
       letterSpacing: 0.15,
     },
-    h6: {
+    'post-text': {
-      fontWeight: '400',
-      fontSize: 15,
-      letterSpacing: 0.15,
-    },
-    subtitle1: {
       fontSize: 16,
-      letterSpacing: 0.15,
-    },
-    subtitle2: {
-      fontWeight: '500',
-      fontSize: 14,
-      letterSpacing: 0.1,
-    },
-    body1: {
-      fontSize: 17,
       letterSpacing: 0.2,
+      fontWeight: '400',
     },
-    body2: {
+    'post-text-lg': {
-      fontSize: 14,
+      fontSize: 24,
-      letterSpacing: 0.25,
+      letterSpacing: 0.4,
+      fontWeight: '400',
     },
     button: {
       fontWeight: '500',
       fontSize: 14,
       letterSpacing: 0.5,
     },
-    caption: {
+    mono: {
-      fontSize: 12,
-      letterSpacing: 0.4,
-    },
-    overline1: {
-      fontSize: 10,
-      letterSpacing: 1.5,
-      textTransform: 'uppercase',
-    },
-    overline2: {
-      fontSize: 14,
-      fontWeight: '600',
-    },
-    mono1: {
       fontSize: 14,
       fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New',
     },

src/view/screens/Debug.tsx

@@ -87,7 +87,7 @@ function Heading({label}: {label: string}) {
   const pal = usePalette('default')
   return (
     <View style={{paddingTop: 10, paddingBottom: 5}}>
-      <Text type="h3" style={pal.text}>
+      <Text type="title-lg" style={pal.text}>
         {label}
       </Text>
     </View>
@@ -97,14 +97,14 @@ function Heading({label}: {label: string}) {
 function BaseView() {
   return (
     <View style={{paddingHorizontal: 10}}>
+      <Heading label="Typography" />
+      <TypographyView />
       <Heading label="Palettes" />
       <PaletteView palette="default" />
       <PaletteView palette="primary" />
       <PaletteView palette="secondary" />
       <PaletteView palette="inverted" />
       <PaletteView palette="error" />
-      <Heading label="Typography" />
-      <TypographyView />
       <Heading label="Empty state" />
       <EmptyStateView />
       <Heading label="Loading placeholders" />
@@ -197,36 +197,109 @@ function TypographyView() {
   const pal = usePalette('default')
   return (
     <View style={[pal.view]}>
-      <Text type="h1" style={[pal.text]}>
+      <Text type="xxl-thin" style={[pal.text]}>
-        Heading 1
+        'xxl-thin' lorem ipsum dolor
       </Text>
-      <Text type="h2" style={[pal.text]}>
+      <Text type="xxl" style={[pal.text]}>
-        Heading 2
+        'xxl' lorem ipsum dolor
       </Text>
-      <Text type="h3" style={[pal.text]}>
+      <Text type="xxl-medium" style={[pal.text]}>
-        Heading 3
+        'xxl-medium' lorem ipsum dolor
       </Text>
-      <Text type="h4" style={[pal.text]}>
+      <Text type="xxl-bold" style={[pal.text]}>
-        Heading 4
+        'xxl-bold' lorem ipsum dolor
       </Text>
-      <Text type="subtitle1" style={[pal.text]}>
+      <Text type="xxl-heavy" style={[pal.text]}>
-        Subtitle 1
+        'xxl-heavy' lorem ipsum dolor
       </Text>
-      <Text type="subtitle2" style={[pal.text]}>
+      <Text type="xl-thin" style={[pal.text]}>
-        Subtitle 2
+        'xl-thin' lorem ipsum dolor
       </Text>
-      <Text type="body1" style={[pal.text]}>
+      <Text type="xl" style={[pal.text]}>
-        Body 1
+        'xl' lorem ipsum dolor
       </Text>
-      <Text type="body2" style={[pal.text]}>
+      <Text type="xl-medium" style={[pal.text]}>
-        Body 2
+        'xl-medium' lorem ipsum dolor
+      </Text>
+      <Text type="xl-bold" style={[pal.text]}>
+        'xl-bold' lorem ipsum dolor
+      </Text>
+      <Text type="xl-heavy" style={[pal.text]}>
+        'xl-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="lg-thin" style={[pal.text]}>
+        'lg-thin' lorem ipsum dolor
+      </Text>
+      <Text type="lg" style={[pal.text]}>
+        'lg' lorem ipsum dolor
+      </Text>
+      <Text type="lg-medium" style={[pal.text]}>
+        'lg-medium' lorem ipsum dolor
+      </Text>
+      <Text type="lg-bold" style={[pal.text]}>
+        'lg-bold' lorem ipsum dolor
+      </Text>
+      <Text type="lg-heavy" style={[pal.text]}>
+        'lg-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="md-thin" style={[pal.text]}>
+        'md-thin' lorem ipsum dolor
+      </Text>
+      <Text type="md" style={[pal.text]}>
+        'md' lorem ipsum dolor
+      </Text>
+      <Text type="md-medium" style={[pal.text]}>
+        'md-medium' lorem ipsum dolor
+      </Text>
+      <Text type="md-bold" style={[pal.text]}>
+        'md-bold' lorem ipsum dolor
+      </Text>
+      <Text type="md-heavy" style={[pal.text]}>
+        'md-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="sm-thin" style={[pal.text]}>
+        'sm-thin' lorem ipsum dolor
+      </Text>
+      <Text type="sm" style={[pal.text]}>
+        'sm' lorem ipsum dolor
+      </Text>
+      <Text type="sm-medium" style={[pal.text]}>
+        'sm-medium' lorem ipsum dolor
+      </Text>
+      <Text type="sm-bold" style={[pal.text]}>
+        'sm-bold' lorem ipsum dolor
+      </Text>
+      <Text type="sm-heavy" style={[pal.text]}>
+        'sm-heavy' lorem ipsum dolor
+      </Text>
+      <Text type="xs-thin" style={[pal.text]}>
+        'xs-thin' lorem ipsum dolor
+      </Text>
+      <Text type="xs" style={[pal.text]}>
+        'xs' lorem ipsum dolor
+      </Text>
+      <Text type="xs-medium" style={[pal.text]}>
+        'xs-medium' lorem ipsum dolor
+      </Text>
+      <Text type="xs-bold" style={[pal.text]}>
+        'xs-bold' lorem ipsum dolor
+      </Text>
+      <Text type="xs-heavy" style={[pal.text]}>
+        'xs-heavy' lorem ipsum dolor
+      </Text>
+
+      <Text type="title-xl" style={[pal.text]}>
+        'title-xl' lorem ipsum dolor
+      </Text>
+      <Text type="title-lg" style={[pal.text]}>
+        'title-lg' lorem ipsum dolor
+      </Text>
+      <Text type="title" style={[pal.text]}>
+        'title' lorem ipsum dolor
       </Text>
       <Text type="button" style={[pal.text]}>
         Button
       </Text>
-      <Text type="caption" style={[pal.text]}>
-        Caption
-      </Text>
       <Text type="overline" style={[pal.text]}>
         Overline
       </Text>

src/view/screens/Log.tsx

@@ -49,7 +49,7 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
                   ) : (
                     <FontAwesomeIcon icon="exclamation" style={s.red3} />
                   )}
-                  <Text type="body2" style={[styles.summary, pal.text]}>
+                  <Text type="sm" style={[styles.summary, pal.text]}>
                     {entry.summary}
                   </Text>
                   {!!entry.details ? (
@@ -60,14 +60,14 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
                       style={s.mr5}
                     />
                   ) : undefined}
-                  <Text type="body2" style={[styles.ts, pal.textLight]}>
+                  <Text type="sm" style={[styles.ts, pal.textLight]}>
                     {entry.ts ? ago(entry.ts) : ''}
                   </Text>
                 </TouchableOpacity>
                 {expanded.includes(entry.id) ? (
                   <View style={[pal.view, s.pl10, s.pr10, s.pb10]}>
                     <View style={[pal.btn, styles.details]}>
-                      <Text type="mono1" style={pal.text}>
+                      <Text type="mono" style={pal.text}>
                         {entry.details}
                       </Text>
                     </View>

src/view/screens/Search.tsx

@@ -82,7 +82,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
                   size={36}
                 />
                 <View style={[s.ml10]}>
-                  <Text type="h5" style={pal.text}>
+                  <Text type="title-sm" style={pal.text}>
                     {item.displayName || item.handle}
                   </Text>
                   <Text style={pal.textLight}>@{item.handle}</Text>

src/view/screens/Settings.tsx

@@ -37,7 +37,7 @@ export const Settings = observer(function Settings({
           <Text style={pal.text}>Signed in as</Text>
           <View style={s.flex1} />
           <TouchableOpacity onPress={onPressSignout}>
-            <Text type="h5" style={pal.link}>
+            <Text type="xl-heavy" style={pal.link}>
               Sign out
             </Text>
           </TouchableOpacity>
@@ -54,7 +54,7 @@ export const Settings = observer(function Settings({
               avatar={store.me.avatar}
             />
             <View style={[s.ml10]}>
-              <Text type="h5" style={pal.text}>
+              <Text type="xl-bold" style={pal.text}>
                 {store.me.displayName || store.me.handle}
               </Text>
               <Text style={pal.textLight}>@{store.me.handle}</Text>
@@ -62,7 +62,7 @@ export const Settings = observer(function Settings({
           </View>
         </Link>
         <View style={s.flex1} />
-        <Text type="overline1" style={[s.mb5]}>
+        <Text type="sm-medium" style={[s.mb5]}>
           Advanced
         </Text>
         <Link

src/view/shell/mobile/Menu.tsx

@@ -74,7 +74,7 @@ export const Menu = observer(
           ) : undefined}
         </View>
         <Text
-          type="h4"
+          type="title"
           style={[
             pal.text,
             bold ? styles.menuItemLabelBold : styles.menuItemLabel,
@@ -99,7 +99,7 @@ export const Menu = observer(
           />
           <View style={s.flex1}>
             <Text
-              type="h3"
+              type="title-lg"
               style={[pal.text, styles.profileCardDisplayName]}
               numberOfLines={1}>
               {store.me.displayName || store.me.handle}
@@ -119,7 +119,7 @@ export const Menu = observer(
             style={pal.text as StyleProp<ViewStyle>}
             size={25}
           />
-          <Text type="h4" style={[pal.text, styles.searchBtnLabel]}>
+          <Text type="title" style={[pal.text, styles.searchBtnLabel]}>
             Search
           </Text>
         </TouchableOpacity>