diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index fadf35e27cca..2cce8f9be446 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -40,6 +40,7 @@ import {StyleDemo} from './style/style-demo';
 import {DataTableDemo} from './data-table/data-table-demo';
 import {PeopleDatabase} from './data-table/people-database';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
+import {TypographyDemo} from './typography/typography-demo';
 import {
   CdkDataTableModule,
   FullscreenOverlayContainer,
@@ -168,6 +169,7 @@ export class DemoMaterialModule {}
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    TypographyDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
index 6a6ed55300d4..3abcf2b99ca0 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/src/demo-app/demo-app/demo-app.html
@@ -21,7 +21,7 @@
   <div>
     <md-toolbar color="primary">
       <button md-icon-button (click)="start.open()">
-        <md-icon class="md-24" >menu</md-icon>
+        <md-icon class="md-24">menu</md-icon>
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
@@ -30,9 +30,10 @@ <h1>Angular Material Demos</h1>
           <button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
             Change detection: {{changeDetectionStrategy}}
           </button>
-          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-            Fullscreen
+          <button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            <md-icon class="md-24">fullscreen</md-icon>
           </button>
+          <button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
           <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
             {{root.dir.toUpperCase()}}
           </button>
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index e36f6ac8fd07..57be232775fe 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -65,7 +65,8 @@ export class DemoApp {
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'},
-    {name: 'Style', route: 'style'}
+    {name: 'Style', route: 'style'},
+    {name: 'Typography', route: 'typography'}
   ];
 
   constructor(private _element: ElementRef) {
diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts
index 66a10286c9de..a23ab93b5561 100644
--- a/src/demo-app/demo-app/routes.ts
+++ b/src/demo-app/demo-app/routes.ts
@@ -34,6 +34,7 @@ import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DataTableDemo} from '../data-table/data-table-demo';
+import {TypographyDemo} from '../typography/typography-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -70,4 +71,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarDemo},
   {path: 'platform', component: PlatformDemo},
   {path: 'style', component: StyleDemo},
+  {path: 'typography', component: TypographyDemo}
 ];
diff --git a/src/demo-app/index.html b/src/demo-app/index.html
index 25fe6b2ebd94..65797e4b8fed 100644
--- a/src/demo-app/index.html
+++ b/src/demo-app/index.html
@@ -10,6 +10,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="dist/packages/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
diff --git a/src/demo-app/typography/typography-demo.html b/src/demo-app/typography/typography-demo.html
new file mode 100644
index 000000000000..24a4a64aa822
--- /dev/null
+++ b/src/demo-app/typography/typography-demo.html
@@ -0,0 +1,37 @@
+<!-- via https://en.wikipedia.org/wiki/Pangram -->
+<h1 class="mat-h0">How vexingly quick daft zebras jump!</h1>
+<h1 class="mat-h1">Jackdaws love my big sphinx of quartz.</h1>
+<h2 class="mat-h2">The five boxing wizards jump quickly.</h2>
+<h3 class="mat-h3">Pack my box with five dozen liquor jugs.</h3>
+<h4 class="mat-h4">Bright vixens jump; dozy fowl quack.</h4>
+<h5 class="mat-h5">Sphinx of black quartz, judge my vow.</h5>
+<h6 class="mat-h6">The quick brown fox jumps over the lazy dog.</h6>
+
+<div class="mat-body">
+  <p>
+    Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
+    mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
+    chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
+    jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
+    chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
+    mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
+  </p>
+
+  <p>
+    Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
+    jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
+    darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
+    jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
+    obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
+    twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
+  </p>
+
+  <p>
+    Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
+    amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
+    skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
+    Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
+    chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
+    Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
+  </p>
+</div>
diff --git a/src/demo-app/typography/typography-demo.scss b/src/demo-app/typography/typography-demo.scss
new file mode 100644
index 000000000000..f4f8e2db5c53
--- /dev/null
+++ b/src/demo-app/typography/typography-demo.scss
@@ -0,0 +1,3 @@
+.mat-body {
+  max-width: 800px;
+}
diff --git a/src/demo-app/typography/typography-demo.ts b/src/demo-app/typography/typography-demo.ts
new file mode 100644
index 000000000000..15b893168f86
--- /dev/null
+++ b/src/demo-app/typography/typography-demo.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'typography-demo',
+  templateUrl: 'typography-demo.html',
+  styleUrls: ['typography-demo.css'],
+})
+export class TypographyDemo { }
diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss
index 7cce6dfe1c56..2701cd6ce26e 100644
--- a/src/lib/autocomplete/_autocomplete-theme.scss
+++ b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -16,4 +16,6 @@
     }
   }
 
-}
\ No newline at end of file
+}
+
+@mixin mat-autocomplete-typography($config) { }
diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
index bebdd1e7be3a..f17e89722399 100644
--- a/src/lib/button-toggle/_button-toggle-theme.scss
+++ b/src/lib/button-toggle/_button-toggle-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 // Applies a focus style to an md-button-toggle element for each of the supported palettes.
 @mixin _mat-button-toggle-focus-color($theme) {
@@ -36,3 +37,9 @@
     }
   }
 }
+
+@mixin mat-button-toggle-typography($config) {
+  .mat-button-toggle {
+    font-family: mat-font-family($config);
+  }
+}
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index 2cbb1334e96a..4660cb46fe9a 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -4,7 +4,7 @@
 @import '../core/style/layout-common';
 
 $mat-button-toggle-padding: 0 16px !default;
