diff --git a/d2l-typography-shared-styles.html b/d2l-typography-shared-styles.html
index 7d25da9..01bdbb8 100644
--- a/d2l-typography-shared-styles.html
+++ b/d2l-typography-shared-styles.html
@@ -3,7 +3,7 @@
 <dom-module id="d2l-typography-shared-styles">
 	<template>
 		<style>
-			:root {
+			:host {
 				--d2l-body-standard-text: {
 					font-size: 0.95rem;
 					font-weight: 400;
diff --git a/d2l-typography.html b/d2l-typography.html
index 058eefd..e088036 100644
--- a/d2l-typography.html
+++ b/d2l-typography.html
@@ -1,10 +1,9 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../d2l-colors/d2l-colors.html">
-<link rel="import" href="d2l-typography-shared-styles.html">
 <link href="https://s.brightspace.com/lib/fonts/0.3.0/fonts.css" rel="stylesheet">
 <dom-module id="d2l-typography">
 	<template>
-		<style include="d2l-colors d2l-typography-shared-styles">
+		<style include="d2l-colors">
 
 			.d2l-typography,
 			.vui-typography {
@@ -12,20 +11,29 @@
 				display: block;
 				font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
 				letter-spacing: 0.01rem;
-				@apply(--d2l-body-standard-text);
+				font-size: 0.95rem;
+				font-weight: 400;
+				line-height: 1.4rem;
 				@apply(--d2l-font-custom);
 			}
 
 			.d2l-typography .d2l-body-standard {
-				@apply(--d2l-body-standard-text);
+				font-size: 0.95rem;
+				font-weight: 400;
+				line-height: 1.4rem;
 			}
 
 			.d2l-typography .d2l-body-compact {
-				@apply(--d2l-body-compact-text);
+				font-size: 0.8rem;
+				font-weight: 400;
+				line-height: 1.2rem;
 			}
 
 			.d2l-typography .d2l-body-small {
-				@apply(--d2l-body-small-text);
+				font-size: 0.7rem;
+				font-weight: 400;
+				line-height: 1.05rem;
+				margin: auto;
 			}
 
 			.d2l-typography p,