diff --git a/src/scss/atlas/variables/_cards.scss b/src/scss/atlas/variables/_cards.scss
index 49ba543970..9388b3f443 100644
--- a/src/scss/atlas/variables/_cards.scss
+++ b/src/scss/atlas/variables/_cards.scss
@@ -9,6 +9,13 @@ $card-body-padding-top: 0.75rem !default;
 
 $card-inner-border-radius: if($card-border-width > 0, calc(#{$card-border-radius} - #{$card-border-width}), $card-border-radius) !default;
 
+$card-title: (
+	color: $body-color,
+	font-size: 1rem,
+	font-weight: $font-weight-semi-bold,
+	line-height: $line-height-base
+) !default;
+
 $card-link: (
 	color: $secondary,
 	hover-color: $secondary
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
index bdc99ecb51..fb8f60dfd3 100644
--- a/src/scss/components/_cards.scss
+++ b/src/scss/components/_cards.scss
@@ -39,11 +39,7 @@
 }
 
 .card-title {
-	color: $card-title-color;
-	font-size: $card-title-font-size;
-	font-weight: $card-title-font-weight;
-	margin-bottom: $card-title-margin-bottom;
-	margin-top: $card-title-margin-top;
+	@include clay-text-typography($card-title);
 }
 
 .card-subtitle {
diff --git a/src/scss/variables/_cards.scss b/src/scss/variables/_cards.scss
index bf5c0694f2..113f29b2d2 100644
--- a/src/scss/variables/_cards.scss
+++ b/src/scss/variables/_cards.scss
@@ -15,17 +15,17 @@ $card-section-header-margin-bottom: 1.5rem !default;
 $card-section-header-padding: 0 ($grid-gutter-width / 2) !default;
 $card-section-header-text-transform: uppercase !default;
 
-$card-title-color: null !default;
-$card-title-font-size: 1rem !default; // 16px
-$card-title-font-weight: $font-weight-semi-bold !default;
-$card-title-margin-bottom: 0.5rem !default; // 8px
-$card-title-margin-top: null !default;
+$card-title: (
+	font-size: 1rem,
+	font-weight: $font-weight-semi-bold,
+	line-height: $line-height-base
+) !default;
 
 $card-subtitle-color: $card-section-header-color !default;
 $card-subtitle-font-size: 0.875rem !default; // 14px
 $card-subtitle-font-weight: null !default;
 $card-subtitle-margin-bottom: 0.5rem !default; // 8px
-$card-subtitle-margin-top: -$card-title-margin-bottom !default; // -8px
+$card-subtitle-margin-top: 0 !default;
 
 $card-link: (
 	color: $link-color,