diff --git a/src/less/components/form.less b/src/less/components/form.less
index aa5e810a62..358f06d9e8 100644
--- a/src/less/components/form.less
+++ b/src/less/components/form.less
@@ -232,14 +232,20 @@ legend {
 	}
 }
 
+// typography here comes from typography `h4, .h4` (in typography.less)
 .form-group {
 	label {
-		font-size: 1.25rem;
-		line-height: 1.875rem;
+		font-size: 1.125rem;
+		line-height: 1.625rem;
 		margin-bottom: 0.5rem;
 		color: var(--brand-secondary);
 		font-family: var(--brand-headline);
 		font-weight: var(--font-weight-header, 400);
+
+		@media screen and (min-width: @screen-sm-min) {
+			font-size: 1.25rem;
+			line-height: 1.875rem;
+		}
 	}
 
 	&.small {
diff --git a/src/less/core/typography.less b/src/less/core/typography.less
index 0576ecd1e2..69da626ed1 100644
--- a/src/less/core/typography.less
+++ b/src/less/core/typography.less
@@ -118,6 +118,7 @@ h3,
 	}
 }
 
+// any change here should also be applied to `.form-group label` (in form.less)
 h4,
 .h4 {
 	font-family: var(--brand-headline);
@@ -319,6 +320,7 @@ blockquote,
 		}
 	}
 
+	// any change here should also be applied to `.form-group label` (in form.less)
 	h4,
 	.h4 {
 		font-size: 1.25rem;