-$mat-button-toggle-line-height: 36px !default;
+$mat-button-toggle-height: 36px !default;
 $mat-button-toggle-border-radius: 2px !default;
 
 .mat-button-toggle-group {
@@ -36,7 +36,6 @@ $mat-button-toggle-border-radius: 2px !default;
 
 .mat-button-toggle {
   white-space: nowrap;
-  font-family: $mat-font-family;
   position: relative;
 }
 
@@ -47,7 +46,7 @@ $mat-button-toggle-border-radius: 2px !default;
 .mat-button-toggle-label-content {
   @include user-select(none);
   display: inline-block;
-  line-height: $mat-button-toggle-line-height;
+  line-height: $mat-button-toggle-height;
   padding: $mat-button-toggle-padding;
   cursor: pointer;
 }
diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index e880197e0e5b..bb04296cef58 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -38,11 +38,6 @@ $mat-mini-fab-padding: 8px !default;
   white-space: nowrap;
   text-decoration: none;
   vertical-align: baseline;
-
-  // Typography.
-  font-size: $mat-body-font-size-base;
-  font-family: $mat-font-family;
-  font-weight: 500;
   text-align: center;
 
   // Sizing.
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index 1fd13ec07862..c0f2c88548cd 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 // Applies a focus style to an md-button element for each of the supported palettes.
 @mixin _mat-button-focus-color($theme) {
@@ -117,4 +118,8 @@
   }
 }
 
-
+@mixin mat-button-typography($config) {
+  .mat-button, .mat-raised-button, .mat-icon-button {
+    @include mat-typography-level-to-styles($config, button);
+  }
+}
diff --git a/src/lib/card/_card-theme.scss b/src/lib/card/_card-theme.scss
index ea4e35518bbf..bcec7add4bea 100644
--- a/src/lib/card/_card-theme.scss
+++ b/src/lib/card/_card-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-card-theme($theme) {
@@ -15,3 +16,22 @@
     color: mat-color($foreground, secondary-text);
   }
 }
+
+@mixin mat-card-typography($config) {
+  .mat-card {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-card-title {
+    font: {
+      size: mat-font-size($config, headline);
+      weight: mat-font-weight($config, headline);
+    }
+  }
+
+  .mat-card-subtitle,
+  .mat-card-content,
+  .mat-card-header .mat-card-title {
+    font-size: mat-font-size($config, body-1);
+  }
+}
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index 86e08d58708b..8a80c5d5a81d 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -14,7 +14,6 @@ $mat-card-header-size: 40px !default;
   position: relative;
   padding: $mat-card-default-padding;
   border-radius: $mat-card-border-radius;
-  font-family: $mat-font-family;
 
   &:not([class*='mat-elevation-z']) {
     @include mat-elevation(2);
@@ -35,20 +34,8 @@ $mat-card-header-size: 40px !default;
   margin-bottom: 16px;
 }
 
-.mat-card-title {
+.mat-card-title, .mat-card-subtitle, .mat-card-content {
   @extend %mat-card-section-base;
-  font-size: 24px;
-  font-weight: 400;
-}
-
-.mat-card-subtitle {
-  @extend %mat-card-section-base;
-  font-size: $mat-body-font-size-base;
-}
-
-.mat-card-content {
-  @extend %mat-card-section-base;
-  font-size: $mat-body-font-size-base;
 }
 
 .mat-card-actions {
@@ -106,10 +93,6 @@ $mat-card-header-size: 40px !default;
   flex-shrink: 0;
 }
 
-.mat-card-header .mat-card-title {
-  font-size: $mat-body-font-size-base;
-}
-
 // TITLE-GROUP STYLES
 
 // images grouped with title in title-group layout
diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
index 1df0b0442ace..806e0391c603 100644
--- a/src/lib/checkbox/_checkbox-theme.scss
+++ b/src/lib/checkbox/_checkbox-theme.scss
@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-checkbox-theme($theme) {
@@ -83,3 +84,14 @@
     }
   }
 }
+
+@mixin mat-checkbox-typography($config) {
+  .mat-checkbox {
+    font-family: mat-font-family($config);
+  }
+
+  // TODO(kara): Remove this style when fixing vertical baseline
+  .mat-checkbox-layout .mat-checkbox-label {
+    line-height: mat-line-height($config, body-2);
+  }
+}
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index a22c08165d7d..028a20456a77 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -187,8 +187,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox {
-  font-family: $mat-font-family;
-
   // Animation
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
@@ -233,11 +231,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 }
 
-// TODO(kara): Remove this style when fixing vertical baseline
-.mat-checkbox-layout .mat-checkbox-label {
-  line-height: 24px;
-}
-
 .mat-checkbox-frame {
   @extend %mat-checkbox-outer-box;
 
diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
index fce197556d1a..b55f5d1dd7f2 100644
--- a/src/lib/chips/_chips-theme.scss
+++ b/src/lib/chips/_chips-theme.scss
@@ -1,5 +1,11 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+// TODO(crisbeto): these values don't correspond to any of the typography breakpoints.
+$mat-chip-font-size: 13px;
+$mat-chip-line-height: 16px;
+
 
 @mixin mat-chips-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
@@ -47,3 +53,10 @@
     }
   }
 }
+
+@mixin mat-chips-typography($config) {
+  .mat-chip:not(.mat-basic-chip) {
+    font-size: $mat-chip-font-size;
+    line-height: $mat-chip-line-height;
+  }
+}
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
index cae9826a096c..7de2395d833c 100644
--- a/src/lib/chips/chips.scss
+++ b/src/lib/chips/chips.scss
@@ -1,7 +1,5 @@
 $mat-chip-vertical-padding: 8px;
 $mat-chip-horizontal-padding: 12px;
