diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
index 40db743dcd..68138e3b91 100644
--- a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
+++ b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
@@ -12,11 +12,7 @@ exports[`Input renders 1`] = `
       for="the-input"
     >
       <span
-        class="
-          medium
-          boldFont
-          color
-        "
+        class="medium boldFont color"
       >
         The input
       </span>
@@ -49,11 +45,7 @@ exports[`Input renders with a feedback state and icon 1`] = `
       for="the-input"
     >
       <span
-        class="
-          medium
-          boldFont
-          color
-        "
+        class="medium boldFont color"
       >
         The input
       </span>
diff --git a/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap b/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap
index 65503c23f6..4095867ec5 100644
--- a/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap
+++ b/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap
@@ -17,13 +17,7 @@ exports[`<Notification /> renders 1`] = `
           class="row"
         >
           <p
-            class="
-              noSpacing
-              color
-              medium
-              mediumFont
-              leftAlign
-            "
+            class="noSpacing color medium mediumFont leftAlign"
           >
             Some content
           </p>
diff --git a/src/components/Typography/Paragraph/Paragraph.jsx b/src/components/Typography/Paragraph/Paragraph.jsx
index a2b6b7a446..acea055af9 100644
--- a/src/components/Typography/Paragraph/Paragraph.jsx
+++ b/src/components/Typography/Paragraph/Paragraph.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '../../../utils/safeRest'
+import joinClassNames from '../../../utils/joinClassNames'
 
 import spacingStyles from '../../Spacing/Spacing.modules.scss'
 import styles from './Paragraph.modules.scss'
@@ -15,13 +16,13 @@ import textStyles from '../Text/Text.modules.scss'
 const Paragraph = ({ bold, size, align, invert, children, ...rest }, context) => {
   const paragraphColor = invert ? textStyles.invertedColor : textStyles.color
 
-  const classes = `
-    ${spacingStyles.noSpacing}
-    ${context.inheritColor ? textStyles.inheritColor : paragraphColor}
-    ${textStyles[size]}
-    ${bold ? textStyles.boldFont : textStyles[`${size}Font`]}
-    ${styles[`${align}Align`]}
-  `
+  const classes = joinClassNames(
+    spacingStyles.noSpacing,
+    context.inheritColor ? textStyles.inheritColor : paragraphColor,
+    textStyles[size],
+    bold ? textStyles.boldFont : textStyles[`${size}Font`],
+    styles[`${align}Align`]
+  )
 
   return (
     <p {...safeRest(rest)} className={classes}>
diff --git a/src/components/Typography/Paragraph/__tests__/__snapshots__/Paragraph.spec.jsx.snap b/src/components/Typography/Paragraph/__tests__/__snapshots__/Paragraph.spec.jsx.snap
index 9f6747542c..513463478c 100644
--- a/src/components/Typography/Paragraph/__tests__/__snapshots__/Paragraph.spec.jsx.snap
+++ b/src/components/Typography/Paragraph/__tests__/__snapshots__/Paragraph.spec.jsx.snap
@@ -2,13 +2,7 @@
 
 exports[`Paragraph renders 1`] = `
 <p
-  className="
-    noSpacing
-    color
-    medium
-    mediumFont
-    leftAlign
-  "
+  className="noSpacing color medium mediumFont leftAlign"
 >
   Some content
 </p>
diff --git a/src/components/Typography/Text/Text.jsx b/src/components/Typography/Text/Text.jsx
index 769ae65c73..e7c4dc7eaa 100644
--- a/src/components/Typography/Text/Text.jsx
+++ b/src/components/Typography/Text/Text.jsx
@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '../../../utils/safeRest'
+import joinClassNames from '../../../utils/joinClassNames'
+
 import TextSup from './TextSup/TextSup'
 import TextSub from './TextSub/TextSub'
 
@@ -15,11 +17,11 @@ import styles from './Text.modules.scss'
 const Text = ({ bold, size, invert, children, ...rest }, context) => {
   const textColor = invert ? styles.invertedColor : styles.color
 
-  const classes = `
-    ${styles[size]}
-    ${bold ? styles.boldFont : styles[`${size}Font`]}
-    ${context.inheritColor ? styles.inheritColor : textColor}
-  `
+  const classes = joinClassNames(
+    styles[size],
+    bold ? styles.boldFont : styles[`${size}Font`],
+    context.inheritColor ? styles.inheritColor : textColor
+  )
 
   return (
     <span {...safeRest(rest)} className={classes}>
diff --git a/src/components/Typography/Text/__tests__/__snapshots__/Text.spec.jsx.snap b/src/components/Typography/Text/__tests__/__snapshots__/Text.spec.jsx.snap
index 140252e0ab..a369075c12 100644
--- a/src/components/Typography/Text/__tests__/__snapshots__/Text.spec.jsx.snap
+++ b/src/components/Typography/Text/__tests__/__snapshots__/Text.spec.jsx.snap
@@ -2,11 +2,7 @@
 
 exports[`Text renders 1`] = `
 <span
-  className="
-    base
-    baseFont
-    color
-  "
+  className="base baseFont color"
 >
   Some content
 </span>