diff --git a/dapp/src/components/Typography/index.tsx b/dapp/src/components/Typography/index.tsx
new file mode 100644
index 000000000..6e1231239
--- /dev/null
+++ b/dapp/src/components/Typography/index.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from "react"
+import { Text, TextProps } from "@chakra-ui/react"
+
+export function TextXl(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
+  )
+}
+
+export function TextLg(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
+  )
+}
+
+export function TextMd(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
+  )
+}
+
+export function TextSm(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
+  )
+}
+
+export function TextXs(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
+  )
+}
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 980c42838..366e952a6 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -2,9 +2,13 @@ import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import { colors } from "./utils"
+import { fontSizes, fontWeights, lineHeights } from "./utils/fonts"
 
 const defaultTheme = {
   colors,
+  fontSizes,
+  fontWeights,
+  lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
new file mode 100644
index 000000000..18a482760
--- /dev/null
+++ b/dapp/src/theme/utils/fonts.ts
@@ -0,0 +1,22 @@
+export const fontSizes = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+}
+
+export const fontWeights = {
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  black: 900,
+}
+
+export const lineHeights = {
+  xs: "1.125rem",
+  sm: "1.25rem",
+  md: "1.5rem",
+  lg: "1.75rem",
+  xl: "1.875rem",
+}