-$mat-chip-font-size: 13px;
-$mat-chip-line-height: 16px;
 
 $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
 
@@ -17,9 +15,6 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
   padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding $mat-chip-horizontal-padding;
   border-radius: $mat-chip-horizontal-padding * 2;
 
-  font-size: $mat-chip-font-size;
-  line-height: $mat-chip-line-height;
-
   // Apply a margin to adjacent sibling chips.
   & + & {
     margin: 0 0 0 $mat-chips-chip-margin;
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
index 2eeb5405d386..d4a98b1e2c32 100644
--- a/src/lib/core/_core.scss
+++ b/src/lib/core/_core.scss
@@ -6,6 +6,7 @@
 @import 'option/option';
 @import 'option/option-theme';
 @import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
+@import 'typography/all-typography';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mat-core() {
@@ -18,6 +19,7 @@
     }
   }
 
+  @include angular-material-typography();
   @include mat-ripple();
   @include mat-option();
   @include cdk-a11y();
diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss
index c588444606cf..bf04240f795d 100644
--- a/src/lib/core/option/_option-theme.scss
+++ b/src/lib/core/option/_option-theme.scss
@@ -1,5 +1,6 @@
 @import '../theming/palette';
 @import '../theming/theming';
+@import '../typography/typography-utils';
 
 @mixin mat-option-theme($theme) {
   $foreground: map-get($theme, foreground);
@@ -42,3 +43,12 @@
     }
   }
 }
+
+@mixin mat-option-typography($config) {
+  .mat-option {
+    font: {
+      family: mat-font-family($config);
+      size: mat-font-size($config, subheading);
+    }
+  }
+}
diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss
index d13e2ff87f43..6eea82eb1f96 100644
--- a/src/lib/core/style/_menu-common.scss
+++ b/src/lib/core/style/_menu-common.scss
@@ -9,10 +9,10 @@ $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
 $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
 
 $mat-menu-item-height: 48px !default;
-$mat-menu-font-size: 16px !default;
 $mat-menu-side-padding: 16px !default;
 $mat-menu-icon-margin: 16px !default;
 
+
 @mixin mat-menu-base() {
   @include mat-elevation(8);
   min-width: $mat-menu-overlay-min-width;
@@ -31,8 +31,6 @@ $mat-menu-icon-margin: 16px !default;
   height: $mat-menu-item-height;
   padding: 0 $mat-menu-side-padding;
 
-  font-size: $mat-menu-font-size;
-  font-family: $mat-font-family;
   text-align: left;
   text-decoration: none;   // necessary to reset anchor tags
 
diff --git a/src/lib/core/style/_variables.scss b/src/lib/core/style/_variables.scss
index 686b67afc15c..837fa64437c7 100644
--- a/src/lib/core/style/_variables.scss
+++ b/src/lib/core/style/_variables.scss
@@ -1,13 +1,12 @@
-// Typography
-$mat-body-font-size-base: 14px !default;
-$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;
-
 // Media queries
 // TODO: Find a way to respect media query ranges.
 // TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
 $mat-xsmall: 'max-width: 600px';
 $mat-small: 'max-width: 960px';
 
+// TODO(crisbeto): this isn't being used anywhere within Material. keeping for backwards compat.
+$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;
+
 // TODO: Revisit all z-indices before beta
 // z-index master list
 
diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss
index 6dbfae92684c..374225788931 100644
--- a/src/lib/core/theming/_all-theme.scss
+++ b/src/lib/core/theming/_all-theme.scss
@@ -23,6 +23,7 @@
 @import '../../tabs/tabs-theme';
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
+@import '../../snack-bar/simple-snack-bar-theme';
 
 
 // Create a theme.
@@ -51,4 +52,5 @@
   @include mat-tabs-theme($theme);
   @include mat-toolbar-theme($theme);
   @include mat-tooltip-theme($theme);
+  @include mat-simple-snack-bar-theme($theme);
 }
