diff --git a/components/typography/styles.js b/components/typography/styles.js
index 702f988a84a..3d9ff2ba025 100644
--- a/components/typography/styles.js
+++ b/components/typography/styles.js
@@ -149,6 +149,7 @@ export const _generateBodySmallStyles = (selector, includeSkeleton = true) => {
 		}` : unsafeCSS('');
 	return css`
 		${selector} {
+			--d2l-overflow-clip-margin: 0.1em;
 			color: var(--d2l-theme-text-color-static-subtle);
 			font-size: 0.7rem;
 			font-weight: 400;
@@ -186,6 +187,7 @@ export const _generateHeading1Styles = (selector, includeFocus = false) => {
 		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
+				--d2l-overflow-clip-margin: 0.15em;
 				font-size: 1.5rem;
 				line-height: 1.8rem;
 			}
@@ -224,6 +226,7 @@ export const _generateHeading2Styles = (selector, includeFocus = false) => {
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
+			--d2l-overflow-clip-margin: 0.15em;
 			font-size: 1.5rem;
 			font-weight: 400;
 			line-height: 1.8rem;
@@ -352,6 +355,7 @@ export const _generateLabelStyles = (selector, includeSkeleton = true) => {
 	` : unsafeCSS('');
 	return css`
 		${selector} {
+			--d2l-overflow-clip-margin: 0.1em;
 			font-size: 0.7rem;
 			font-weight: 700;
 			letter-spacing: 0.2px;
diff --git a/helpers/overflow.js b/helpers/overflow.js
index a0ef4f19a70..4b3d08d9d8d 100644
--- a/helpers/overflow.js
+++ b/helpers/overflow.js
@@ -13,7 +13,7 @@ export function getOverflowDeclarations({ textOverflow = '', lines = 0, lit = tr
 		${lines
 			? set`
 			display: -webkit-box;
-			overflow-clip-margin: 0.2em;
+			overflow-clip-margin: var(--d2l-overflow-clip-margin, 0.2em);
 			overflow-wrap: anywhere;
 			overflow-y: clip;
 			text-overflow: ${textOverflow || 'ellipsis'};
diff --git a/helpers/test/overflow.test.js b/helpers/test/overflow.test.js
index 15e4aab9dd1..b71c283b649 100644
--- a/helpers/test/overflow.test.js
+++ b/helpers/test/overflow.test.js
@@ -27,7 +27,7 @@ describe('overflow', () => {
 				min-width: 0; /* clamps width of flex items */
 				overflow-x: clip;
 				display: -webkit-box;
-				overflow-clip-margin: 0.2em;
+				overflow-clip-margin: var(--d2l-overflow-clip-margin, 0.2em);
 				overflow-wrap: anywhere;
 				overflow-y: clip;
 				text-overflow: ellipsis;