diff --git a/App.tsx b/App.tsx
index 1b923ec9..3dc1ac96 100644
--- a/App.tsx
+++ b/App.tsx
@@ -7,6 +7,7 @@ import ThemeManager from '@utils/styles/ThemeManager'
 import chalk from 'chalk'
 import * as SplashScreen from 'expo-splash-screen'
 import React, { useCallback, useEffect, useState } from 'react'
+import { Platform, Text } from 'react-native'
 import { enableScreens } from 'react-native-screens'
 import { onlineManager, QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
diff --git a/src/components/Header/Left.tsx b/src/components/Header/Left.tsx
index ee0ee3de..c22d9441 100644
--- a/src/components/Header/Left.tsx
+++ b/src/components/Header/Left.tsx
@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     borderRadius: 100
   },
   text: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 
diff --git a/src/components/Header/Right.tsx b/src/components/Header/Right.tsx
index 06a73956..c9209227 100644
--- a/src/components/Header/Right.tsx
+++ b/src/components/Header/Right.tsx
@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
     borderRadius: 100
   },
   text: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 
diff --git a/src/components/Menu/Header.tsx b/src/components/Menu/Header.tsx
index 81929278..0eb36122 100644
--- a/src/components/Menu/Header.tsx
+++ b/src/components/Menu/Header.tsx
@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
     paddingBottom: StyleConstants.Spacing.S
   },
   text: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold
   }
 })