diff --git a/src/lib/core/typography/_all-typography.scss b/src/lib/core/typography/_all-typography.scss
new file mode 100644
index 000000000000..ebdc1ac1ab42
--- /dev/null
+++ b/src/lib/core/typography/_all-typography.scss
@@ -0,0 +1,55 @@
+@import './typography';
+@import '../../autocomplete/autocomplete-theme';
+@import '../../button/button-theme';
+@import '../../button-toggle/button-toggle-theme';
+@import '../../card/card-theme';
+@import '../../checkbox/checkbox-theme';
+@import '../../chips/chips-theme';
+@import '../../dialog/dialog-theme';
+@import '../../grid-list/grid-list-theme';
+@import '../../icon/icon-theme';
+@import '../../input/input-theme';
+@import '../../list/list-theme';
+@import '../../menu/menu-theme';
+@import '../../progress-bar/progress-bar-theme';
+@import '../../progress-spinner/progress-spinner-theme';
+@import '../../radio/radio-theme';
+@import '../../select/select-theme';
+@import '../../sidenav/sidenav-theme';
+@import '../../slide-toggle/slide-toggle-theme';
+@import '../../slider/slider-theme';
+@import '../../tabs/tabs-theme';
+@import '../../toolbar/toolbar-theme';
+@import '../../tooltip/tooltip-theme';
+@import '../../snack-bar/simple-snack-bar-theme';
+@import '../option/option-theme';
+
+
+// Includes all of the typographic styles.
+@mixin angular-material-typography($config: mat-typography-config()) {
+  @include mat-base-typography($config);
+  @include mat-autocomplete-typography($config);
+  @include mat-button-typography($config);
+  @include mat-button-toggle-typography($config);
+  @include mat-card-typography($config);
+  @include mat-checkbox-typography($config);
+  @include mat-chips-typography($config);
+  @include mat-dialog-typography($config);
+  @include mat-grid-list-typography($config);
+  @include mat-icon-typography($config);
+  @include mat-input-typography($config);
+  @include mat-menu-typography($config);
+  @include mat-progress-bar-typography($config);
+  @include mat-progress-spinner-typography($config);
+  @include mat-radio-typography($config);
+  @include mat-select-typography($config);
+  @include mat-sidenav-typography($config);
+  @include mat-slide-toggle-typography($config);
+  @include mat-slider-typography($config);
+  @include mat-tabs-typography($config);
+  @include mat-toolbar-typography($config);
+  @include mat-tooltip-typography($config);
+  @include mat-list-typography($config);
+  @include mat-option-typography($config);
+  @include mat-simple-snack-bar-typography($config);
+}
diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss
index 01fac1a6c69f..8aaa7cd15f86 100644
--- a/src/lib/core/typography/_typography.scss
+++ b/src/lib/core/typography/_typography.scss
@@ -12,7 +12,7 @@
 // Represents a collection of typography levels.
 // Defaults come from https://material.io/guidelines/style/typography.html
 @function mat-typography-config(
-  $font-family: 'Roboto, sans-serif',
+  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
   $display-4:   mat-typography-level(112px, 112px, 300),
   $display-3:   mat-typography-level(56px, 56px, 400),
   $display-2:   mat-typography-level(45px, 48px, 400),
@@ -42,17 +42,30 @@
 }
 
 // Adds the base typography styles, based on a config.
-@mixin mat-typography($config: mat-typography-config(), $selector: '.mat-typography') {
+// TODO(crisbeto): the headers need to handle margins as well.
+@mixin mat-base-typography($config, $selector: '.mat-typography') {
   .mat-h0, .mat-hero-header {
     @include mat-typography-level-to-styles($config, display-4);
+
+    // Note: The spec doesn't mention letter spacing. The value comes from
+    // eyeballing it until it looked exactly like the spec examples.
+    letter-spacing: -0.05em;
   }
 
   .mat-h1, #{$selector} h1 {
     @include mat-typography-level-to-styles($config, display-3);
+
+    // Note: The spec doesn't mention letter spacing. The value comes from
+    // eyeballing it until it looked exactly like the spec examples.
+    letter-spacing: -0.02em;
   }
 
   .mat-h2, #{$selector} h2 {
-    @include mat-typography-level-to-styles($config, display-2);
+    @include mat-typography-level-to-styles($config, display-2)
+
+    // Note: The spec doesn't mention letter spacing. The value comes from
+    // eyeballing it until it looked exactly like the spec examples.;
+    letter-spacing: -0.005em;
   }
 
   .mat-h3, #{$selector} h3 {
diff --git a/src/lib/dialog/_dialog-theme.scss b/src/lib/dialog/_dialog-theme.scss
index 5c058ad6ca19..7cb878fe485f 100644
--- a/src/lib/dialog/_dialog-theme.scss
+++ b/src/lib/dialog/_dialog-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-dialog-theme($theme) {
@@ -9,3 +10,9 @@
     background: mat-color($background, dialog);
   }
 }
+
+@mixin mat-dialog-typography($config) {
+  .mat-dialog-title {
+    @include mat-typography-level-to-styles($config, title);
+  }
+}
diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss
index f063e524bd5e..fad1b372fb23 100644
--- a/src/lib/dialog/dialog.scss
+++ b/src/lib/dialog/dialog.scss
@@ -36,8 +36,6 @@ $mat-dialog-max-height: 65vh !default;
 }
 
 .mat-dialog-title {
-  font-size: 20px;
-  font-weight: bold;
   margin: 0 0 20px;
   display: block;
 }
diff --git a/src/lib/grid-list/_grid-list-theme.scss b/src/lib/grid-list/_grid-list-theme.scss
index f7f46834d4f4..15feff386136 100644
--- a/src/lib/grid-list/_grid-list-theme.scss
+++ b/src/lib/grid-list/_grid-list-theme.scss
@@ -1,6 +1,16 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../core/style/list-common';
 
 
 // Include this empty mixin for consistency with the other components.
 @mixin mat-grid-list-theme($theme) { }
+
+@mixin mat-grid-list-typography($config) {
+  .mat-grid-tile-header,
+  .mat-grid-tile-footer {
+    @include mat-line-base(mat-font-size($config, caption));
+    font-size: mat-font-size($config, body-1);
+  }
+}
diff --git a/src/lib/grid-list/grid-list.scss b/src/lib/grid-list/grid-list.scss
index 245fc6d632c5..2c8299a997c1 100644
--- a/src/lib/grid-list/grid-list.scss
+++ b/src/lib/grid-list/grid-list.scss
@@ -8,10 +8,6 @@ $mat-grid-list-two-line-height: 68px;
 // side padding for text in tile headers and footers
 $mat-grid-list-text-padding: 16px;
 
