diff --git a/lib/components/Checkbox/index.js b/lib/components/Checkbox/index.js
index d042af1f..1769e411 100644
--- a/lib/components/Checkbox/index.js
+++ b/lib/components/Checkbox/index.js
@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import styled, { keyframes, ThemeProvider } from "styled-components";
-import { space, layout } from "styled-system";
+import { space, layout, typography } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 
 /* Animations */
@@ -272,6 +272,7 @@ const Check = styled.div`
 const Text = styled.div`
   font-size: ${(props) => themeGet("fontSizes.2")(props)};
   padding-left: 8px;
+  ${typography}
 `;
 /**
  * The default checkbox (or inverted if on dark background) should be used for the majority of the UI; however, the coloured ones can be used in situations where the colour corresponds with some indication of status, e.g. in a task list, green could denote task completed, red could denote task overdue.
@@ -325,7 +326,7 @@ export default function Checkbox({
         <Box colour={colour} onClick={onClick}>
           <Check />
         </Box>
-        <Text>{label}</Text>
+        <Text {...props}>{label}</Text>
       </Label>
     </Item>
   );
diff --git a/lib/components/RadioButton/index.js b/lib/components/RadioButton/index.js
index e8f99824..b88f23e9 100644
--- a/lib/components/RadioButton/index.js
+++ b/lib/components/RadioButton/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
-import { space, layout, compose, variant } from "styled-system";
+import { space, layout, compose, variant, typography } from "styled-system";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 
@@ -177,12 +177,14 @@ const RadioButtonDot = styled("div")(
     })
 );
 
-const RadioButtonText = styled("div")((props) =>
-  css({
-    paddingLeft: "s",
-    fontSize: themeGet("fontSizes.2")(props),
-    fontWeight: themeGet("fontWeights.1")(props)
-  })
+const RadioButtonText = styled("div")(
+  (props) =>
+    css({
+      paddingLeft: "s",
+      fontSize: themeGet("fontSizes.2")(props),
+      fontWeight: themeGet("fontWeights.1")(props)
+    }),
+  typography
 );
 
 export default function RadioButton({
@@ -212,7 +214,7 @@ export default function RadioButton({
         <RadioButtonCircle variant={variant}>
           <RadioButtonDot variant={variant} />
         </RadioButtonCircle>
-        <RadioButtonText>{label}</RadioButtonText>
+        <RadioButtonText {...props}>{label}</RadioButtonText>
       </RadioButtonLabel>
     </RadioButtonItem>
   );
diff --git a/package-lock.json b/package-lock.json
index 871e34c2..fbd1508c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.23",
+  "version": "3.2.24",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orcs-design-system",
-      "version": "3.2.23",
+      "version": "3.2.24",
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
diff --git a/package.json b/package.json
index aa0ee12b..d11a2c24 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.23",
+  "version": "3.2.24",
   "engines": {
     "node": "20.12.2"
   },