feat(typography): Headers now have a smaller line-height

Additional padding on headers makes up for this difference for
single-line headers.

[Finishes #98157918]
BREAKING CHANGE: (style) header line height and padding changed

src/pivotal-ui/components/pui-variables.scss

@@ -254,7 +254,7 @@ $font-weight-em-max:      900;
 
 $headings-font-family:    null;
 $headings-font-weight:    400 !default;
-$headings-line-height:    1.5 !default;
+$headings-line-height:    1.286 !default;
 $headings-color:          null;
 
 //TODO: create a mixin that will determine multiplers based on px-size

src/pivotal-ui/components/typography/typography.scss

@@ -113,6 +113,12 @@ If it's not a heading but you need similar visual treatment you can add just the
 // Override the bootstrap margins to use our margin classes so we can align
 // things. This is necessary because we have to keep the whitespace margins in sync with this
 
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  padding-top: 0.107em;
+  padding-bottom: 0.107em;
+}
+
 h1, .h1, h2, .h2, h3, .h3 {
   margin-top: $whitespace-xl;
   margin-bottom: $whitespace-l;