-// font styles for text in tile headers and footers
-$mat-grid-list-font-size: 16px;
-$mat-grid-list-secondary-font: 12px;
-
 .mat-grid-list {
   display: block;
   position: relative;
@@ -42,7 +38,6 @@ $mat-grid-list-secondary-font: 12px;
   // Headers & footers
   .mat-grid-tile-header,
   .mat-grid-tile-footer {
-    @include mat-line-base($mat-grid-list-secondary-font);
     @include mat-normalize-text();
 
     display: flex;
@@ -52,7 +47,6 @@ $mat-grid-list-secondary-font: 12px;
     background: rgba(0, 0, 0, 0.38);
     overflow: hidden;
     padding: 0 $mat-grid-list-text-padding;
-    font-size: $mat-grid-list-font-size;
 
     // Positioning
     position: absolute;
diff --git a/src/lib/icon/_icon-theme.scss b/src/lib/icon/_icon-theme.scss
index 6eb27db496db..ba9f862279ba 100644
--- a/src/lib/icon/_icon-theme.scss
+++ b/src/lib/icon/_icon-theme.scss
@@ -23,3 +23,5 @@
     }
   }
 }
+
+@mixin mat-icon-typography($config) { }
diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index 82e9dd7f0e4a..5c8bb4ab9805 100644
--- a/src/lib/input/_input-theme.scss
+++ b/src/lib/input/_input-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-input-theme($theme) {
@@ -88,3 +89,22 @@
     color: $input-underline-color-warn;
   }
 }
+
+@mixin mat-input-typography($config) {
+  .mat-input-container {
+    font-family: mat-font-family($config);
+    line-height: normal;
+
+    .mat-icon {
+      font-size: 100%;
+    }
+  }
+
+  .mat-input-placeholder {
+    font-size: 100%;
+  }
+
+  .mat-input-subscript-wrapper {
+    font-size: 75%;
+  }
+}
diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
index b365bb600a29..70059e047a1e 100644
--- a/src/lib/input/input-container.scss
+++ b/src/lib/input/input-container.scss
@@ -21,8 +21,6 @@ $mat-input-underline-disabled-background-image:
 .mat-input-container {
   display: inline-block;
   position: relative;
-  font-family: $mat-font-family;
-  line-height: normal;
 
   // To avoid problems with text-align.
   text-align: left;
@@ -36,7 +34,6 @@ $mat-input-underline-disabled-background-image:
   & .mat-datepicker-toggle {
     width: 1em;
     height: 1em;
-    font-size: 100%;
     vertical-align: top;
   }
 }
@@ -134,7 +131,6 @@ $mat-input-underline-disabled-background-image:
   left: 0;
   top: 0;
 
-  font-size: 100%;
   pointer-events: none;  // We shouldn't catch mouse events (let them through).
   z-index: 1;
   padding-top: 1em;
@@ -238,7 +234,6 @@ $mat-input-underline-disabled-background-image:
   $line-height: 1.2em;
 
   position: absolute;
-  font-size: 75%;
   top: 100%;
   width: 100%;
   margin-top: -$line-height;
diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss
index d839c1912f72..91c414adca8e 100644
--- a/src/lib/list/_list-theme.scss
+++ b/src/lib/list/_list-theme.scss
@@ -1,5 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+@import '../core/style/list-common';
 
 
 @mixin mat-list-theme($theme) {
@@ -28,3 +30,35 @@
     }
   }
 }
+
+@mixin mat-list-typography($config) {
+  $font-family: mat-font-family($config);
+
+  .mat-list-item {
+    font-family: $font-family;
+  }
+
+  // Default list
+  .mat-list, .mat-nav-list {
+    .mat-list-item {
+      font-size: mat-font-size($config, subheading);
+      @include mat-line-base(mat-font-size($config, body-1));
+    }
+
+    .mat-subheader {
+      @include mat-typography-level-to-styles($config, body-2);
+    }
+  }
+
+  // Dense list
+  .mat-list[dense], .mat-nav-list[dense] {
+    .mat-list-item {
+      font-size: mat-font-size($config, caption);
+      @include mat-line-base(mat-font-size($config, caption));
+    }
+
+    .mat-subheader {
+      font: mat-font-weight($config, body-2) mat-font-size($config, caption) $font-family;
+    }
+  }
+}
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index fd68936906e4..83c9c7906bb9 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -7,8 +7,6 @@ $mat-list-avatar-size: 40px;
 
 // Normal list variables
 $mat-list-top-padding: 8px;
-$mat-list-font-size: 16px;
-$mat-list-secondary-font: 14px;
 // height for single-line lists
 $mat-list-base-height: 48px;
 // height for single-line lists with avatars
@@ -20,7 +18,6 @@ $mat-list-icon-size: 24px;
 
 // Dense list variables
 $mat-dense-top-padding: 4px;
-$mat-dense-font-size: 13px;
 $mat-dense-base-height: 40px;
 $mat-dense-avatar-height: 48px;
 $mat-dense-two-line-height: 60px;
@@ -29,7 +26,7 @@ $mat-dense-list-icon-size: 20px;
 
 // This mixin provides all list-item styles, changing font size and height
 // based on whether the list is in dense mode.
-@mixin mat-list-item-base($font-size, $base-height, $avatar-height,
+@mixin mat-list-item-base($base-height, $avatar-height,
   $two-line-height, $three-line-height, $icon-size) {
 
   // Prevents the wrapper `mat-list-item-content` from collapsing due to it
@@ -40,9 +37,7 @@ $mat-dense-list-icon-size: 20px;
     display: flex;
     flex-direction: row;
     align-items: center;
-    font-family: $mat-font-family;
     box-sizing: border-box;
-    font-size: $font-size;
     height: $base-height;
     padding: 0 $mat-list-side-padding;
     position: relative;
@@ -111,18 +106,16 @@ $mat-dense-list-icon-size: 20px;
   }
 }
 
