Update Typography with latest text styles (#1410)

* Replace Whitney fonts with Lato

* Escape font family names so Lato works on iOS

* Update custom fonts

* Typography file cleanup

* Rename constants to appConstants

* Fix margins in AddObsModal

* Update Typography styles in tailwind config; closes #1398

* Styling fixes for typography

* Update snapshots

* Fix snapshots

* Fix photo count typography

* Code cleanup

* Update Heading2 snapshot

src/components/About.js

@@ -9,6 +9,7 @@ import {
   Heading4,
   ScrollViewWrapper,
   Tabs,
+  UnderlinedLink,
   ViewWrapper
 } from "components/SharedComponents";
 import { Image, View } from "components/styledComponents";
@@ -101,24 +102,24 @@ const About = (): Node => {
             </Body2>
             <Body2 className="mb-5">{t( "Whats-more-by-recording" )}</Body2>
             <Body2 className="mb-8">{t( "iNaturalist-is-supported-by" )}</Body2>
-            <Body2
-              className="mb-5 underline font-bold"
+            <UnderlinedLink
+              className="mb-5"
               onPress={() => onTermsPressed()}
             >
               {t( "Terms-of-Use" )}
-            </Body2>
-            <Body2
-              className="mb-5 underline font-bold"
+            </UnderlinedLink>
+            <UnderlinedLink
+              className="mb-5"
               onPress={() => onPrivacyPressed()}
             >
               {t( "Privacy-Policy" )}
-            </Body2>
-            <Body2
-              className="mb-8 underline font-bold"
+            </UnderlinedLink>
+            <UnderlinedLink
+              className="mb-8"
               onPress={() => onCommunityPressed()}
             >
               {t( "Community-Guidelines" )}
-            </Body2>
+            </UnderlinedLink>
             <View className="items-center justify-center">
               <Body1>{`Version ${appVersion} (${buildVersion})`}</Body1>
             </View>

src/components/Camera/Buttons/Zoom.js

@@ -1,7 +1,7 @@
 // @flow
 
 import classnames from "classnames";
-import { Body3Bold } from "components/SharedComponents";
+import { Body3 } from "components/SharedComponents";
 import {
   CIRCLE_BUTTON_DIM
 } from "components/SharedComponents/Buttons/TransparentCircleButton";
@@ -59,9 +59,9 @@ const CameraZoom = ( {
         accessibilityState={{ disabled: false }}
         size={20}
       >
-        <Body3Bold className="text-s text-white">
+        <Body3 className="text-s text-white">
           {zoomButtonText}
-        </Body3Bold>
+        </Body3>
       </Pressable>
     </Animated.View>
   );

src/components/Developer/UiLibrary/Typography.js

@@ -8,10 +8,10 @@ import {
   Heading3,
   Heading4,
   Heading5,
-  List1,
   List2,
   ScrollViewWrapper,
   Subheading1,
+  UnderlinedLink,
   UserText
 } from "components/SharedComponents";
 import { fontMonoClass, View } from "components/styledComponents";
@@ -39,13 +39,12 @@ const Typography = ( ) => {
         <Body2 className="my-2">Body2</Body2>
         <Body3 className="my-2">Body3</Body3>
         <Body4 className="my-2">Body4</Body4>
-        <List1 className="my-2">List1</List1>
         <List2 className="my-2">List2</List2>
-
         <Heading3 className="my-2">UserText</Heading3>
         <Heading4 className="my-2">Source</Heading4>
         <Body2 className={fontMonoClass}>{userText}</Body2>
         <Heading4 className="mt-2">Result</Heading4>
+        <UnderlinedLink className="my-2">UnderlinedLink</UnderlinedLink>
         <UserText text={userText} />
       </View>
     </ScrollViewWrapper>

src/components/LoginSignUp/LicensePhotosForm.js

@@ -2,7 +2,9 @@
 
 import { useNavigation, useRoute } from "@react-navigation/native";
 import classnames from "classnames";
-import { Body2, Button, TextSheet } from "components/SharedComponents";
+import {
+  Body2, Button, TextSheet, UnderlinedLink
+} from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import { t } from "i18next";
 import type { Node } from "react";
@@ -166,13 +168,13 @@ const LicensePhotosForm = ( ): Node => {
         <View className="mt-2 flex-1">
           <Body2 className="flex-wrap color-white">{text}</Body2>
           {links && links.map( link => (
-            <Body2
-              className="color-white underline font-bold mt-[9px]"
+            <UnderlinedLink
+              className="color-white mt-[9px]"
               key={link.label}
               onPress={link.onPress}
             >
               {link.label}
-            </Body2>
+            </UnderlinedLink>
           ) )}
         </View>
       </View>

src/components/ObsDetails/DataQualityAssessment.js

@@ -1,11 +1,11 @@
 // @flow
 import DQAVoteButtons from "components/ObsDetails/DetailsTab/DQAVoteButtons";
 import {
+  Body1,
   Body3,
   Divider,
   Heading4,
   INatIcon,
-  List1,
   List2,
   OfflineNotice,
   ScrollViewWrapper,
@@ -140,7 +140,7 @@ const DataQualityAssessment = ( {
               color={theme.colors.secondary}
             />
           )}
-          <List1 className="text-black">{titleOption( qualityGrade )}</List1>
+          <Body1 className="text-black">{titleOption( qualityGrade )}</Body1>
         </View>
         <List2 className="text-black">{titleDescription( qualityGrade )}</List2>
       </View>

src/components/SharedComponents/PhotoCount.js

@@ -1,10 +1,9 @@
 // @flow
 
-import { Body3, Body3Bold, INatIcon } from "components/SharedComponents";
+import { Body3, INatIcon } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
-import { Platform } from "react-native";
 import { useTheme } from "react-native-paper";
 import Svg, { Path } from "react-native-svg";
 import { dropShadow } from "styles/global";
@@ -31,10 +30,6 @@ const PhotoCount = ( {
     photoCount = 99;
   }
 
-  const TextComponent = Platform.OS === "ios"
-    ? Body3
-    : Body3Bold;
-
   const textStyle = {
     position: "absolute",
     zIndex: 10,
@@ -51,9 +46,9 @@ const PhotoCount = ( {
       style={[{ height: size, width: size }, shadow && dropShadow]}
       testID="photo-count"
     >
-      <TextComponent style={textStyle}>
+      <Body3 style={textStyle}>
         {photoCount}
-      </TextComponent>
+      </Body3>
       <Svg
         height={size}
         width={size}

src/components/SharedComponents/Typography/Body1.js

@@ -8,10 +8,11 @@ import type { Node } from "react";
 import React from "react";
 import { Text } from "react-native";
 
+// This is the same as List1 Typography in Figma
 const Body1 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-base font-medium text-darkGray",
+      "text-base trailing-tight text-darkGray",
       tailwindFontMedium
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Body1Bold.js

@@ -1,22 +0,0 @@
-// @flow
-
-import {
-  tailwindFontMedium
-} from "appConstants/fontFamilies.ts";
-import classnames from "classnames";
-import type { Node } from "react";
-import React from "react";
-import { Text } from "react-native";
-
-const Body1Bold = ( props: any ): Node => (
-  <Text
-    className={classnames(
-      "text-base font-medium text-darkGray",
-      tailwindFontMedium
-    )}
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...props}
-  />
-);
-
-export default Body1Bold;

src/components/SharedComponents/Typography/Body2.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Body2 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-md font-light text-darkGray",
+      "text-md trailing-tight text-darkGray",
       tailwindFontRegular
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Body3.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Body3 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-sm font-normal text-darkGray",
+      "text-xs trailing-tight text-darkGray",
       tailwindFontMedium
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Body4.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Body4 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-xs font-light text-darkGray",
+      "text-2xs text-darkGray",
       tailwindFontRegular
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Heading1.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Heading1 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-3xl text-darkGray",
+      "text-3xl tracking-tight",
       tailwindFontBold
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Heading3.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Heading3 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-lg font-semibold text-darkGray",
+      "text-lg text-darkGray",
       tailwindFontBold
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Heading4.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Heading4 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-md leading-[19px] tracking-[2px] text-darkGray",
+      "text-md tracking-widest text-darkGray",
       tailwindFontBold
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Heading5.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Heading5 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-2xs tracking-[1px] text-darkGray",
+      "text-3xs tracking-wide text-darkGray",
       tailwindFontBold
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/List1.js

@@ -1,22 +0,0 @@
-// @flow
-
-import {
-  tailwindFontMedium
-} from "appConstants/fontFamilies.ts";
-import classnames from "classnames";
-import type { Node } from "react";
-import React from "react";
-import { Text } from "react-native";
-
-const List1 = ( props: any ): Node => (
-  <Text
-    className={classnames(
-      "text-base font-medium text-darkGray",
-      tailwindFontMedium
-    )}
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...props}
-  />
-);
-
-export default List1;

src/components/SharedComponents/Typography/List2.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const List2 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-sm leading-[17px] font-light text-darkGray",
+      "text-sm trailing-tight text-darkGray",
       tailwindFontRegular
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Subheading1.js

@@ -11,7 +11,7 @@ import { Text } from "react-native";
 const Subheading1 = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-xl text-darkGray",
+      "text-xl trailing-tight text-darkGray",
       tailwindFontRegular
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/UnderlinedLink.js

@@ -8,10 +8,10 @@ import type { Node } from "react";
 import React from "react";
 import { Text } from "react-native";
 
-const Body3Bold = ( props: any ): Node => (
+const UnderlinedLink = ( props: any ): Node => (
   <Text
     className={classnames(
-      "text-sm font-medium text-darkGray",
+      "text-md text-darkGray underline",
       tailwindFontBold
     )}
     // eslint-disable-next-line react/jsx-props-no-spreading
@@ -19,4 +19,4 @@ const Body3Bold = ( props: any ): Node => (
   />
 );
 
-export default Body3Bold;
+export default UnderlinedLink;

src/components/SharedComponents/index.js

@@ -56,20 +56,18 @@ export { default as StickyToolbar } from "./StickyToolbar";
 export { default as Tabs } from "./Tabs/Tabs";
 export { default as TaxonResult } from "./TaxonResult";
 export { default as Body1 } from "./Typography/Body1";
-export { default as Body1Bold } from "./Typography/Body1Bold";
 export { default as Body2 } from "./Typography/Body2";
 export { default as Body3 } from "./Typography/Body3";
-export { default as Body3Bold } from "./Typography/Body3Bold";
 export { default as Body4 } from "./Typography/Body4";
 export { default as Heading1 } from "./Typography/Heading1";
 export { default as Heading2 } from "./Typography/Heading2";
 export { default as Heading3 } from "./Typography/Heading3";
 export { default as Heading4 } from "./Typography/Heading4";
 export { default as Heading5 } from "./Typography/Heading5";
-export { default as List1 } from "./Typography/List1";
 export { default as List2 } from "./Typography/List2";
 export { default as P } from "./Typography/P";
 export { default as Subheading1 } from "./Typography/Subheading1";
+export { default as UnderlinedLink } from "./Typography/UnderlinedLink";
 export { default as UploadStatus } from "./UploadStatus/UploadStatus";
 export { default as UserIcon } from "./UserIcon/UserIcon";
 export { default as UserListItem } from "./UserListItem";

tailwind.config.js

@@ -4,59 +4,80 @@ module.exports = {
   content: ["index.js", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
+      letterSpacing: {
+        tight: "-.25px",
+        wide: ".65px",
+        widest: "2px"
+      },
       fontSize: {
+        // Typography: Heading1
         "3xl": [
-          "26px",
+          "25px",
           {
-            lineHeight: "31px"
+            lineHeight: "30px"
           }
         ],
+        // Typography: Heading2
         "2xl": [
-          "22px",
-          {
-            lineHeight: "26px"
-          }
-        ],
-        xl: [
           "21px",
           {
-            lineHeight: "25px"
+            lineHeight: "25.2px"
           }
         ],
-        lg: [
-          "19px",
+        // Typography: Subheading1
+        xl: [
+          "20px",
           {
-            lineHeight: "23px"
+            lineHeight: "24px"
           }
         ],
-        base: [
+        // Typography: Heading3
+        lg: [
           "18px",
           {
-            lineHeight: "22px"
+            lineHeight: "21.6px"
           }
         ],
+        // Typography: Body1/List1
+        base: [
+          "17px",
+          {
+            lineHeight: "20.4px"
+          }
+        ],
+        // Typography: Heading4/Body2/UnderlinedLink
         md: [
-          "16px",
+          "15px",
           {
             lineHeight: "18px"
           }
         ],
+        // Typography: List2
         sm: [
           "14px",
+          {
+            lineHeight: "16.8px"
+          }
+        ],
+        // Typography: Body3
+        xs: [
+          "13px",
           {
             lineHeight: "18px"
           }
         ],
-        xs: [
-          "12px",
+        // Typography: Body4
+        "2xs": [
+          "11px",
           {
-            lineHeight: "14px"
+            lineHeight: "13.2px"
           }
         ],
-        "2xs": [
+        // Typography: Heading5
+        "3xs": [
           "8px",
           {
-            lineHeight: "10px"
+            lineHeight: "9.6px"
           }
         ]
       },

tests/unit/components/SharedComponents/ActivityCount/__snapshots__/ActivityCount.test.js.snap

@@ -42,12 +42,9 @@ exports[`ActivityCount renders reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },

tests/unit/components/SharedComponents/ActivityCount/__snapshots__/CommentsCount.test.js.snap

@@ -42,12 +42,9 @@ exports[`CommentsCount renders default reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },
@@ -109,12 +106,9 @@ exports[`CommentsCount renders filled reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },
@@ -176,12 +170,9 @@ exports[`CommentsCount renders white reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },

tests/unit/components/SharedComponents/ActivityCount/__snapshots__/IdentificationsCount.test.js.snap

@@ -42,12 +42,9 @@ exports[`IdentificationsCount renders default reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },
@@ -109,12 +106,9 @@ exports[`IdentificationsCount renders filled reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },
@@ -176,12 +170,9 @@ exports[`IdentificationsCount renders white reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },

tests/unit/components/SharedComponents/Buttons/__snapshots__/Button.dark.test.js.snap

@@ -72,12 +72,9 @@ exports[`Button focus in dark mode should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -176,12 +173,9 @@ exports[`Button focus in dark mode when disabled should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -298,12 +292,9 @@ exports[`Button neutral in dark mode should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -420,12 +411,9 @@ exports[`Button neutral in dark mode when disabled should render correctly 1`] =
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -527,12 +515,9 @@ exports[`Button primary in dark mode should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -634,12 +619,9 @@ exports[`Button primary in dark mode when disabled should render correctly 1`] =
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -741,12 +723,9 @@ exports[`Button warning in dark mode should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -845,12 +824,9 @@ exports[`Button warning in dark mode when disabled should render correctly 1`] =
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },

tests/unit/components/SharedComponents/Buttons/__snapshots__/Button.test.js.snap

@@ -72,12 +72,9 @@ exports[`Button focus should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -176,12 +173,9 @@ exports[`Button focus when disabled should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -298,12 +292,9 @@ exports[`Button neutral should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -420,12 +411,9 @@ exports[`Button neutral when disabled should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -527,12 +515,9 @@ exports[`Button primary should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -634,12 +619,9 @@ exports[`Button primary when disabled should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -741,12 +723,9 @@ exports[`Button warning should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },
@@ -845,12 +824,9 @@ exports[`Button warning when disabled should render correctly 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "lineHeight": 19,
-        },
         {
           "letterSpacing": 2,
         },

tests/unit/components/SharedComponents/InlineUser/__snapshots__/InlineUser.test.js.snap

@@ -70,12 +70,9 @@ exports[`InlineUser renders reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },
@@ -179,12 +176,9 @@ exports[`InlineUser when offline renders reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },
@@ -288,12 +282,9 @@ exports[`InlineUser when user has no icon set renders reliably 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },

tests/unit/components/SharedComponents/ObservationsFlashList/__snapshots__/ObsGridItem.test.js.snap

@@ -337,11 +337,8 @@ exports[`ObsGridItem for an observation with a photo should render 1`] = `
       style={
         [
           {
-            "fontSize": 18,
-            "lineHeight": 22,
-          },
-          {
-            "fontWeight": "500",
+            "fontSize": 17,
+            "lineHeight": 20.4,
           },
           {
             "color": "#454545",
@@ -679,11 +676,8 @@ exports[`ObsGridItem for an observation without a photo should render 1`] = `
       style={
         [
           {
-            "fontSize": 18,
-            "lineHeight": 22,
-          },
-          {
-            "fontWeight": "500",
+            "fontSize": 17,
+            "lineHeight": 20.4,
           },
           {
             "color": "#454545",

tests/unit/components/SharedComponents/PhotoCount/__snapshots__/PhotoCount.test.js.snap

@@ -28,12 +28,9 @@ exports[`PhotoCount renders correctly 1`] = `
     style={
       [
         {
-          "fontSize": 14,
+          "fontSize": 13,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "400",
-        },
         {
           "color": "#454545",
         },

tests/unit/components/SharedComponents/Tabs/__snapshots__/Tabs.test.js.snap

@@ -72,12 +72,9 @@ exports[`Tabs should render correctly 1`] = `
           style={
             [
               {
-                "fontSize": 16,
+                "fontSize": 15,
                 "lineHeight": 18,
               },
-              {
-                "lineHeight": 19,
-              },
               {
                 "letterSpacing": 2,
               },
@@ -178,12 +175,9 @@ exports[`Tabs should render correctly 1`] = `
           style={
             [
               {
-                "fontSize": 16,
+                "fontSize": 15,
                 "lineHeight": 18,
               },
-              {
-                "lineHeight": 19,
-              },
               {
                 "letterSpacing": 2,
               },

tests/unit/components/SharedComponents/Typography/List1.test.js

@@ -1,14 +0,0 @@
-import { render, screen } from "@testing-library/react-native";
-import { List1 } from "components/SharedComponents";
-import React from "react";
-
-const text = "List1";
-
-describe( "List1", () => {
-  it( "renders correctly", () => {
-    render( <List1>{text}</List1> );
-
-    // Snapshot test
-    expect( screen ).toMatchSnapshot();
-  } );
-} );

tests/unit/components/SharedComponents/Typography/__snapshots__/Body1.test.js.snap

@@ -5,11 +5,8 @@ exports[`Body1 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 18,
-        "lineHeight": 22,
-      },
-      {
-        "fontWeight": "500",
+        "fontSize": 17,
+        "lineHeight": 20.4,
       },
       {
         "color": "#454545",

tests/unit/components/SharedComponents/Typography/__snapshots__/Body2.test.js.snap

@@ -5,12 +5,9 @@ exports[`Body2 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 16,
+        "fontSize": 15,
         "lineHeight": 18,
       },
-      {
-        "fontWeight": "300",
-      },
       {
         "color": "#454545",
       },

tests/unit/components/SharedComponents/Typography/__snapshots__/Body3.test.js.snap

@@ -5,12 +5,9 @@ exports[`Body3 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 14,
+        "fontSize": 13,
         "lineHeight": 18,
       },
-      {
-        "fontWeight": "400",
-      },
       {
         "color": "#454545",
       },

tests/unit/components/SharedComponents/Typography/__snapshots__/Body4.test.js.snap

@@ -5,11 +5,8 @@ exports[`Body4 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 12,
-        "lineHeight": 14,
-      },
-      {
-        "fontWeight": "300",
+        "fontSize": 11,
+        "lineHeight": 13.2,
       },
       {
         "color": "#454545",

tests/unit/components/SharedComponents/Typography/__snapshots__/Heading1.test.js.snap

@@ -5,11 +5,11 @@ exports[`Heading1 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 26,
-        "lineHeight": 31,
+        "fontSize": 25,
+        "lineHeight": 30,
       },
       {
-        "color": "#454545",
+        "letterSpacing": -0.25,
       },
       {
         "fontFamily": "Lato-Bold",

tests/unit/components/SharedComponents/Typography/__snapshots__/Heading2.test.js.snap

@@ -5,8 +5,8 @@ exports[`Heading2 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 22,
-        "lineHeight": 26,
+        "fontSize": 21,
+        "lineHeight": 25.2,
       },
       {
         "color": "#454545",

tests/unit/components/SharedComponents/Typography/__snapshots__/Heading3.test.js.snap

@@ -5,11 +5,8 @@ exports[`Heading3 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 19,
-        "lineHeight": 23,
-      },
-      {
-        "fontWeight": "600",
+        "fontSize": 18,
+        "lineHeight": 21.6,
       },
       {
         "color": "#454545",

tests/unit/components/SharedComponents/Typography/__snapshots__/Heading4.test.js.snap

@@ -5,12 +5,9 @@ exports[`Heading4 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 16,
+        "fontSize": 15,
         "lineHeight": 18,
       },
-      {
-        "lineHeight": 19,
-      },
       {
         "letterSpacing": 2,
       },

tests/unit/components/SharedComponents/Typography/__snapshots__/Heading5.test.js.snap

@@ -6,10 +6,10 @@ exports[`Heading5 renders correctly 1`] = `
     [
       {
         "fontSize": 8,
-        "lineHeight": 10,
+        "lineHeight": 9.6,
       },
       {
-        "letterSpacing": 1,
+        "letterSpacing": 0.65,
       },
       {
         "color": "#454545",

tests/unit/components/SharedComponents/Typography/__snapshots__/List1.test.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`List1 renders correctly 1`] = `
-<Text
-  style={
-    [
-      {
-        "fontSize": 18,
-        "lineHeight": 22,
-      },
-      {
-        "fontWeight": "500",
-      },
-      {
-        "color": "#454545",
-      },
-      {
-        "fontFamily": "Lato-Medium",
-      },
-    ]
-  }
->
-  List1
-</Text>
-`;

tests/unit/components/SharedComponents/Typography/__snapshots__/List2.test.js.snap

@@ -6,13 +6,7 @@ exports[`List2 renders correctly 1`] = `
     [
       {
         "fontSize": 14,
-        "lineHeight": 18,
-      },
-      {
-        "lineHeight": 17,
-      },
-      {
-        "fontWeight": "300",
+        "lineHeight": 16.8,
       },
       {
         "color": "#454545",

tests/unit/components/SharedComponents/Typography/__snapshots__/Subheading1.test.js.snap

@@ -5,8 +5,8 @@ exports[`Subheading1 renders correctly 1`] = `
   style={
     [
       {
-        "fontSize": 21,
-        "lineHeight": 25,
+        "fontSize": 20,
+        "lineHeight": 24,
       },
       {
         "color": "#454545",

tests/unit/components/SharedComponents/__snapshots__/Checkbox.test.js.snap

@@ -139,12 +139,9 @@ exports[`Checkbox renders reliably 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "300",
-        },
         {
           "color": "#454545",
         },
@@ -306,12 +303,9 @@ exports[`Checkbox renders reliably being checked 1`] = `
     style={
       [
         {
-          "fontSize": 16,
+          "fontSize": 15,
           "lineHeight": 18,
         },
-        {
-          "fontWeight": "300",
-        },
         {
           "color": "#454545",
         },

tests/unit/components/SharedComponents/__snapshots__/TaxonResult.test.js.snap

@@ -315,11 +315,8 @@ exports[`TaxonResult should render correctly 1`] = `
           style={
             [
               {
-                "fontSize": 18,
-                "lineHeight": 22,
-              },
-              {
-                "fontWeight": "500",
+                "fontSize": 17,
+                "lineHeight": 20.4,
               },
               {
                 "color": "#454545",
@@ -341,12 +338,9 @@ exports[`TaxonResult should render correctly 1`] = `
           style={
             [
               {
-                "fontSize": 14,
+                "fontSize": 13,
                 "lineHeight": 18,
               },
-              {
-                "fontWeight": "400",
-              },
               {
                 "color": "#454545",
               },
@@ -366,12 +360,9 @@ exports[`TaxonResult should render correctly 1`] = `
             style={
               [
                 {
-                  "fontSize": 14,
+                  "fontSize": 13,
                   "lineHeight": 18,
                 },
-                {
-                  "fontWeight": "400",
-                },
                 {
                   "color": "#454545",
                 },