diff --git a/src/lib/core/typography/_all-typography.scss b/src/lib/core/typography/_all-typography.scss
index ebdc1ac1ab42..d4c8bbdfbfdd 100644
--- a/src/lib/core/typography/_all-typography.scss
+++ b/src/lib/core/typography/_all-typography.scss
@@ -5,6 +5,7 @@
 @import '../../card/card-theme';
 @import '../../checkbox/checkbox-theme';
 @import '../../chips/chips-theme';
+@import '../../datepicker/datepicker-theme';
 @import '../../dialog/dialog-theme';
 @import '../../grid-list/grid-list-theme';
 @import '../../icon/icon-theme';
@@ -34,6 +35,7 @@
   @include mat-card-typography($config);
   @include mat-checkbox-typography($config);
   @include mat-chips-typography($config);
+  @include mat-datepicker-typography($config);
   @include mat-dialog-typography($config);
   @include mat-grid-list-typography($config);
   @include mat-icon-typography($config);
diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index a16e066868e4..45597e3b162d 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -1,5 +1,10 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+
+$mat-calendar-body-font-size: 13px !default;
+$mat-calendar-weekday-table-font-size: 11px !default;
 
 
 @mixin mat-datepicker-theme($theme) {
@@ -78,3 +83,28 @@
     border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);
   }
 }
+
+@mixin mat-datepicker-typography($config) {
+  .mat-calendar {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-calendar-body {
+    font-size: $mat-calendar-body-font-size;
+  }
+
+  .mat-calendar-body-label,
+  .mat-calendar-period-button {
+    font: {
+      size: mat-font-size($config, button);
+      weight: mat-font-weight($config, button);
+    }
+  }
+
+  .mat-calendar-table-header th {
+    font: {
+      size: $mat-calendar-weekday-table-font-size;
+      weight: mat-font-weight($config, body-1);
+    }
+  }
+}
diff --git a/src/lib/datepicker/calendar-body.scss b/src/lib/datepicker/calendar-body.scss
index c3b90c946a09..5ea5b9d68952 100644
--- a/src/lib/datepicker/calendar-body.scss
+++ b/src/lib/datepicker/calendar-body.scss
@@ -1,5 +1,3 @@
-$mat-calendar-body-font-size: 13px !default;
-$mat-calendar-body-header-font-size: 14px !default;
 $mat-calendar-body-label-padding-start: 5% !default;
 $mat-calendar-body-label-translation: -6px !default;
 $mat-calendar-body-cell-min-size: 32px !default;
@@ -13,7 +11,6 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
 
 
 .mat-calendar-body {
-  font-size: $mat-calendar-body-font-size;
   min-width: $mat-calendar-body-min-size;
 }
 
@@ -24,8 +21,6 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   line-height: 0;
   transform: translateX($mat-calendar-body-label-translation);
   text-align: left;
-  font-size: $mat-calendar-body-header-font-size;
-  font-weight: bold;
 }
 
 .mat-calendar-body-cell {
diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss
index 5831e50fdaef..0d120188f1f4 100644
--- a/src/lib/datepicker/calendar.scss
+++ b/src/lib/datepicker/calendar.scss
@@ -6,10 +6,8 @@ $mat-calendar-controls-vertical-padding: 5%;
 $mat-calendar-controls-start-padding: calc(100% / 14 - 22px);
 // Same as above, but on other side for arrows.
 $mat-calendar-controls-end-padding: calc(100% / 14 - 22px);
-$mat-calendar-period-font-size: 14px;
 $mat-calendar-arrow-size: 5px !default;
 $mat-calendar-arrow-disabled-opacity: 0.5 !default;
-$mat-calendar-weekday-table-font-size: 11px !default;
 
 // Values chosen to approximate https://material.io/icons/#ic_navigate_before and
 // https://material.io/icons/#ic_navigate_next as closely as possible.
@@ -43,9 +41,6 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 }
 
 .mat-calendar-period-button {
-  font: inherit;
-  font-size: $mat-calendar-period-font-size;
-  font-weight: bold;
   min-width: 0;
 }
 
@@ -108,8 +103,6 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mat-calendar-table-header th {
   text-align: center;
-  font-size: $mat-calendar-weekday-table-font-size;
-  font-weight: normal;
   padding: 0 0 $mat-calendar-padding 0;
 }