-// This mixin provides all subheader styles, adjusting heights and padding
-// based on whether the list is in dense mode.
-@mixin mat-subheader-base($top-padding, $secondary-size, $base-height) {
+.mat-subheader {
   display: block;
   box-sizing: border-box;
-  height: $base-height;
   padding: $mat-list-side-padding;
   margin: 0;
+}
 
-  font-family: $mat-font-family;
-  font-size: $secondary-size;
-  font-weight: 500;
+// This mixin adjusts the heights and padding based on whether the list is in dense mode.
+@mixin mat-subheader-spacing($top-padding, $base-height) {
+  height: $base-height;
 
   &:first-child {
     margin-top: -$top-padding;
@@ -134,25 +127,17 @@ $mat-dense-list-icon-size: 20px;
   display: block;
 
   .mat-subheader {
-    @include mat-subheader-base(
-      $mat-list-top-padding,
-      $mat-list-secondary-font,
-      $mat-list-base-height
-    );
+    @include mat-subheader-spacing($mat-list-top-padding, $mat-list-base-height);
   }
 
-
   .mat-list-item {
     @include mat-list-item-base(
-      $mat-list-font-size,
       $mat-list-base-height,
       $mat-list-avatar-height,
       $mat-list-two-line-height,
       $mat-list-three-line-height,
       $mat-list-icon-size
     );
-
-    @include mat-line-base($mat-list-secondary-font);
   }
 }
 
@@ -162,24 +147,17 @@ $mat-dense-list-icon-size: 20px;
   display: block;
 
   .mat-subheader {
-    @include mat-subheader-base(
-      $mat-dense-top-padding,
-      $mat-dense-font-size,
-      $mat-dense-base-height
-    );
+    @include mat-subheader-spacing($mat-dense-top-padding, $mat-dense-base-height);
   }
 
   .mat-list-item {
     @include mat-list-item-base(
-      $mat-dense-font-size,
       $mat-dense-base-height,
       $mat-dense-avatar-height,
       $mat-dense-two-line-height,
       $mat-dense-three-line-height,
       $mat-dense-list-icon-size
     );
-
-    @include mat-line-base($mat-dense-font-size);
   }
 }
 
diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss
index 304dc636eb86..c3dfd259309f 100644
--- a/src/lib/menu/_menu-theme.scss
+++ b/src/lib/menu/_menu-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-menu-theme($theme) {
@@ -28,3 +29,12 @@
     }
   }
 }
+
+@mixin mat-menu-typography($config) {
+  .mat-menu-item {
+    font: {
+      family: mat-font-family($config);
+      size: mat-font-size($config, subheading);
+    }
+  }
+}
diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss
index 3f909865e659..890249b86a04 100644
--- a/src/lib/progress-bar/_progress-bar-theme.scss
+++ b/src/lib/progress-bar/_progress-bar-theme.scss
@@ -48,6 +48,8 @@
   }
 }
 
+@mixin mat-progress-bar-typography($config) { }
+
 // TODO(josephperrott): Find better way to inline svgs.
 // In buffer mode a repeated SVG object is used as a background.
 // Each of the following defines the SVG object for each of the class defined colors.
diff --git a/src/lib/progress-spinner/_progress-spinner-theme.scss b/src/lib/progress-spinner/_progress-spinner-theme.scss
index e16c2595348b..a062443d0043 100644
--- a/src/lib/progress-spinner/_progress-spinner-theme.scss
+++ b/src/lib/progress-spinner/_progress-spinner-theme.scss
@@ -21,3 +21,5 @@
     }
   }
 }
+
+@mixin mat-progress-spinner-typography($config) { }
diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
index 722e3d64474d..5bedd3658dc3 100644
--- a/src/lib/radio/_radio-theme.scss
+++ b/src/lib/radio/_radio-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin mat-radio-theme($theme) {
@@ -39,3 +40,9 @@
     }
   }
 }
+
+@mixin mat-radio-typography($config) {
+  .mat-radio-button {
+    font-family: mat-font-family($config);
+  }
+}
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index a1a1283a08b5..9484fb9d38ab 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -8,7 +8,6 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
 // Top-level host container.
 .mat-radio-button {
   display: inline-block;
-  font-family: $mat-font-family;
 }
 
 // Inner label container, wrapping entire element.
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 9a4efc1cad41..cbab71e8aa27 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 @mixin _mat-select-inner-content-theme($palette) {
   $color: mat-color($palette);
@@ -58,3 +59,13 @@
     @include _mat-select-inner-content-theme($warn);
   }
 }