diff --git a/src/components/Menu/Row.tsx b/src/components/Menu/Row.tsx
index 6eede37d..403633c6 100644
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@@ -133,10 +133,10 @@ const styles = StyleSheet.create({
   },
   text: {
     flex: 1,
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   content: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   iconBack: {
     marginLeft: 8
diff --git a/src/components/ParseContent.tsx b/src/components/ParseContent.tsx
index f9d86eaf..63ef7c25 100644
--- a/src/components/ParseContent.tsx
+++ b/src/components/ParseContent.tsx
@@ -40,7 +40,7 @@ const renderNode = ({
             key={index}
             style={{
               color: theme.blue,
-              fontSize: StyleConstants.Font.Size[size]
+              ...StyleConstants.FontStyle[size]
             }}
             onPress={() => {
               const tag = href.split(new RegExp(/\/tag\/(.*)|\/tags\/(.*)/))
@@ -59,7 +59,7 @@ const renderNode = ({
             key={index}
             style={{
               color: theme.blue,
-              fontSize: StyleConstants.Font.Size[size]
+              ...StyleConstants.FontStyle[size]
             }}
             onPress={() => {
               const username = href.split(new RegExp(/@(.*)/))
@@ -79,13 +79,14 @@ const renderNode = ({
     } else {
       const domain = href.split(new RegExp(/:\/\/(.[^\/]+)/))
       const content = node.children && node.children[0].data
-      const shouldBeTag = tags && tags.filter(tag => `#${tag.name}` === content)
+      const shouldBeTag =
+        tags && tags.filter(tag => `#${tag.name}` === content).length > 0
       return (
         <Text
           key={index}
           style={{
             color: theme.blue,
-            fontSize: StyleConstants.Font.Size[size]
+            ...StyleConstants.FontStyle[size]
           }}
           onPress={async () =>
             !shouldBeTag
@@ -158,13 +159,9 @@ const ParseContent: React.FC<Props> = ({
   const textComponent = useCallback(({ children }) => {
     if (children) {
       return emojis ? (
-        <Emojis
-          content={children.toString()}
-          emojis={emojis}
-          size={StyleConstants.Font.Size[size]}
-        />
+        <Emojis content={children.toString()} emojis={emojis} size={size} />
       ) : (
-        <Text>{children}</Text>
+        <Text style={{ ...StyleConstants.FontStyle[size] }}>{children}</Text>
       )
     } else {
       return null
@@ -198,7 +195,7 @@ const ParseContent: React.FC<Props> = ({
       return (
         <View>
           <Text
-            style={{ lineHeight, color: theme.primary, overflow: 'hidden' }}
+            style={{ color: theme.primary, overflow: 'hidden' }}
             children={children}
             numberOfLines={calNumberOfLines}
             onLayout={({ nativeEvent }) => {
@@ -237,7 +234,7 @@ const ParseContent: React.FC<Props> = ({
                 <Text
                   style={{
                     textAlign: 'center',
-                    fontSize: StyleConstants.Font.Size.S,
+                    ...StyleConstants.FontStyle.S,
                     color: theme.primary
                   }}
                 >
diff --git a/src/components/Timelines/Timeline/Empty.tsx b/src/components/Timelines/Timeline/Empty.tsx
index 80241cec..a8ccc82f 100644
--- a/src/components/Timelines/Timeline/Empty.tsx
+++ b/src/components/Timelines/Timeline/Empty.tsx
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   error: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,
     marginBottom: StyleConstants.Spacing.L
   }
diff --git a/src/components/Timelines/Timeline/Shared/Actioned.tsx b/src/components/Timelines/Timeline/Shared/Actioned.tsx
index 8c1e8d0c..49611ce5 100644
--- a/src/components/Timelines/Timeline/Shared/Actioned.tsx
+++ b/src/components/Timelines/Timeline/Shared/Actioned.tsx
@@ -90,7 +90,7 @@ const TimelineActioned: React.FC<Props> = ({
             <Emojis
               content={content}
               emojis={account.emojis}
-              size={StyleConstants.Font.Size.S}
+              size='S'
             />
           ) : (
             <Text>{content}</Text>
diff --git a/src/components/Timelines/Timeline/Shared/Actions.tsx b/src/components/Timelines/Timeline/Shared/Actions.tsx
index 9c004e96..ff7446e2 100644
--- a/src/components/Timelines/Timeline/Shared/Actions.tsx
+++ b/src/components/Timelines/Timeline/Shared/Actions.tsx
@@ -194,7 +194,7 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
           <Text
             style={{
               color: theme.secondary,
-              fontSize: StyleConstants.Font.Size.M,
+              ...StyleConstants.FontStyle.M,
               marginLeft: StyleConstants.Spacing.XS
             }}
           >
diff --git a/src/components/Timelines/Timeline/Shared/Attachment.tsx b/src/components/Timelines/Timeline/Shared/Attachment.tsx
index 464bc8d1..011c8f3d 100644
--- a/src/components/Timelines/Timeline/Shared/Attachment.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment.tsx
@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
     borderRadius: 6
   },
   sensitiveText: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 
diff --git a/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx b/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
index 83cb8d39..dbdf8b32 100644
--- a/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment/Unsupported.tsx
@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   text: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     textAlign: 'center',
     marginBottom: StyleConstants.Spacing.S
   }
diff --git a/src/components/Timelines/Timeline/Shared/Emojis.tsx b/src/components/Timelines/Timeline/Shared/Emojis.tsx
index 5b3445c0..0f17c443 100644
--- a/src/components/Timelines/Timeline/Shared/Emojis.tsx
+++ b/src/components/Timelines/Timeline/Shared/Emojis.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image, StyleSheet, Text, View } from 'react-native'
+import { Image, StyleSheet, Text } from 'react-native'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'
 
@@ -8,7 +8,7 @@ const regexEmoji = new RegExp(/(:[a-z0-9_]+:)/)
 export interface Props {
   content: string
   emojis: Mastodon.Emoji[]
-  size: number
+  size?: 'S' | 'M' | 'L'
   fontBold?: boolean
   numberOfLines?: number
 }
@@ -16,22 +16,21 @@ export interface Props {
 const Emojis: React.FC<Props> = ({
   content,
   emojis,
-  size,
+  size = 'M',
   fontBold = false,
   numberOfLines
 }) => {
   const { theme } = useTheme()
   const styles = StyleSheet.create({
     text: {
-      fontSize: size,
       color: theme.primary,
+      ...StyleConstants.FontStyle[size],
       ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
     },
     image: {
-      width: size,
-      height: size,
-      paddingTop: 1,
-      marginBottom: -1
+      width: StyleConstants.Font.Size[size],
+      height: StyleConstants.Font.Size[size],
+      marginBottom: -2 // hacking
     }
   })
 
@@ -48,14 +47,12 @@ const Emojis: React.FC<Props> = ({
               {emojiShortcode}
             </Text>
           ) : (
-            <View key={i} style={styles.image}>
-              <Image
-                key={i}
-                resizeMode='contain'
-                source={{ uri: emojis[emojiIndex].url }}
-                style={{ width: '100%', height: '100%' }}
-              />
-            </View>
+            <Image
+              key={i}
+              resizeMode='contain'
+              source={{ uri: emojis[emojiIndex].url }}
+              style={[styles.image]}
+            />
           )
         } else {
           return str ? (
@@ -71,4 +68,5 @@ const Emojis: React.FC<Props> = ({
   )
 }
 
-export default React.memo(Emojis, () => true)
+// export default React.memo(Emojis, () => true)
+export default Emojis
diff --git a/src/components/Timelines/Timeline/Shared/End.tsx b/src/components/Timelines/Timeline/Shared/End.tsx
index b7cceb78..14ae1135 100644
--- a/src/components/Timelines/Timeline/Shared/End.tsx
+++ b/src/components/Timelines/Timeline/Shared/End.tsx
@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
     padding: StyleConstants.Spacing.M
   },
   text: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   }
 })
diff --git a/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx b/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
index da2ee989..9e3d3a0c 100644
--- a/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
@@ -85,7 +85,7 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
                 conversation.accounts[0].username
               }
               emojis={conversation.accounts[0].emojis}
-              size={StyleConstants.Font.Size.M}
+              size='M'
               fontBold={true}
             />
           ) : (
@@ -141,7 +141,7 @@ const styles = StyleSheet.create({
     marginLeft: StyleConstants.Spacing.XS
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   meta: {
@@ -151,7 +151,7 @@ const styles = StyleSheet.create({
     marginBottom: StyleConstants.Spacing.S
   },
   created_at: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   unread: {
     marginLeft: StyleConstants.Spacing.XS
diff --git a/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx b/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
index d78d3b55..9e257a2b 100644
--- a/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
@@ -68,12 +68,12 @@ const TimelineHeaderDefault: React.FC<Props> = ({
   return (
     <View style={styles.base}>
       <View style={queryKey ? { flexBasis: '80%' } : { flexBasis: '100%' }}>
-        <View style={styles.name}>
+        <View style={styles.nameAndAccount}>
           {emojis?.length ? (
             <Emojis
               content={name}
               emojis={emojis}
-              size={StyleConstants.Font.Size.M}
+              size='M'
               fontBold={true}
             />
           ) : (
@@ -168,11 +168,12 @@ const styles = StyleSheet.create({
   nameAndMeta: {
     flexBasis: '80%'
   },
-  name: {
-    flexDirection: 'row'
+  nameAndAccount: {
+    flexDirection: 'row',
+    alignItems: 'center'
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   account: {
@@ -186,13 +187,13 @@ const styles = StyleSheet.create({
     marginBottom: StyleConstants.Spacing.S
   },
   created_at: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   visibility: {
     marginLeft: StyleConstants.Spacing.S
   },
   application: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   },
   action: {
diff --git a/src/components/Timelines/Timeline/Shared/HeaderNotification.tsx b/src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
index 504c7868..ac586559 100644
--- a/src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
@@ -128,7 +128,7 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
             <Emojis
               content={name}
               emojis={emojis}
-              size={StyleConstants.Font.Size.M}
+              size='M'
               fontBold={true}
             />
           ) : (
@@ -194,7 +194,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row'
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   account: {
@@ -208,13 +208,13 @@ const styles = StyleSheet.create({
     marginBottom: StyleConstants.Spacing.S
   },
   created_at: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   visibility: {
     marginLeft: StyleConstants.Spacing.S
   },
   application: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   },
   relationship: {
diff --git a/src/components/Timelines/Timeline/Shared/Poll.tsx b/src/components/Timelines/Timeline/Shared/Poll.tsx
index ef6d4044..b709cf50 100644
--- a/src/components/Timelines/Timeline/Shared/Poll.tsx
+++ b/src/components/Timelines/Timeline/Shared/Poll.tsx
@@ -178,7 +178,7 @@ const TimelinePoll: React.FC<Props> = ({
                 <Emojis
                   content={option.title}
                   emojis={poll.emojis}
-                  size={StyleConstants.Font.Size.M}
+                  size='M'
                   numberOfLines={2}
                 />
               </View>
@@ -238,7 +238,7 @@ const TimelinePoll: React.FC<Props> = ({
                 <Emojis
                   content={option.title}
                   emojis={poll.emojis}
-                  size={StyleConstants.Font.Size.M}
+                  size='M'
                   numberOfLines={2}
                 />
               </View>
@@ -293,7 +293,7 @@ const styles = StyleSheet.create({
     paddingRight: StyleConstants.Spacing.S
   },
   percentage: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   background: {
     height: StyleConstants.Spacing.XS,
@@ -313,10 +313,10 @@ const styles = StyleSheet.create({
     marginRight: StyleConstants.Spacing.M
   },
   votes: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   expiration: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   }
 })
 
diff --git a/src/components/toast.tsx b/src/components/toast.tsx
index 1bd4ae0c..21fd78c1 100644
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@@ -111,10 +111,10 @@ const styles = StyleSheet.create({
     marginLeft: StyleConstants.Spacing.S
   },
   text1: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   text2: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginTop: StyleConstants.Spacing.S
   }
 })
diff --git a/src/screens/Me/Root/Login.tsx b/src/screens/Me/Root/Login.tsx
index 30689166..4422e484 100644
--- a/src/screens/Me/Root/Login.tsx
+++ b/src/screens/Me/Root/Login.tsx
@@ -294,7 +294,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     paddingLeft: StyleConstants.Spacing.Global.PagePadding,
     paddingRight: StyleConstants.Spacing.Global.PagePadding,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginRight: StyleConstants.Spacing.S
   },
   instanceInfo: {
@@ -303,11 +303,11 @@ const styles = StyleSheet.create({
     paddingRight: StyleConstants.Spacing.Global.PagePadding
   },
   instanceInfoHeader: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
   },
-  instanceInfoContent: { fontSize: StyleConstants.Font.Size.M },
+  instanceInfoContent: { ...StyleConstants.FontStyle.M },
   instanceStats: {
     flex: 1,
     flexDirection: 'row',
@@ -320,7 +320,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   disclaimer: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     paddingLeft: StyleConstants.Spacing.Global.PagePadding,
     paddingRight: StyleConstants.Spacing.Global.PagePadding,
     marginBottom: StyleConstants.Spacing.M
diff --git a/src/screens/Me/Settings.tsx b/src/screens/Me/Settings.tsx
index 55946e6e..daaa3ff4 100644
--- a/src/screens/Me/Settings.tsx
+++ b/src/screens/Me/Settings.tsx
@@ -147,7 +147,7 @@ const ScreenMeSettings: React.FC = () => {
 const styles = StyleSheet.create({
   version: {
     textAlign: 'center',
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginTop: StyleConstants.Spacing.M
   }
 })
diff --git a/src/screens/Shared/Account/Information/Account.tsx b/src/screens/Shared/Account/Information/Account.tsx
index d75e7f71..6de24f16 100644
--- a/src/screens/Shared/Account/Information/Account.tsx
+++ b/src/screens/Shared/Account/Information/Account.tsx
@@ -31,7 +31,7 @@ const AccountInformationAccount = forwardRef<ShimmerPlaceholder, Props>(
           <Text
             style={{
               color: theme.secondary,
-              fontSize: StyleConstants.Font.Size.M
+              ...StyleConstants.FontStyle.M
             }}
             selectable
           >
diff --git a/src/screens/Shared/Account/Information/Actions.tsx b/src/screens/Shared/Account/Information/Actions.tsx
index 20caf655..ba154a70 100644
--- a/src/screens/Shared/Account/Information/Actions.tsx
+++ b/src/screens/Shared/Account/Information/Actions.tsx
@@ -153,7 +153,7 @@ const styles = StyleSheet.create({
   },
   actionConversation: { marginRight: StyleConstants.Spacing.S },
   error: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   }
 })
 
diff --git a/src/screens/Shared/Account/Information/Created.tsx b/src/screens/Shared/Account/Information/Created.tsx
index 3f061d5f..4370efac 100644
--- a/src/screens/Shared/Account/Information/Created.tsx
+++ b/src/screens/Shared/Account/Information/Created.tsx
@@ -38,7 +38,7 @@ const AccountInformationCreated = forwardRef<ShimmerPlaceholder, Props>(
           <Text
             style={{
               color: theme.secondary,
-              fontSize: StyleConstants.Font.Size.S
+              ...StyleConstants.FontStyle.S
             }}
           >
             {t('content.created_at', {
diff --git a/src/screens/Shared/Account/Information/Name.tsx b/src/screens/Shared/Account/Information/Name.tsx
index 0dacc135..2934084b 100644
--- a/src/screens/Shared/Account/Information/Name.tsx
+++ b/src/screens/Shared/Account/Information/Name.tsx
@@ -33,14 +33,14 @@ const AccountInformationName = forwardRef<ShimmerPlaceholder, Props>(
             <Emojis
               content={account?.display_name || account?.username}
               emojis={account.emojis}
-              size={StyleConstants.Font.Size.L}
+              size='L'
               fontBold={true}
             />
           ) : (
             <Text
               style={{
                 color: theme.primary,
-                fontSize: StyleConstants.Font.Size.L,
+                ...StyleConstants.FontStyle.L,
                 fontWeight: StyleConstants.Font.Weight.Bold
               }}
             >
diff --git a/src/screens/Shared/Account/Information/Stats.tsx b/src/screens/Shared/Account/Information/Stats.tsx
index 8ad0ebf7..4efad66a 100644
--- a/src/screens/Shared/Account/Information/Stats.tsx
+++ b/src/screens/Shared/Account/Information/Stats.tsx
@@ -88,7 +88,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between'
   },
   stat: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   }
 })
 
diff --git a/src/screens/Shared/Account/Nav.tsx b/src/screens/Shared/Account/Nav.tsx
index 94567408..1a25dfc8 100644
--- a/src/screens/Shared/Account/Nav.tsx
+++ b/src/screens/Shared/Account/Nav.tsx
@@ -63,14 +63,14 @@ const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
             <Emojis
               content={account?.display_name || account?.username}
               emojis={account.emojis}
-              size={StyleConstants.Font.Size.L}
+              size='L'
               fontBold={true}
             />
           ) : (
             <Text
               style={{
                 color: theme.primary,
-                fontSize: StyleConstants.Font.Size.L,
+                ...StyleConstants.FontStyle.L,
                 fontWeight: StyleConstants.Font.Weight.Bold
               }}
             >
diff --git a/src/screens/Shared/Announcements.tsx b/src/screens/Shared/Announcements.tsx
index 94d5cf45..cdee55d7 100644
--- a/src/screens/Shared/Announcements.tsx
+++ b/src/screens/Shared/Announcements.tsx
@@ -238,7 +238,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   headerText: {
-    fontSize: StyleConstants.Font.Size.M * 1.5,
+    ...StyleConstants.FontStyle.L,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   announcementContainer: {
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   published: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginBottom: StyleConstants.Spacing.S
   },
   pressable: { ...StyleSheet.absoluteFillObject },
@@ -280,10 +280,10 @@ const styles = StyleSheet.create({
     height: StyleConstants.Font.LineHeight.M
   },
   reactionText: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M,
   },
   reactionCount: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginLeft: StyleConstants.Spacing.S
   },
   indicators: {
diff --git a/src/screens/Shared/Compose.tsx b/src/screens/Shared/Compose.tsx
index 249bc77c..cb9ab4db 100644
--- a/src/screens/Shared/Compose.tsx
+++ b/src/screens/Shared/Compose.tsx
@@ -611,7 +611,7 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
 const styles = StyleSheet.create({
   count: {
     textAlign: 'center',
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 
diff --git a/src/screens/Shared/Compose/Actions.tsx b/src/screens/Shared/Compose/Actions.tsx
index 09540e0c..26582076 100644
--- a/src/screens/Shared/Compose/Actions.tsx
+++ b/src/screens/Shared/Compose/Actions.tsx
@@ -196,7 +196,7 @@ const styles = StyleSheet.create({
   },
   count: {
     textAlign: 'center',
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   }
 })
diff --git a/src/screens/Shared/Compose/Attachments.tsx b/src/screens/Shared/Compose/Attachments.tsx
index f4562bd4..84010558 100644
--- a/src/screens/Shared/Compose/Attachments.tsx
+++ b/src/screens/Shared/Compose/Attachments.tsx
@@ -209,7 +209,7 @@ const styles = StyleSheet.create({
     marginLeft: StyleConstants.Spacing.Global.PagePadding
   },
   sensitiveText: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginLeft: StyleConstants.Spacing.S
   },
   imageContainer: {
@@ -226,7 +226,7 @@ const styles = StyleSheet.create({
     bottom:
       StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
     left: StyleConstants.Spacing.Global.PagePadding + StyleConstants.Spacing.S,
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     paddingLeft: StyleConstants.Spacing.S,
     paddingRight: StyleConstants.Spacing.S,
     paddingTop: StyleConstants.Spacing.XS,
diff --git a/src/screens/Shared/Compose/EditAttachment.tsx b/src/screens/Shared/Compose/EditAttachment.tsx
index 62c50db7..a0c17092 100644
--- a/src/screens/Shared/Compose/EditAttachment.tsx
+++ b/src/screens/Shared/Compose/EditAttachment.tsx
@@ -328,17 +328,17 @@ const ComposeEditAttachment: React.FC<Props> = ({
 
 const styles = StyleSheet.create({
   imageFocusText: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     padding: StyleConstants.Spacing.Global.PagePadding
   },
   altTextContainer: { padding: StyleConstants.Spacing.Global.PagePadding },
   altTextInputHeading: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   altTextInput: {
     height: 200,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.M,
     marginBottom: StyleConstants.Spacing.S,
     padding: StyleConstants.Spacing.Global.PagePadding,
@@ -348,7 +348,7 @@ const styles = StyleSheet.create({
   altTextLength: {
     textAlign: 'right',
     marginRight: StyleConstants.Spacing.S,
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     marginBottom: StyleConstants.Spacing.M
   }
 })
diff --git a/src/screens/Shared/Compose/Emojis.tsx b/src/screens/Shared/Compose/Emojis.tsx
index b3ea3077..d7d42c2d 100644
--- a/src/screens/Shared/Compose/Emojis.tsx
+++ b/src/screens/Shared/Compose/Emojis.tsx
@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
   group: {
     position: 'absolute',
     left: StyleConstants.Spacing.L,
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   emojis: {
     flex: 1,
diff --git a/src/screens/Shared/Compose/Poll.tsx b/src/screens/Shared/Compose/Poll.tsx
index b2396333..a9ba9c46 100644
--- a/src/screens/Shared/Compose/Poll.tsx
+++ b/src/screens/Shared/Compose/Poll.tsx
@@ -172,7 +172,7 @@ const styles = StyleSheet.create({
     padding: StyleConstants.Spacing.S,
     borderWidth: StyleSheet.hairlineWidth,
     borderRadius: 6,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginLeft: StyleConstants.Spacing.S
   },
   controlAmount: {
diff --git a/src/screens/Shared/Compose/Root.tsx b/src/screens/Shared/Compose/Root.tsx
index 2ec9302d..751cf7ae 100644
--- a/src/screens/Shared/Compose/Root.tsx
+++ b/src/screens/Shared/Compose/Root.tsx
@@ -73,7 +73,7 @@ const ListItem = React.memo(
                   <Emojis
                     content={item.display_name || item.username}
                     emojis={item.emojis}
-                    size={StyleConstants.Font.Size.S}
+                    size='S'
                   />
                 ) : (
                   item.display_name || item.username
@@ -229,12 +229,12 @@ const styles = StyleSheet.create({
     borderRadius: StyleConstants.Avatar.M
   },
   accountName: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
   },
   accountAccount: {
-    fontSize: StyleConstants.Font.Size.S
+    ...StyleConstants.FontStyle.S
   },
   hashtag: {
     flex: 1,
@@ -245,7 +245,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth
   },
   hashtagText: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold,
     marginBottom: StyleConstants.Spacing.XS
   },
diff --git a/src/screens/Shared/Compose/SpoilerInput.tsx b/src/screens/Shared/Compose/SpoilerInput.tsx
index 3304520a..428625f0 100644
--- a/src/screens/Shared/Compose/SpoilerInput.tsx
+++ b/src/screens/Shared/Compose/SpoilerInput.tsx
@@ -58,7 +58,7 @@ const ComposeSpoilerInput: React.FC = () => {
 
 const styles = StyleSheet.create({
   spoilerInput: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,
     paddingBottom: StyleConstants.Spacing.M,
     marginLeft: StyleConstants.Spacing.Global.PagePadding,
diff --git a/src/screens/Shared/Compose/TextInput.tsx b/src/screens/Shared/Compose/TextInput.tsx
index 44801e6d..a685de7e 100644
--- a/src/screens/Shared/Compose/TextInput.tsx
+++ b/src/screens/Shared/Compose/TextInput.tsx
@@ -58,12 +58,11 @@ const ComposeTextInput: React.FC = () => {
 
 const styles = StyleSheet.create({
   textInput: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,
     paddingBottom: StyleConstants.Spacing.M,
     marginLeft: StyleConstants.Spacing.Global.PagePadding,
     marginRight: StyleConstants.Spacing.Global.PagePadding
-    // borderBottomWidth: 0.5
   }
 })
 
diff --git a/src/screens/Shared/ImagesViewer.tsx b/src/screens/Shared/ImagesViewer.tsx
index 6c50eb0a..cc7c205b 100644
--- a/src/screens/Shared/ImagesViewer.tsx
+++ b/src/screens/Shared/ImagesViewer.tsx
@@ -123,7 +123,7 @@ const ScreenSharedImagesViewer: React.FC<Props> = ({
 const styles = StyleSheet.create({
   headerCenter: {
     color: 'white',
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   }
 })
 
diff --git a/src/screens/Shared/Search.tsx b/src/screens/Shared/Search.tsx
index 3e144d30..c74854df 100644
--- a/src/screens/Shared/Search.tsx
+++ b/src/screens/Shared/Search.tsx
@@ -177,7 +177,7 @@ const ScreenSharedSearch: React.FC = () => {
                 <Emojis
                   content={item.display_name || item.username}
                   emojis={item.emojis}
-                  size={StyleConstants.Font.Size.S}
+                  size='S'
                   fontBold={true}
                 />
               ) : (
@@ -233,7 +233,7 @@ const ScreenSharedSearch: React.FC = () => {
                 <Emojis
                   content={item.account.display_name || item.account.username}
                   emojis={item.account.emojis}
-                  size={StyleConstants.Font.Size.S}
+                  size='S'
                   fontBold={true}
                 />
               ) : (
@@ -352,7 +352,7 @@ const styles = StyleSheet.create({
   textInput: {
     flex: 1,
     padding: StyleConstants.Spacing.S,
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     marginRight: StyleConstants.Spacing.S
   },
 
@@ -364,7 +364,7 @@ const styles = StyleSheet.create({
       StyleConstants.Spacing.S
   },
   loading: { flex: 1, alignItems: 'center' },
-  emptyFontSize: { fontSize: StyleConstants.Font.Size.S },
+  emptyFontSize: { ...StyleConstants.FontStyle.S },
   emptyFontBold: {
     fontWeight: StyleConstants.Font.Weight.Bold
   },
@@ -379,7 +379,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth
   },
   sectionHeaderText: {
-    fontSize: StyleConstants.Font.Size.M,
+    ...StyleConstants.FontStyle.M,
     fontWeight: StyleConstants.Font.Weight.Bold,
     textAlign: 'center'
   },
@@ -387,7 +387,7 @@ const styles = StyleSheet.create({
     padding: StyleConstants.Spacing.S
   },
   sectionFooterText: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     textAlign: 'center'
   },
   itemDefault: {
@@ -406,12 +406,12 @@ const styles = StyleSheet.create({
     marginRight: StyleConstants.Spacing.S
   },
   nameWithoutEmoji: {
-    fontSize: StyleConstants.Font.Size.S,
+    ...StyleConstants.FontStyle.S,
     fontWeight: StyleConstants.Font.Weight.Bold
   },
   itemAccountAcct: { marginTop: StyleConstants.Spacing.XS },
   itemHashtag: {
-    fontSize: StyleConstants.Font.Size.M
+    ...StyleConstants.FontStyle.M
   },
   itemStatus: {
     marginTop: StyleConstants.Spacing.S
diff --git a/src/utils/styles/constants.ts b/src/utils/styles/constants.ts
index af6efcde..b211c098 100644
--- a/src/utils/styles/constants.ts
+++ b/src/utils/styles/constants.ts
@@ -2,15 +2,14 @@ const Base = 4
 
 export const StyleConstants = {
   Font: {
-    Size: {
-      S: 14,
-      M: 16,
-      L: 18
-    },
-    LineHeight: { M: 20, L: 24 },
-    Weight: {
-      Bold: '600' as '600'
-    }
+    Size: { S: 14, M: 16, L: 18 },
+    LineHeight: { S: 16, M: 20, L: 24 },
+    Weight: { Bold: '600' as '600' }
+  },
+  FontStyle: {
+    S: { fontSize: 14, lineHeight: 16 },
+    M: { fontSize: 16, lineHeight: 20 },
+    L: { fontSize: 20, lineHeight: 24 }
   },
 
   Spacing: {
@@ -19,14 +18,8 @@ export const StyleConstants = {
     M: Base * 4,
     L: Base * 6,
     XL: Base * 10,
-    Global: {
-      PagePadding: Base * 4
-    }
+    Global: { PagePadding: Base * 4 }
   },
 
-  Avatar: {
-    S: 36,
-    M: 52,
-    L: 104
-  }
+  Avatar: { S: 36, M: 52, L: 104 }
 }