+
+@mixin mat-select-typography($config) {
+  .mat-select {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-select-trigger {
+    font-size: mat-font-size($config, subheading);
+  }
+}
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 9d7fcc1c2c12..d7ca055905d9 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -10,12 +10,10 @@ $mat-select-trigger-min-width: 112px !default;
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 256px !default;
-$mat-select-trigger-font-size: 16px !default;
 
 .mat-select {
   display: inline-block;
   outline: none;
-  font-family: $mat-font-family;
 }
 
 .mat-select-trigger {
@@ -26,7 +24,6 @@ $mat-select-trigger-font-size: 16px !default;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
-  font-size: $mat-select-trigger-font-size;
 
   [aria-disabled='true'] & {
     @include user-select(none);
diff --git a/src/lib/sidenav/_sidenav-theme.scss b/src/lib/sidenav/_sidenav-theme.scss
index ed2fabf8cf11..4955c78f1945 100644
--- a/src/lib/sidenav/_sidenav-theme.scss
+++ b/src/lib/sidenav/_sidenav-theme.scss
@@ -10,7 +10,7 @@
   $foreground: map-get($theme, foreground);
 
   // We use invert() here to have the darken the background color expected to be used. If the
-  // background is light, we use a dark backdrop. If the background is dark, 
+  // background is light, we use a dark backdrop. If the background is dark,
   // we use a light backdrop.
   $sidenav-backdrop-color: invert(mat-color($background, card, 0.6)) !default;
   $sidenav-background-color: mat-color($background, dialog) !default;
@@ -35,3 +35,5 @@
     background-color: $sidenav-backdrop-color;
   }
 }
+
+@mixin mat-sidenav-typography($config) { }
diff --git a/src/lib/slide-toggle/_slide-toggle-theme.scss b/src/lib/slide-toggle/_slide-toggle-theme.scss
index 42b51177b6d5..d9c979bbc983 100644
--- a/src/lib/slide-toggle/_slide-toggle-theme.scss
+++ b/src/lib/slide-toggle/_slide-toggle-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
   // Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
@@ -58,7 +59,7 @@
       @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
       @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);
     }
-  
+
     &.mat-warn {
       @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
       @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);
@@ -86,3 +87,9 @@
     background-color: $bar-normal-color;
   }
 }
+
+@mixin mat-slide-toggle-typography($config) {
+  .mat-slide-toggle-content {
+    @include mat-typography-level-to-styles($config, button);
+  }
+}
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 411ed183ad62..9a89c6ded37d 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -41,14 +41,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   }
 }
 
-// The content element is responsible for the users content.
-// It will apply the given typography styles and align at the end of the slide-toggle.
-.mat-slide-toggle-content {
-  font-size: $mat-body-font-size-base;
-  font-family: $mat-font-family;
-  font-weight: 500;
-}
-
 // The label element is our root container for the slide-toggle / switch indicator and label text.
 // It has to be a label, to support accessibility for the visual hidden input.
 .mat-slide-toggle-label {
diff --git a/src/lib/slider/_slider-theme.scss b/src/lib/slider/_slider-theme.scss
index 98d7932a7fca..610c1e76e26e 100644
--- a/src/lib/slider/_slider-theme.scss
+++ b/src/lib/slider/_slider-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 @mixin _mat-slider-inner-content-theme($palette) {
   .mat-slider-track-fill,
@@ -127,3 +128,12 @@
         $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
   }
 }
+
+@mixin mat-slider-typography($config) {
+  .mat-slider-thumb-label-text {
+    font: {
+      size: mat-font-size($config, caption);
+      weight: mat-font-weight($config, body-2);
+    }
+  }
+}
diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss
index 408ed2fa11db..46a669515531 100644
--- a/src/lib/slider/slider.scss
+++ b/src/lib/slider/slider.scss
@@ -144,8 +144,6 @@ $mat-slider-focus-ring-size: 30px !default;
 
 .mat-slider-thumb-label-text {
   z-index: 1;
-  font-size: 12px;
-  font-weight: bold;
   opacity: 0;
   transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
 }
diff --git a/src/lib/snack-bar/_simple-snack-bar-theme.scss b/src/lib/snack-bar/_simple-snack-bar-theme.scss
new file mode 100644
index 000000000000..062c8672b3a1
--- /dev/null
+++ b/src/lib/snack-bar/_simple-snack-bar-theme.scss
@@ -0,0 +1,21 @@
+@import '../core/typography/typography-utils';
+
+@mixin mat-simple-snack-bar-theme($theme) { }
+
+@mixin mat-simple-snack-bar-typography($config) {
+  .mat-simple-snackbar {
+    font: {
+      family: mat-font-family($config);
+      size: mat-font-size($config, body-1);
+    }
+  }
+
+  .mat-simple-snackbar-action {
+    line-height: 1;
+    font: {
+      family: inherit;
+      size: inherit;
+      weight: mat-font-weight($config, button);
+    }
+  }
+}
diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss
index 0b8292327dad..c4a29cd4c73e 100644
--- a/src/lib/snack-bar/simple-snack-bar.scss
+++ b/src/lib/snack-bar/simple-snack-bar.scss
@@ -9,10 +9,6 @@ $mat-snack-bar-button-margin: 48px !default;
   justify-content: space-between;
   color: white;
   line-height: 20px;
-  font: {
-    size: $mat-body-font-size-base;
-    family: $mat-font-family;
-  }
 }
 
 .mat-simple-snackbar-action {
@@ -20,14 +16,8 @@ $mat-snack-bar-button-margin: 48px !default;
 
   background: none;
   color: inherit;
-  line-height: 1;
   flex-shrink: 0;
   margin-left: $mat-snack-bar-button-margin;
-  font: {
-    family: inherit;
-    size: inherit;
-    weight: 600;
-  }
 
   [dir='rtl'] & {
     margin-right: $mat-snack-bar-button-margin;
diff --git a/src/lib/tabs/_tabs-common.scss b/src/lib/tabs/_tabs-common.scss
index a299450900de..56b5ff09ffac 100644
--- a/src/lib/tabs/_tabs-common.scss
+++ b/src/lib/tabs/_tabs-common.scss
@@ -9,9 +9,6 @@ $mat-tab-animation-duration: 500ms !default;
   line-height: $mat-tab-bar-height;
   height: $mat-tab-bar-height;
   padding: 0 12px;
-  font-size: $mat-body-font-size-base;
-  font-family: $mat-font-family;
-  font-weight: 500;
   cursor: pointer;
   box-sizing: border-box;
   opacity: 0.6;
diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
index 67d0a5ff353a..f22571fa63b5 100644
--- a/src/lib/tabs/_tabs-theme.scss
+++ b/src/lib/tabs/_tabs-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 @mixin mat-tabs-theme($theme) {
   $primary: map-get($theme, primary);
@@ -38,3 +39,13 @@
     }
   }
 }
+
+@mixin mat-tabs-typography($config) {
+  .mat-tab-group {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-tab-label, .mat-tab-link {
+    @include mat-typography-level-to-styles($config, button);
+  }
+}
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
index 04b8c4892912..5ef96404f2b5 100644
--- a/src/lib/tabs/tab-group.scss
+++ b/src/lib/tabs/tab-group.scss
@@ -5,7 +5,6 @@
 :host {
   display: flex;
   flex-direction: column;
-  font-family: $mat-font-family;
 
   &.mat-tab-group-inverted-header {
     flex-direction: column-reverse;
diff --git a/src/lib/toolbar/_toolbar-theme.scss b/src/lib/toolbar/_toolbar-theme.scss
index 3ead4ea3c109..d24a7c30da21 100644
--- a/src/lib/toolbar/_toolbar-theme.scss
+++ b/src/lib/toolbar/_toolbar-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
 
 @mixin _mat-toolbar-color($palette) {
@@ -31,3 +32,15 @@
     }
   }
 }
+
+@mixin mat-toolbar-typography($config) {
+  .mat-toolbar,
+  .mat-toolbar h1,
+  .mat-toolbar h2,
+  .mat-toolbar h3,
+  .mat-toolbar h4,
+  .mat-toolbar h5,
+  .mat-toolbar h6 {
+    @include mat-typography-level-to-styles($config, title);
+  }
+}
diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss
index 49240481f0ef..87becbfa16e3 100644
--- a/src/lib/toolbar/toolbar.scss
+++ b/src/lib/toolbar/toolbar.scss
@@ -4,7 +4,6 @@ $mat-toolbar-height-desktop: 64px !default;
 $mat-toolbar-height-mobile-portrait: 56px !default;
 $mat-toolbar-height-mobile-landscape: 48px !default;
 
-$mat-toolbar-font-size: 20px !default;
 $mat-toolbar-padding: 16px !default;
 
 
@@ -20,16 +19,8 @@ $mat-toolbar-padding: 16px !default;
 .mat-toolbar {
   display: flex;
   box-sizing: border-box;
-
   width: 100%;
-
-  // Font Styling
-  font-size: $mat-toolbar-font-size;
-  font-weight: 500;
-  font-family: $mat-font-family;
-
   padding: 0 $mat-toolbar-padding;
-
   flex-direction: column;
 
   .mat-toolbar-row {
@@ -42,7 +33,7 @@ $mat-toolbar-padding: 16px !default;
     flex-direction: row;
     align-items: center;
 
-    // Per Material specs a toolbar cannot have multiple lines inside of a single row. 
+    // Per Material specs a toolbar cannot have multiple lines inside of a single row.
     // Disable text wrapping inside of the toolbar. Developers are still able to overwrite it.
     white-space: nowrap;
   }
diff --git a/src/lib/tooltip/_tooltip-theme.scss b/src/lib/tooltip/_tooltip-theme.scss
index 7cbc007c8144..43e929f51a28 100644
--- a/src/lib/tooltip/_tooltip-theme.scss
+++ b/src/lib/tooltip/_tooltip-theme.scss
@@ -1,9 +1,24 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography-utils';
 
+// TODO(crisbeto): these doesn't correspond to any typography levels
+// and the width/height appear to be off from the spec.
+$mat-tooltip-target-height: 22px;
+$mat-tooltip-font-size: 10px;
+$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
 
 @mixin mat-tooltip-theme($theme) {
   .mat-tooltip {
     background: mat-color($mat-grey, 700, 0.9);
   }
 }
+
+@mixin mat-tooltip-typography($config) {
+  .mat-tooltip {
+    font-family: mat-font-family($config);
+    font-size: $mat-tooltip-font-size;
+    padding-top: $mat-tooltip-vertical-padding;
+    padding-bottom: $mat-tooltip-vertical-padding;
+  }
+}
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
index acb942d26bd6..4f53397f25eb 100644
--- a/src/lib/tooltip/tooltip.scss
+++ b/src/lib/tooltip/tooltip.scss
@@ -1,13 +1,9 @@
 @import '../core/style/variables';
 @import '../core/a11y/a11y';
 
-
-$mat-tooltip-target-height: 22px;
+$mat-tooltip-horizontal-padding: 8px;
 $mat-tooltip-max-width: 250px;
-$mat-tooltip-font-size: 10px;
 $mat-tooltip-margin: 14px;
-$mat-tooltip-horizontal-padding: 8px;
-$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
 
 :host {
   pointer-events: none;
@@ -15,12 +11,11 @@ $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-s
 
 .mat-tooltip {
   color: white;
-  padding: $mat-tooltip-vertical-padding $mat-tooltip-horizontal-padding;
   border-radius: 2px;
-  font-family: $mat-font-family;
-  font-size: $mat-tooltip-font-size;
   margin: $mat-tooltip-margin;
   max-width: $mat-tooltip-max-width;
+  padding-left: $mat-tooltip-horizontal-padding;
+  padding-right: $mat-tooltip-horizontal-padding;
 
   @include cdk-high-contrast {
     outline: solid 1px;