From 1103f8255b2f96575629d21282965b184ae32a78 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 2 Apr 2018 15:44:52 -0400
Subject: [PATCH 01/19] Created more title levels

- Updated the font scale
- Decreased line-height of large font sizes and added padding to make up the difference
- Added class for medium title size and making it the default
---
 src-docs/src/views/title/title.js             | 13 ++++++++++
 .../steps/__snapshots__/step.test.js.snap     |  2 +-
 .../steps/__snapshots__/steps.test.js.snap    | 18 ++++++-------
 .../title/__snapshots__/title.test.js.snap    |  2 +-
 src/components/title/_title.scss              | 26 ++++++++++++++++---
 src/components/title/title.js                 |  8 ++++++
 src/global_styling/mixins/_typography.scss    |  9 ++++---
 src/global_styling/variables/_typography.scss |  6 ++---
 8 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
index 8cf78563657..f3838a07b67 100644
--- a/src-docs/src/views/title/title.js
+++ b/src-docs/src/views/title/title.js
@@ -19,6 +19,19 @@ export default () => (
       <h3>This is a small title</h3>
     </EuiTitle>
 
+    <EuiTitle size="xs">
+      <h4>This is a extra small title</h4>
+    </EuiTitle>
+
+    <EuiTitle size="mini">
+      <h5>This is a mini title</h5>
+    </EuiTitle>
+
+    <EuiTitle size="label">
+      <h6>This is a label style headers ad should only be used when the header is inconsequential</h6>
+    </EuiTitle>
+
+
     <EuiHorizontalRule />
 
     <EuiTitle size="l">
diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap
index 0e8bbc7730a..0961d46fa8d 100644
--- a/src/components/steps/__snapshots__/step.test.js.snap
+++ b/src/components/steps/__snapshots__/step.test.js.snap
@@ -12,7 +12,7 @@ exports[`EuiStep is rendered 1`] = `
     Step
   </span>
   <h3
-    class="euiTitle euiStep__title"
+    class="euiTitle euiTitle--medium euiStep__title"
     data-step-num="1"
   >
     First step
diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap
index 7f205109681..fb0d4d05afe 100644
--- a/src/components/steps/__snapshots__/steps.test.js.snap
+++ b/src/components/steps/__snapshots__/steps.test.js.snap
@@ -15,7 +15,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       Step
     </span>
     <h2
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="1"
     >
       first title
@@ -37,7 +37,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       Step
     </span>
     <h2
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="2"
     >
       second title
@@ -59,7 +59,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       Step
     </span>
     <h2
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="3"
     >
       third title
@@ -90,7 +90,7 @@ exports[`EuiSteps renders steps 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="1"
     >
       first title
@@ -112,7 +112,7 @@ exports[`EuiSteps renders steps 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="2"
     >
       second title
@@ -134,7 +134,7 @@ exports[`EuiSteps renders steps 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="3"
     >
       third title
@@ -165,7 +165,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="10"
     >
       first title
@@ -187,7 +187,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="11"
     >
       second title
@@ -209,7 +209,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiStep__title"
+      class="euiTitle euiTitle--medium euiStep__title"
       data-step-num="12"
     >
       third title
diff --git a/src/components/title/__snapshots__/title.test.js.snap b/src/components/title/__snapshots__/title.test.js.snap
index 5d502f32bce..0cfa39086dd 100644
--- a/src/components/title/__snapshots__/title.test.js.snap
+++ b/src/components/title/__snapshots__/title.test.js.snap
@@ -3,7 +3,7 @@
 exports[`EuiTitle is rendered 1`] = `
 <h1
   aria-label="aria-label"
-  class="euiTitle testClass1 testClass2"
+  class="euiTitle euiTitle--medium testClass1 testClass2"
   data-test-subj="test subject string"
 >
   Title
diff --git a/src/components/title/_title.scss b/src/components/title/_title.scss
index cb2492715b1..5e0aa999129 100644
--- a/src/components/title/_title.scss
+++ b/src/components/title/_title.scss
@@ -1,12 +1,32 @@
 .euiTitle {
   @include euiTitle;
-  @include euiFontSizeL;
+  line-height: 1.2;
+}
+
+.euiTitle--label {
+  @include euiText;
+  @include euiFontSizeXS;
+  font-weight: $euiFontWeightBold;
+}
+
+.euiTitle--mini {
+  @include euiFontSizeS;
+  font-weight: $euiFontWeightMedium;
+}
+
+.euiTitle--xsmall {
+  @include euiFontSize;
+  font-weight: $euiFontWeightMedium;
 }
 
 .euiTitle--small {
-  @include euiFontSizeM;
+  @include euiFontSizeL;
 }
 
-.euiTitle--large {
+.euiTitle--medium {
   @include euiFontSizeXL;
 }
+
+.euiTitle--large {
+  @include euiFontSizeXXL;
+}
diff --git a/src/components/title/title.js b/src/components/title/title.js
index e2278a89ce6..b851498ec86 100644
--- a/src/components/title/title.js
+++ b/src/components/title/title.js
@@ -5,7 +5,11 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 const titleSizeToClassNameMap = {
+  label: 'euiTitle--label',
+  mini: 'euiTitle--mini',
+  xs: 'euiTitle--xsmall',
   s: 'euiTitle--small',
+  m: 'euiTitle--medium',
   l: 'euiTitle--large',
 };
 
@@ -32,3 +36,7 @@ EuiTitle.propTypes = {
   className: PropTypes.string,
   size: PropTypes.oneOf(TITLE_SIZES),
 };
+
+EuiTitle.defaultProps = {
+  size: 'm',
+};
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 9c1b7a01138..236c3fabd87 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -49,15 +49,18 @@
 
 @mixin euiFontSizeL {
   @include fontSize($euiFontSizeL);
-  line-height: $euiLineHeight;
+  line-height: 1.2;
+  padding: (($euiFontSizeL*$euiLineHeight) - ($euiFontSizeL*1.2))/2 0;
 }
 
 @mixin euiFontSizeXL {
   @include fontSize($euiFontSizeXL);
-  line-height: $euiLineHeight;
+  line-height: 1.2;
+  padding: (($euiFontSizeXL*$euiLineHeight) - ($euiFontSizeXL*1.2))/2 0;
 }
 
 @mixin euiFontSizeXXL {
   @include fontSize($euiFontSizeXXL);
-  line-height: $euiLineHeight;
+  line-height: 1.2;
+  padding: (($euiFontSizeXXL*$euiLineHeight) - ($euiFontSizeXXL*1.2))/2 0;
 }
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 72546c022aa..526968423f6 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -21,16 +21,16 @@
 $euiFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $euiCodeFontFamily: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 
-// Font sizes
+// Font sizes -- scale is loosely based on Major Third (1.250)
 
 $euiFontSize:       $euiSize !default;
 
 $euiFontSizeXS:     $euiFontSize * .75 !default;
 $euiFontSizeS:      $euiFontSize * .875 !default;
-$euiFontSizeM:      $euiFontSize * 1.125 !default;
+$euiFontSizeM:      $euiFontSize * 1.25 !default;
 $euiFontSizeL:      $euiFontSize * 1.5 !default;
 $euiFontSizeXL:     $euiFontSize * 2 !default;
-$euiFontSizeXXL:    $euiFontSize * 3 !default;
+$euiFontSizeXXL:    $euiFontSize * 2.5 !default;
 
 // Line height
 

From 4e7eb424c8692add97ef7c56b3854dd91a7f1bc2 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 2 Apr 2018 16:06:33 -0400
Subject: [PATCH 02/19] Changing names to xxs and xxxs

---
 src-docs/src/views/title/title.js | 4 ++--
 src/components/title/_title.scss  | 5 ++---
 src/components/title/title.js     | 6 +++---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
index f3838a07b67..a82b21f41fb 100644
--- a/src-docs/src/views/title/title.js
+++ b/src-docs/src/views/title/title.js
@@ -23,11 +23,11 @@ export default () => (
       <h4>This is a extra small title</h4>
     </EuiTitle>
 
-    <EuiTitle size="mini">
+    <EuiTitle size="xxs">
       <h5>This is a mini title</h5>
     </EuiTitle>
 
-    <EuiTitle size="label">
+    <EuiTitle size="xxxs">
       <h6>This is a label style headers ad should only be used when the header is inconsequential</h6>
     </EuiTitle>
 
diff --git a/src/components/title/_title.scss b/src/components/title/_title.scss
index 5e0aa999129..b241473f8a1 100644
--- a/src/components/title/_title.scss
+++ b/src/components/title/_title.scss
@@ -3,13 +3,12 @@
   line-height: 1.2;
 }
 
-.euiTitle--label {
-  @include euiText;
+.euiTitle--xxxsmall {
   @include euiFontSizeXS;
   font-weight: $euiFontWeightBold;
 }
 
-.euiTitle--mini {
+.euiTitle--xxsmall {
   @include euiFontSizeS;
   font-weight: $euiFontWeightMedium;
 }
diff --git a/src/components/title/title.js b/src/components/title/title.js
index b851498ec86..03f774d9232 100644
--- a/src/components/title/title.js
+++ b/src/components/title/title.js
@@ -5,8 +5,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 const titleSizeToClassNameMap = {
-  label: 'euiTitle--label',
-  mini: 'euiTitle--mini',
+  xxxs: 'euiTitle--xxxsmall',
+  xxs: 'euiTitle--xxsmall',
   xs: 'euiTitle--xsmall',
   s: 'euiTitle--small',
   m: 'euiTitle--medium',
@@ -34,7 +34,7 @@ export const EuiTitle = ({ size, children, className, ...rest }) => {
 EuiTitle.propTypes = {
   children: PropTypes.element.isRequired,
   className: PropTypes.string,
-  size: PropTypes.oneOf(TITLE_SIZES),
+  size: PropTypes.oneOf(TITLE_SIZES).isRequired,
 };
 
 EuiTitle.defaultProps = {

From 2d180be9788ca2d3ac3c6de0a94447b2c1d5a960 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 2 Apr 2018 17:55:41 -0400
Subject: [PATCH 03/19] More scaling & font-weight manipulation

---
 src-docs/src/components/guide_components.scss |  5 ++
 .../src/views/text_scaling/text_scaling.js    | 19 ++++-
 .../text_scaling/text_scaling_sandbox.js      |  2 +-
 src-docs/src/views/title/title.js             | 10 ++-
 src/components/text/_text.scss                | 73 +++++++++----------
 src/components/title/_title.scss              |  9 +++
 src/components/title/title.js                 |  6 +-
 src/global_styling/mixins/_typography.scss    | 16 ++--
 8 files changed, 88 insertions(+), 52 deletions(-)

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index 8d0601382b3..5f9e7d837de 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -121,6 +121,11 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   background-size: 100% 8px !important;
 }
 
+.guideDemo__textLines--s {
+  background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important;
+  background-size: 100% 7px !important;
+}
+
 .guideDemo__color {
   padding: $euiSizeS;
   color: $euiColorEmptyShade;
diff --git a/src-docs/src/views/text_scaling/text_scaling.js b/src-docs/src/views/text_scaling/text_scaling.js
index a956bdf1e09..010b98093df 100644
--- a/src-docs/src/views/text_scaling/text_scaling.js
+++ b/src-docs/src/views/text_scaling/text_scaling.js
@@ -17,6 +17,8 @@ const text = [
     yellow sun.
   </p>,
 
+  <h2 key={0.5}>This is Heading Two</h2>,
+
   <p key={2}>
     Orbiting this at a distance of roughly ninety-two million miles
     is an utterly insignificant little blue green planet whose ape-
@@ -40,7 +42,7 @@ const text = [
   </p>,
 
 
-  <h2 key={5}>This is Heading Two</h2>,
+  <h3 key={5}>This is Heading Three</h3>,
 
   <ol key={6}>
     <li>Number one</li>
@@ -59,12 +61,23 @@ const text = [
     fruit to jump <em>for</em>, and dead car batteries to jump-<em>start</em>.
   </p>,
 
-  <h3 key={9}>This is Heading Three</h3>,
+  <h4 key={9}>This is Heading Four</h4>,
 
   <p key={10}>
     So it thought the dog was making a poor life choice by focusing so much on mindfulness.
     What if its car broke down?
   </p>,
+
+  <h5 key={11}>This is Heading Five</h5>,
+
+  <p key={12}>
+    <small>
+      So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+      What if its car broke down?
+    </small>
+  </p>,
+
+  <h6 key={13}>This is Heading Six</h6>,
 ];
 
 export default () => (
@@ -81,7 +94,7 @@ export default () => (
       </EuiPageContent>
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiPageContent className="guideDemo__textLines" style={{ padding: 32 }}>
+      <EuiPageContent className="guideDemo__textLines--s" style={{ padding: 32 }}>
         <EuiPageContentBody>
 
           <EuiText size="s">
diff --git a/src-docs/src/views/text_scaling/text_scaling_sandbox.js b/src-docs/src/views/text_scaling/text_scaling_sandbox.js
index a96bacc6300..3155e866b86 100644
--- a/src-docs/src/views/text_scaling/text_scaling_sandbox.js
+++ b/src-docs/src/views/text_scaling/text_scaling_sandbox.js
@@ -30,7 +30,7 @@ export default props => (
         <p>
           This demo shows off <EuiCode>EuiText</EuiCode> scaling in both
           the default and small sizes. The goal is that the bottom of
-          every text line should hit one of the 8px grid lines. This is
+          every text line should hit one of the 8px or 7px grid lines. This is
           for development only. Do not copy this code into a production environment.
         </p>
       }
diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
index a82b21f41fb..4d0e81dbabc 100644
--- a/src-docs/src/views/title/title.js
+++ b/src-docs/src/views/title/title.js
@@ -20,15 +20,19 @@ export default () => (
     </EuiTitle>
 
     <EuiTitle size="xs">
-      <h4>This is a extra small title</h4>
+      <h4>This is an extra small title</h4>
     </EuiTitle>
 
     <EuiTitle size="xxs">
-      <h5>This is a mini title</h5>
+      <h5>This is an extra extra small title</h5>
     </EuiTitle>
 
     <EuiTitle size="xxxs">
-      <h6>This is a label style headers ad should only be used when the header is inconsequential</h6>
+      <h6>This is an extra extra extra small title and should only be used when the title is inconsequential (like a label)</h6>
+    </EuiTitle>
+
+    <EuiTitle size="xxxs" uppercase>
+      <h6>This is an extra extra extra small title that is uppercase</h6>
     </EuiTitle>
 
 
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 3ecd92976d1..d6741b444ac 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -21,17 +21,17 @@
   ol,
   blockquote,
   img {
-    margin-bottom: $euiSizeL;
+    margin-bottom: 1.5em;
   }
 
   ul {
     list-style: disc;
-    margin-left: $euiSizeL;
+    margin-left: 1.5em;
   }
 
   ol {
     list-style: decimal;
-    margin-left: $euiSizeL;
+    margin-left: 1.5em;
   }
 
   blockquote {
@@ -39,7 +39,7 @@
     text-align: center;
     margin-left: auto;
     margin-right: auto;
-    padding: $euiSizeL;
+    padding:  1.5em;
     max-width: 36rem;
     font-family: Georgia,Times,Times New Roman,serif;
     font-size: 112.5%;
@@ -74,31 +74,55 @@
   * + h4,
   * + h5,
   * + h6 {
-    margin-top: $euiSizeXL
+    margin-top: $euiSizeXL;
   }
 
   h1,h2,h3,h4,h5,h6 {
     @include euiTitle;
-    margin-bottom: $euiSizeS;
+  }
+
+  h1,h2,h3 {
+    line-height: 1.2;
   }
 
   h1 {
-    font-size: 200%;
+    font-size: ($euiFontSizeXXL/$euiFontSize)*100%;
+    margin-bottom: .4em;
   }
 
   h2 {
-    font-size: 150%;
-    line-height: $euiSizeXL;
+    font-size: ($euiFontSizeXL/$euiFontSize)*100%;
+    margin-bottom: .6em;
   }
 
   h3 {
-    font-size: 112.5%;
+    font-size: ($euiFontSizeL/$euiFontSize)*100%;
+    font-weight: 500;
+    margin-bottom: .5em;
+  }
+
+  h4, h5, h6 {
+    margin-bottom: .5em;
   }
 
-  h3, h4, h5 {
+  h4 {
+    font-size: 100%;
     font-weight: $euiFontWeightMedium;
   }
 
+  h5, h6 {
+    font-weight: $euiFontWeightBold;
+  }
+
+  h5, small {
+    font-size: ($euiFontSizeS/$euiFontSize)*100%;
+  }
+
+  h6 {
+    font-size: ($euiFontSizeXS/$euiFontSize)*100%;
+    text-transform: uppercase;
+  }
+
   &.euiText--small {
     @include euiFontSizeS;
 
@@ -110,19 +134,6 @@
     * + h6 {
       margin-top: $euiSizeL;
     }
-
-    p,
-    ul,
-    ol,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    img {
-      margin-bottom: $euiFontSizeS;
-    }
   }
 
   &.euiText--extraSmall {
@@ -136,20 +147,6 @@
     * + h6 {
       margin-top: $euiSizeM;
     }
-
-    p,
-    ul,
-    ol,
-    blockquote,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    img {
-      margin-bottom: $euiFontSizeS;
-    }
   }
 
   > :last-child {
diff --git a/src/components/title/_title.scss b/src/components/title/_title.scss
index b241473f8a1..6bc918fea7d 100644
--- a/src/components/title/_title.scss
+++ b/src/components/title/_title.scss
@@ -1,6 +1,14 @@
 .euiTitle {
   @include euiTitle;
   line-height: 1.2;
+
+  + .euiTitle {
+    margin-top: $euiSizeL;
+  }
+}
+
+.euiTitle--uppercase {
+  text-transform: uppercase;
 }
 
 .euiTitle--xxxsmall {
@@ -20,6 +28,7 @@
 
 .euiTitle--small {
   @include euiFontSizeL;
+  font-weight: 500;
 }
 
 .euiTitle--medium {
diff --git a/src/components/title/title.js b/src/components/title/title.js
index 03f774d9232..984eff222a8 100644
--- a/src/components/title/title.js
+++ b/src/components/title/title.js
@@ -15,11 +15,14 @@ const titleSizeToClassNameMap = {
 
 export const TITLE_SIZES = Object.keys(titleSizeToClassNameMap);
 
-export const EuiTitle = ({ size, children, className, ...rest }) => {
+export const EuiTitle = ({ size, children, className, uppercase, ...rest }) => {
 
   const classes = classNames(
     'euiTitle',
     titleSizeToClassNameMap[size],
+    {
+      'euiTitle--uppercase': uppercase,
+    },
     className
   );
 
@@ -35,6 +38,7 @@ EuiTitle.propTypes = {
   children: PropTypes.element.isRequired,
   className: PropTypes.string,
   size: PropTypes.oneOf(TITLE_SIZES).isRequired,
+  uppercase: PropTypes.bool,
 };
 
 EuiTitle.defaultProps = {
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 236c3fabd87..f9c664469a8 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -20,6 +20,13 @@
   font-weight: $euiFontWeightRegular;
 }
 
+@mixin euiLargeTextLineHeight($fontSize) {
+  // Decreases line height a bit, but adds padding to make up the difference
+  line-height: 1.2;
+  padding-top: (($fontSize*$euiLineHeight) - ($fontSize*1.2))/2;
+  padding-bottom: (($fontSize*$euiLineHeight) - ($fontSize*1.2))/2;
+}
+
 // Font sizing extends, using rem mixin
 
 @mixin euiFontSize {
@@ -49,18 +56,15 @@
 
 @mixin euiFontSizeL {
   @include fontSize($euiFontSizeL);
-  line-height: 1.2;
-  padding: (($euiFontSizeL*$euiLineHeight) - ($euiFontSizeL*1.2))/2 0;
+  @include euiLargeTextLineHeight($euiFontSizeL);
 }
 
 @mixin euiFontSizeXL {
   @include fontSize($euiFontSizeXL);
-  line-height: 1.2;
-  padding: (($euiFontSizeXL*$euiLineHeight) - ($euiFontSizeXL*1.2))/2 0;
+  @include euiLargeTextLineHeight($euiFontSizeXL);
 }
 
 @mixin euiFontSizeXXL {
   @include fontSize($euiFontSizeXXL);
-  line-height: 1.2;
-  padding: (($euiFontSizeXXL*$euiLineHeight) - ($euiFontSizeXXL*1.2))/2 0;
+  @include euiLargeTextLineHeight($euiFontSizeXXL);
 }

From b74942ab5087ee0a7f983cbabf9df899a265f49e Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 2 Apr 2018 19:38:43 -0400
Subject: [PATCH 04/19] Created a mixin for creating the title hierarchies

- Takes a font-size and determines the correct line-height and font-weight
- Used in all places that are titles (warning but on purpose: some components now have different weights for their titles)
- This now means that we have a set hierarchy for titling and, in most cases, all titles at the same font size should look the same
---
 src-docs/src/components/guide_components.scss | 11 -----
 .../guide_rule/_guide_rule_description.scss   |  2 -
 .../guide_rule/_guide_rule_example.scss       |  4 +-
 src-docs/src/views/guidelines/button.js       |  4 +-
 src-docs/src/views/guidelines/writing.js      | 20 ++++-----
 .../src/views/steps/heading_element_steps.js  |  2 +-
 src-docs/src/views/steps/steps_complex.js     |  4 +-
 src-docs/src/views/title/title.js             |  2 +-
 src/components/modal/_modal.scss              |  2 +-
 src/components/popover/_mixins.scss           |  1 +
 src/components/side_nav/_side_nav_item.scss   |  3 +-
 .../steps/__snapshots__/step.test.js.snap     |  2 +-
 .../steps/__snapshots__/steps.test.js.snap    | 18 ++++----
 src/components/steps/_steps.scss              | 17 +++++---
 src/components/steps/_steps_horizontal.scss   |  4 +-
 src/components/steps/step.js                  |  2 +-
 src/components/text/_text.scss                | 43 ++++++++++---------
 src/components/title/_title.scss              | 19 +++-----
 src/components/toast/_toast.scss              |  5 +--
 src/global_styling/mixins/_typography.scss    | 37 ++++++++++------
 src/global_styling/variables/_typography.scss |  8 ++--
 21 files changed, 103 insertions(+), 107 deletions(-)

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index 5f9e7d837de..4d7a1d6d778 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -80,17 +80,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   margin-left: 240px;
 }
 
-.guideSection__text.euiText,
-.guideSection__text .euiText {
-  @include euiFontSizeS;
-  //font-weight: $euiFontWeightLight;
-  color: shadeOrTint($euiTextColor, .3, .1);
-
-  p, ul, ol {
-    max-width: 36rem;
-  }
-}
-
 .guideDemo__highlightLayout {
   div {
     background: transparentize(#0096CC, .9);
diff --git a/src-docs/src/components/guide_rule/_guide_rule_description.scss b/src-docs/src/components/guide_rule/_guide_rule_description.scss
index dec0eedfd76..f2f4199b31c 100644
--- a/src-docs/src/components/guide_rule/_guide_rule_description.scss
+++ b/src-docs/src/components/guide_rule/_guide_rule_description.scss
@@ -1,5 +1,3 @@
 .guideRule__description {
   margin-bottom: $euiSizeXL;
-
-  @extend .guideSection__text;
 }
diff --git a/src-docs/src/components/guide_rule/_guide_rule_example.scss b/src-docs/src/components/guide_rule/_guide_rule_example.scss
index 48bc72c13b4..18112c6e310 100644
--- a/src-docs/src/components/guide_rule/_guide_rule_example.scss
+++ b/src-docs/src/components/guide_rule/_guide_rule_example.scss
@@ -15,8 +15,8 @@
   }
 
   .guideRule__caption {
-    @include euiFontSizeXS;
-    max-height: $euiFontSizeXS * $euiLineHeight; /* 1 */
+    @include euiFontSizeS;
+    max-height: $euiFontSizeS * $euiLineHeight; /* 1 */
     overflow-y: visible; /* 1 */
   }
 
diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js
index 8062df8f9c6..5ef5c314ca2 100644
--- a/src-docs/src/views/guidelines/button.js
+++ b/src-docs/src/views/guidelines/button.js
@@ -253,7 +253,7 @@ export default() => (
       </GuideRuleExample>
     </GuideRule>
 
-    <EuiSpacer size="xl" />
+    <EuiSpacer size="xxl" />
 
     <GuideRuleTitle>One primary button per layout</GuideRuleTitle>
 
@@ -360,7 +360,7 @@ export default() => (
       </GuideRuleExample>
     </GuideRule>
 
-    <EuiSpacer size="l" />
+    <EuiSpacer size="xxl" />
 
     <GuideRuleTitle>Minimize the mixing of color, size, and type</GuideRuleTitle>
 
diff --git a/src-docs/src/views/guidelines/writing.js b/src-docs/src/views/guidelines/writing.js
index ad22a1add09..90975fa7a42 100644
--- a/src-docs/src/views/guidelines/writing.js
+++ b/src-docs/src/views/guidelines/writing.js
@@ -132,12 +132,12 @@ export default () => (
     >
 
       <GuideRuleExample type="do">
-        <EuiText><h2>Edit saved objects</h2></EuiText>
+        <EuiText><h4>Edit saved objects</h4></EuiText>
       </GuideRuleExample>
 
       <GuideRuleExample type="dont">
         <EuiText>
-          <h2>Edit saved objects</h2>
+          <h4>Edit saved objects</h4>
           <p>From here, you can edit saved objects. To get started, follow these steps.</p>
         </EuiText>
       </GuideRuleExample>
@@ -341,7 +341,7 @@ export default () => (
         A title-only message is ok."
     >
       <GuideRuleExample type="do" text="">
-        <EuiTitle size="s"><span>This dashboard is empty. Let&apos;s fill it up!</span></EuiTitle>
+        <EuiTitle size="xs"><span>This dashboard is empty. Let&apos;s fill it up!</span></EuiTitle>
         <EuiSpacer/>
         <EuiText>
           <p>
@@ -352,7 +352,7 @@ export default () => (
       </GuideRuleExample>
 
       <GuideRuleExample type="dont" text="">
-        <EuiTitle size="s"><span>Uh-oh!</span></EuiTitle>
+        <EuiTitle size="xs"><span>Uh-oh!</span></EuiTitle>
         <EuiSpacer/>
         <EuiText>
           <p>
@@ -381,7 +381,7 @@ export default () => (
     >
       <GuideRuleExample type="do" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Delete this report?</span></EuiTitle>
+          <EuiTitle size="xs"><span>Delete this report?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -392,7 +392,7 @@ export default () => (
 
       <GuideRuleExample type="dont" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Are you sure you want to delete this report?</span></EuiTitle>
+          <EuiTitle size="xs"><span>Are you sure you want to delete this report?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -506,7 +506,7 @@ export default () => (
     >
       <GuideRuleExample type="do" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Remove this index pattern?</span></EuiTitle>
+          <EuiTitle size="xs"><span>Remove this index pattern?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -516,7 +516,7 @@ export default () => (
       </GuideRuleExample>
       <GuideRuleExample type="dont" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="s"><span>Remove this index pattern?</span></EuiTitle>
+          <EuiTitle size="xs"><span>Remove this index pattern?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -547,10 +547,10 @@ export default () => (
       description="Losing data and other situations that might frustrate the user are not a time for humor."
     >
       <GuideRuleExample type="do" text="">
-        <EuiTitle size="s"><span>No results matched your search</span></EuiTitle>
+        <EuiTitle size="xs"><span>No results matched your search</span></EuiTitle>
       </GuideRuleExample>
       <GuideRuleExample type="dont" text="">
-        <EuiTitle size="s"><span><EuiIcon type="faceSad" /> No results found</span></EuiTitle>
+        <EuiTitle size="xs"><span><EuiIcon type="faceSad" /> No results found</span></EuiTitle>
         <EuiSpacer />
         <EuiText>
           <p>
diff --git a/src-docs/src/views/steps/heading_element_steps.js b/src-docs/src/views/steps/heading_element_steps.js
index 862e1cb3ee2..4fcd3a475f7 100644
--- a/src-docs/src/views/steps/heading_element_steps.js
+++ b/src-docs/src/views/steps/heading_element_steps.js
@@ -9,7 +9,7 @@ import {
 const steps = [
   {
     title: 'Inspect me',
-    children: <EuiTitle size="s"><h3>Did you notice the step title is inside a Heading 2 element?</h3></EuiTitle>
+    children: <EuiTitle size="xs"><h3>Did you notice the step title is inside a Heading 2 element?</h3></EuiTitle>
   }
 ];
 
diff --git a/src-docs/src/views/steps/steps_complex.js b/src-docs/src/views/steps/steps_complex.js
index 1857745457f..78f7f5b3563 100644
--- a/src-docs/src/views/steps/steps_complex.js
+++ b/src-docs/src/views/steps/steps_complex.js
@@ -57,7 +57,7 @@ const steps = [
     title: 'The last step has two options',
     children: (
       <EuiText>
-        <h3><strong>Option 1:</strong> If you have this type of instance</h3>
+        <h4><strong>Option 1:</strong> If you have this type of instance</h4>
         <EuiSubSteps>
           <ol>
             <li>Do thing 1</li>
@@ -65,7 +65,7 @@ const steps = [
             <li>Do thing 3</li>
           </ol>
         </EuiSubSteps>
-        <h3><strong>Option 2:</strong> If you have the other type of instance</h3>
+        <h4><strong>Option 2:</strong> If you have the other type of instance</h4>
         <EuiSubSteps>
           <ol>
             <li>Do thing 1</li>
diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
index 4d0e81dbabc..738daf5c538 100644
--- a/src-docs/src/views/title/title.js
+++ b/src-docs/src/views/title/title.js
@@ -8,7 +8,7 @@ import {
 export default () => (
   <div>
     <EuiTitle size="l">
-      <h1>This is a large title</h1>
+      <h1>This is a large title, only one should exist per page</h1>
     </EuiTitle>
 
     <EuiTitle>
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index fa5741422e5..c35e074ae1d 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -32,7 +32,7 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma
 }
 
   .euiModalHeader__title {
-    @include euiFontSizeL;
+    @include euiTitle($euiFontSizeXL);
   }
 
 .euiModalBody {
diff --git a/src/components/popover/_mixins.scss b/src/components/popover/_mixins.scss
index d07dd38623a..d733e4cee35 100644
--- a/src/components/popover/_mixins.scss
+++ b/src/components/popover/_mixins.scss
@@ -1,4 +1,5 @@
 @mixin euiPopoverTitle {
+  @include euiTitle($euiFontSize);
   background-color: $euiColorLightestShade;
   padding: $euiSizeM;
 
diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss
index 68a44475668..746ad0effb8 100644
--- a/src/components/side_nav/_side_nav_item.scss
+++ b/src/components/side_nav/_side_nav_item.scss
@@ -94,8 +94,7 @@
     }
 
     .euiSideNavItemButton__label {
-      @include euiTitle;
-      font-size: $euiFontSizeM;
+      @include euiTitle($euiFontSize);
     }
   }
 
diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap
index 0961d46fa8d..78aad488456 100644
--- a/src/components/steps/__snapshots__/step.test.js.snap
+++ b/src/components/steps/__snapshots__/step.test.js.snap
@@ -12,7 +12,7 @@ exports[`EuiStep is rendered 1`] = `
     Step
   </span>
   <h3
-    class="euiTitle euiTitle--medium euiStep__title"
+    class="euiTitle euiTitle--small euiStep__title"
     data-step-num="1"
   >
     First step
diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap
index fb0d4d05afe..0bdafa76406 100644
--- a/src/components/steps/__snapshots__/steps.test.js.snap
+++ b/src/components/steps/__snapshots__/steps.test.js.snap
@@ -15,7 +15,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       Step
     </span>
     <h2
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="1"
     >
       first title
@@ -37,7 +37,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       Step
     </span>
     <h2
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="2"
     >
       second title
@@ -59,7 +59,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       Step
     </span>
     <h2
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="3"
     >
       third title
@@ -90,7 +90,7 @@ exports[`EuiSteps renders steps 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="1"
     >
       first title
@@ -112,7 +112,7 @@ exports[`EuiSteps renders steps 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="2"
     >
       second title
@@ -134,7 +134,7 @@ exports[`EuiSteps renders steps 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="3"
     >
       third title
@@ -165,7 +165,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="10"
     >
       first title
@@ -187,7 +187,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="11"
     >
       second title
@@ -209,7 +209,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       Step
     </span>
     <p
-      class="euiTitle euiTitle--medium euiStep__title"
+      class="euiTitle euiTitle--small euiStep__title"
       data-step-num="12"
     >
       third title
diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
index 51507fc812d..ed8befd029e 100644
--- a/src/components/steps/_steps.scss
+++ b/src/components/steps/_steps.scss
@@ -11,14 +11,17 @@
   .euiTitle {
     line-height: $euiStepNumberSize; /* 1 */
   }
-}
 
-  .euiStep__title::before {
-    content: attr(data-step-num); // Get the number from the data attribute
-    @include createStepsNumber();
+  .euiStep__title {
+    font-weight: $euiFontWeightRegular;
+
+    &::before {
+      content: attr(data-step-num); // Get the number from the data attribute
+      @include createStepsNumber();
 
-    margin-right: $euiStepNumberMargin;
-    vertical-align: top; /* 1 */
+      margin-right: $euiStepNumberMargin;
+      vertical-align: top; /* 1 */
+    }
   }
 
   .euiStep__content {
@@ -32,5 +35,5 @@
     // Align content border to horizontal center of step number
     margin-left: ($euiStepNumberSize/2) - 1px;
   }
-
+}
 
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
index 7106f240fdc..52b536300ec 100644
--- a/src/components/steps/_steps_horizontal.scss
+++ b/src/components/steps/_steps_horizontal.scss
@@ -89,9 +89,9 @@
 
 .euiStepHorizontal__title {
   display: block;
-  @include euiTitle;
-  @include euiFontSize;
+  @include euiTitle($euiFontSize);
   margin-top: $euiSizeS;
+  font-weight: $euiFontWeightRegular;
 
   // truncate
   white-space: nowrap;  /* 1 */
diff --git a/src/components/steps/step.js b/src/components/steps/step.js
index 60979961712..162bb32424f 100644
--- a/src/components/steps/step.js
+++ b/src/components/steps/step.js
@@ -27,7 +27,7 @@ export const EuiStep = ({
 
       <EuiScreenReaderOnly><span>Step</span></EuiScreenReaderOnly>
 
-      <EuiTitle className="euiStep__title" data-step-num={step}>
+      <EuiTitle size="s" className="euiStep__title" data-step-num={step}>
         {React.createElement(headingElement, null, title)}
       </EuiTitle>
 
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index d6741b444ac..33f6a0553d8 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,6 +1,7 @@
 .euiText {
   @include euiText;
   @include euiFontSize;
+  max-width: 36rem;
 
   a {
     color: $euiLinkColor;
@@ -77,27 +78,24 @@
     margin-top: $euiSizeXL;
   }
 
-  h1,h2,h3,h4,h5,h6 {
-    @include euiTitle;
-  }
-
-  h1,h2,h3 {
-    line-height: 1.2;
-  }
-
+  /**
+  * 1. Customize font size to be a percentage of the .euiText container's base font size (easy scaling)
+  */
   h1 {
-    font-size: ($euiFontSizeXXL/$euiFontSize)*100%;
+    @include euiTitle($euiFontSizeXXL);
+    font-size: ($euiFontSizeXXL/$euiFontSize)*100%; /* 1 */
     margin-bottom: .4em;
   }
 
   h2 {
-    font-size: ($euiFontSizeXL/$euiFontSize)*100%;
+    @include euiTitle($euiFontSizeXL);
+    font-size: ($euiFontSizeXL/$euiFontSize)*100%; /* 1 */
     margin-bottom: .6em;
   }
 
   h3 {
-    font-size: ($euiFontSizeL/$euiFontSize)*100%;
-    font-weight: 500;
+    @include euiTitle($euiFontSizeL);
+    font-size: ($euiFontSizeL/$euiFontSize)*100%; /* 1 */
     margin-bottom: .5em;
   }
 
@@ -106,23 +104,26 @@
   }
 
   h4 {
-    font-size: 100%;
-    font-weight: $euiFontWeightMedium;
+    @include euiTitle($euiFontSize);
+    font-size: 100%; /* 1 */
   }
 
-  h5, h6 {
-    font-weight: $euiFontWeightBold;
-  }
-
-  h5, small {
-    font-size: ($euiFontSizeS/$euiFontSize)*100%;
+  h5 {
+    @include euiTitle($euiFontSizeS);
+    font-size: ($euiFontSizeS/$euiFontSize)*100%; /* 1 */
   }
 
   h6 {
-    font-size: ($euiFontSizeXS/$euiFontSize)*100%;
+    @include euiTitle($euiFontSizeXS);
+    font-size: ($euiFontSizeXS/$euiFontSize)*100%; /* 1 */
     text-transform: uppercase;
   }
 
+  small {
+    @include euiFontSizeS;
+    font-size: ($euiFontSizeS/$euiFontSize)*100%; /* 1 */
+  }
+
   &.euiText--small {
     @include euiFontSizeS;
 
diff --git a/src/components/title/_title.scss b/src/components/title/_title.scss
index 6bc918fea7d..4b656cce280 100644
--- a/src/components/title/_title.scss
+++ b/src/components/title/_title.scss
@@ -1,7 +1,4 @@
 .euiTitle {
-  @include euiTitle;
-  line-height: 1.2;
-
   + .euiTitle {
     margin-top: $euiSizeL;
   }
@@ -12,29 +9,25 @@
 }
 
 .euiTitle--xxxsmall {
-  @include euiFontSizeXS;
-  font-weight: $euiFontWeightBold;
+  @include euiTitle($euiFontSizeXS);
 }
 
 .euiTitle--xxsmall {
-  @include euiFontSizeS;
-  font-weight: $euiFontWeightMedium;
+  @include euiTitle($euiFontSizeS);
 }
 
 .euiTitle--xsmall {
-  @include euiFontSize;
-  font-weight: $euiFontWeightMedium;
+  @include euiTitle($euiFontSize);
 }
 
 .euiTitle--small {
-  @include euiFontSizeL;
-  font-weight: 500;
+  @include euiTitle($euiFontSizeL);
 }
 
 .euiTitle--medium {
-  @include euiFontSizeXL;
+  @include euiTitle($euiFontSizeXL);
 }
 
 .euiTitle--large {
-  @include euiFontSizeXXL;
+  @include euiTitle($euiFontSizeXXL);
 }
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
index 56692266e7d..a0cf9b87645 100644
--- a/src/components/toast/_toast.scss
+++ b/src/components/toast/_toast.scss
@@ -69,7 +69,7 @@ $toastTypes: (
  * 3. Account for close button.
  */
 .euiToastHeader {
-  @include euiFontSize;
+  @include euiFontSizeM;
   padding-right: $euiSizeL; /* 3 */
 
   display: flex;
@@ -90,8 +90,7 @@ $toastTypes: (
   }
 
   .euiToastHeader__title {
-    color: $euiTitleColor;
-    font-weight: $euiFontWeightLight;
+    @include euiTitle;
   }
 
 .euiToastHeader--withBody {
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index f9c664469a8..594185b5f5d 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -10,9 +10,29 @@
   font-family: $euiCodeFontFamily;
 }
 
-@mixin euiTitle {
+@mixin euiTitle($fontSize: null) {
+  $font-weight: $euiFontWeightLight;
+  $line-height: 1.2;
+
+  @if $fontSize {
+    @include fontSize($fontSize);
+
+    @if ($fontSize < $euiFontSizeXL) {
+      $font-weight: $euiFontWeightMedium;
+    }
+
+    @if ($fontSize < $euiFontSizeL) {
+      $line-height: $euiLineHeight;
+    }
+
+    @if ($fontSize < $euiFontSizeS) {
+      $font-weight: $euiFontWeightBold;
+    }
+  }
+
+  font-weight: $font-weight;
+  line-height: $line-height;
   color: $euiTitleColor;
-  font-weight: $euiFontWeightLight;
 }
 
 @mixin euiText {
@@ -20,13 +40,6 @@
   font-weight: $euiFontWeightRegular;
 }
 
-@mixin euiLargeTextLineHeight($fontSize) {
-  // Decreases line height a bit, but adds padding to make up the difference
-  line-height: 1.2;
-  padding-top: (($fontSize*$euiLineHeight) - ($fontSize*1.2))/2;
-  padding-bottom: (($fontSize*$euiLineHeight) - ($fontSize*1.2))/2;
-}
-
 // Font sizing extends, using rem mixin
 
 @mixin euiFontSize {
@@ -56,15 +69,15 @@
 
 @mixin euiFontSizeL {
   @include fontSize($euiFontSizeL);
-  @include euiLargeTextLineHeight($euiFontSizeL);
+  line-height: 1.2;
 }
 
 @mixin euiFontSizeXL {
   @include fontSize($euiFontSizeXL);
-  @include euiLargeTextLineHeight($euiFontSizeXL);
+  line-height: 1.2;
 }
 
 @mixin euiFontSizeXXL {
   @include fontSize($euiFontSizeXXL);
-  @include euiLargeTextLineHeight($euiFontSizeXXL);
+  line-height: 1.2;
 }
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 526968423f6..a76f8104706 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -27,10 +27,10 @@ $euiFontSize:       $euiSize !default;
 
 $euiFontSizeXS:     $euiFontSize * .75 !default;
 $euiFontSizeS:      $euiFontSize * .875 !default;
-$euiFontSizeM:      $euiFontSize * 1.25 !default;
-$euiFontSizeL:      $euiFontSize * 1.5 !default;
-$euiFontSizeXL:     $euiFontSize * 2 !default;
-$euiFontSizeXXL:    $euiFontSize * 2.5 !default;
+$euiFontSizeM:      $euiFontSize * 1.125 !default;
+$euiFontSizeL:      $euiFontSize * 1.25 !default;
+$euiFontSizeXL:     $euiFontSize * 1.75 !default;
+$euiFontSizeXXL:    $euiFontSize * 2.25 !default;
 
 // Line height
 

From 9de283a5ee0ffdccb11413ab409dc9939330d21d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 2 Apr 2018 19:56:03 -0400
Subject: [PATCH 05/19] Fixing up some guideline text and comps

---
 src-docs/src/views/guidelines/button.js    | 8 ++++----
 src-docs/src/views/guidelines/modals.js    | 6 +++---
 src-docs/src/views/guidelines/toasts.js    | 8 ++++----
 src/components/text/_text.scss             | 1 +
 src/global_styling/mixins/_typography.scss | 3 ++-
 src/global_styling/variables/_colors.scss  | 2 +-
 6 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js
index 5ef5c314ca2..65b2d5893ea 100644
--- a/src-docs/src/views/guidelines/button.js
+++ b/src-docs/src/views/guidelines/button.js
@@ -65,7 +65,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Filled buttons are for the primary action</strong>
+            Filled buttons are for the primary action
           </h4>
           <p>
             This button has the heavist visual weight to draw users&apos; attention.
@@ -86,7 +86,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Standard buttons are for secondary actions</strong>
+            Standard buttons are for secondary actions
           </h4>
           <p>
             Such actions include Add and Apply. This button type works well for
@@ -108,7 +108,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Empty buttons are for complimentary, UI-specific actions</strong>
+            Empty buttons are for complimentary, UI-specific actions
           </h4>
           <p>
             Close, cancel, filter, refresh, and other actions that reconfigure the
@@ -136,7 +136,7 @@ export default() => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Icon buttons are for saving space</strong>
+            Icon buttons are for saving space
           </h4>
           <p>
             The icon must be immediately understood, for example, a trash can
diff --git a/src-docs/src/views/guidelines/modals.js b/src-docs/src/views/guidelines/modals.js
index 5f40a74daf2..fe6f65ccf37 100644
--- a/src-docs/src/views/guidelines/modals.js
+++ b/src-docs/src/views/guidelines/modals.js
@@ -86,11 +86,11 @@ export default () => (
 
       <EuiFlexItem >
         <EuiText className="guideSection__text">
-          <h4><strong>The header sets the context</strong></h4>
+          <h4>The header sets the context</h4>
           <p>Short and sentence-case, the header should indicate what the modal is about.</p>
-          <h4><strong>The body is for a single task</strong></h4>
+          <h4>The body is for a single task</h4>
           <p>This task should not require a lot of explanation or user interaction.</p>
-          <h4><strong>Buttons are right-aligned</strong></h4>
+          <h4>Buttons are right-aligned</h4>
           <p>The primary action is a filled button, and the secondary action is a link button.
             Labels should use strong action verbs.
           </p>
diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js
index 0b3a9cc63d6..96185889ed0 100644
--- a/src-docs/src/views/guidelines/toasts.js
+++ b/src-docs/src/views/guidelines/toasts.js
@@ -54,7 +54,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Success toasts indicate that everything worked out</strong>
+            Success toasts indicate that everything worked out
           </h4>
           <p>
             They are the most-commonly used toasts.
@@ -77,7 +77,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Warning toasts direct user attention to a potential problem</strong>
+            Warning toasts direct user attention to a potential problem
           </h4>
           <p>
             These toasts work well in monitoring apps when something
@@ -101,7 +101,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Error toasts report a problem</strong>
+            Error toasts report a problem
           </h4>
           <p>
             An error toast might let users know an action didn&apos;t complete or that a form has errors.
@@ -126,7 +126,7 @@ export default () => (
       <EuiFlexItem>
         <EuiText className="guideSection__text">
           <h4>
-            <strong>Info toasts relay neutral information</strong>
+            Info toasts relay neutral information
           </h4>
           <p>
             The default toast, an info toast might notify users about an ongoing action.
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 33f6a0553d8..92961bf8c47 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -96,6 +96,7 @@
   h3 {
     @include euiTitle($euiFontSizeL);
     font-size: ($euiFontSizeL/$euiFontSize)*100%; /* 1 */
+    font-weight: $euiFontWeightMedium;
     margin-bottom: .5em;
   }
 
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 594185b5f5d..a14c479bcd3 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -18,10 +18,11 @@
     @include fontSize($fontSize);
 
     @if ($fontSize < $euiFontSizeXL) {
-      $font-weight: $euiFontWeightMedium;
+      $font-weight: $euiFontWeightRegular;
     }
 
     @if ($fontSize < $euiFontSizeL) {
+      $font-weight: $euiFontWeightMedium;
       $line-height: $euiLineHeight;
     }
 
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 3400db5d572..e814dcbf0ac 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -24,7 +24,7 @@ $euiColorSlightHue: #909AA1 !default;
 // Every color below must be based mathmatically on the set above.
 
 $euiTextColor: $euiColorDarkestShade !default;
-$euiTitleColor: $euiColorFullShade !default;
+$euiTitleColor: tintOrShade($euiColorFullShade, 10%, 0%) !default;
 $euiLinkColor: $euiColorPrimary !default;
 $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default;
 

From bc2a7f7a8811df3b54f4eb1bf844253a87e32776 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 2 Apr 2018 19:58:13 -0400
Subject: [PATCH 06/19] Bolding Elastic UI in nav

---
 .../src/components/guide_theme_selector/guide_theme_selector.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
index 78b3e99f61b..3fdddadc17a 100644
--- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
+++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
@@ -38,7 +38,7 @@ export class GuideThemeSelector extends Component {
         iconSide="right"
         onClick={this.onThemeButtonClick}
       >
-        Elastic UI <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
+        <strong>Elastic UI</strong> <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
       </EuiButtonEmpty>
     );
 

From bdb168eb4b02dffbb395cf7bdccdeb5d9b2e27b7 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 2 Apr 2018 22:24:05 -0400
Subject: [PATCH 07/19] Updated some components and docs

---
 src-docs/src/views/flyout/flyout_complicated.js  |  1 +
 src-docs/src/views/guidelines/writing.js         |  8 ++++----
 src-docs/src/views/tables/tables_example.js      |  5 ++---
 src/components/call_out/_call_out.scss           |  5 +++--
 .../description_list/_description_list.scss      | 16 ++++------------
 src/components/tabs/_tabs.scss                   |  1 -
 6 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
index f58aeae4dee..39c7fb70481 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.js
@@ -146,6 +146,7 @@ export class FlyoutComplicated extends Component {
                 Flyout header
               </h2>
             </EuiTitle>
+            <EuiSpacer size="s" />
             <EuiTextColor color="subdued">
               <EuiText>
                 <p>Put navigation items in the header, and cross tab actions in a footer.</p>
diff --git a/src-docs/src/views/guidelines/writing.js b/src-docs/src/views/guidelines/writing.js
index 90975fa7a42..3e98c097c98 100644
--- a/src-docs/src/views/guidelines/writing.js
+++ b/src-docs/src/views/guidelines/writing.js
@@ -381,7 +381,7 @@ export default () => (
     >
       <GuideRuleExample type="do" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="xs"><span>Delete this report?</span></EuiTitle>
+          <EuiTitle size="m"><span>Delete this report?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -392,7 +392,7 @@ export default () => (
 
       <GuideRuleExample type="dont" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="xs"><span>Are you sure you want to delete this report?</span></EuiTitle>
+          <EuiTitle size="m"><span>Are you sure you want to delete this report?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -506,7 +506,7 @@ export default () => (
     >
       <GuideRuleExample type="do" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="xs"><span>Remove this index pattern?</span></EuiTitle>
+          <EuiTitle size="m"><span>Remove this index pattern?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
@@ -516,7 +516,7 @@ export default () => (
       </GuideRuleExample>
       <GuideRuleExample type="dont" text="" panel={false}>
         <EuiPanel>
-          <EuiTitle size="xs"><span>Remove this index pattern?</span></EuiTitle>
+          <EuiTitle size="m"><span>Remove this index pattern?</span></EuiTitle>
           <EuiSpacer />
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
             <EuiButtonEmpty color="text" size="s">Cancel</EuiButtonEmpty>
diff --git a/src-docs/src/views/tables/tables_example.js b/src-docs/src/views/tables/tables_example.js
index bdbdac715d1..cc25f9aa02c 100644
--- a/src-docs/src/views/tables/tables_example.js
+++ b/src-docs/src/views/tables/tables_example.js
@@ -2,7 +2,6 @@ import React from 'react';
 
 import {
   EuiCode,
-  EuiText,
   EuiSpacer,
   EuiCallOut,
 } from '../../../../src/components';
@@ -24,7 +23,7 @@ import { section as customSection } from './custom';
 export const TableExample = {
   title: 'Tables',
   intro: (
-    <EuiText>
+    <div>
       <EuiCallOut title="EUI provides opinionated and non-opinionated ways to build tables">
         <p>
           Tables can get complicated very fast. If you&apos;re just looking for a basic table
@@ -40,7 +39,7 @@ export const TableExample = {
         </p>
       </EuiCallOut>
       <EuiSpacer />
-    </EuiText>
+    </div>
   ),
   sections: [
     basicSection,
diff --git a/src/components/call_out/_call_out.scss b/src/components/call_out/_call_out.scss
index 0bb0d2cbf11..cf4afe01c3a 100644
--- a/src/components/call_out/_call_out.scss
+++ b/src/components/call_out/_call_out.scss
@@ -40,7 +40,8 @@ $callOutTypes: (
  * 3. Apply margin to all but last item in the flex.
  */
 .euiCallOutHeader {
-  @include euiFontSize;
+  @include euiTitle($euiFontSize);
+  font-weight: 500;
   display: flex;
   align-items: baseline; /* 1 */
 
@@ -54,7 +55,7 @@ $callOutTypes: (
 
   // smaller font size for headers in small callout
   .euiCallOut--small & {
-    @include euiFontSizeS;
+    @include euiTitle($euiFontSizeS);
   }
 }
 
diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss
index c86237f093d..0427832a8db 100644
--- a/src/components/description_list/_description_list.scss
+++ b/src/components/description_list/_description_list.scss
@@ -1,17 +1,9 @@
 .euiDescriptionList {
 
-  .euiDescriptionList__title {
-    font-weight: $euiFontWeightMedium;
-  }
-
-  .euiDescriptionList__description {
-    color: $euiColorDarkShade;
-  }
-
   &.euiDescriptionList--row {
 
     .euiDescriptionList__title {
-      @include euiFontSize;
+      @include euiTitle($euiFontSize);
       margin-top: $euiSize;
 
       // Make sure the first <dt> doesn't get a margine.
@@ -37,7 +29,7 @@
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
-        @include euiFontSizeS;
+        @include euiTitle($euiFontSizeS);
       }
 
       .euiDescriptionList__description {
@@ -62,7 +54,7 @@
     }
 
     .euiDescriptionList__title {
-      @include euiFontSize;
+      @include euiTitle($euiFontSize);
       flex-basis: 50%;
       padding-right: $euiSizeS;
     }
@@ -84,7 +76,7 @@
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
-        @include euiFontSizeS;
+        @include euiTitle($euiFontSizeS);
       }
 
       .euiDescriptionList__description {
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index abf47c25e4f..8c9a1dd7614 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -25,7 +25,6 @@
   position: relative;
   cursor: pointer;
   padding: $euiSizeM $euiSize;
-  color: $euiColorDarkShade;
   background-color: transparent;
   transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
 

From 2bdc89f3cf6cc89e06a9173b6a1b930aa58067c8 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 3 Apr 2018 13:22:21 -0400
Subject: [PATCH 08/19] =?UTF-8?q?Defaulting=20euiTitle=20mixin=20font-weig?=
 =?UTF-8?q?ht=20to=20=E2=80=9Cmedium=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/global_styling/mixins/_typography.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index a14c479bcd3..04da9e35beb 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -11,12 +11,16 @@
 }
 
 @mixin euiTitle($fontSize: null) {
-  $font-weight: $euiFontWeightLight;
+  $font-weight: $euiFontWeightMedium;
   $line-height: 1.2;
 
   @if $fontSize {
     @include fontSize($fontSize);
 
+    @if ($fontSize > $euiFontSizeL) {
+      $font-weight: $euiFontWeightLight;
+    }
+
     @if ($fontSize < $euiFontSizeXL) {
       $font-weight: $euiFontWeightRegular;
     }

From 67f3a3d9988a2b71949a9f64857bad7f2e9194c5 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 11:25:51 -0400
Subject: [PATCH 09/19] Fixing card title size/weight/underline

---
 src/components/card/__snapshots__/card.test.js.snap | 2 +-
 src/components/card/_card.scss                      | 2 ++
 src/components/card/card.js                         | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap
index 50aac9fc20a..9075eaedee6 100644
--- a/src/components/card/__snapshots__/card.test.js.snap
+++ b/src/components/card/__snapshots__/card.test.js.snap
@@ -13,7 +13,7 @@ exports[`EuiCard is rendered 1`] = `
     class="euiCard__content"
   >
     <span
-      class="euiTitle euiTitle--small euiCard__title"
+      class="euiTitle euiTitle--medium euiCard__title"
     >
       Card title
     </span>
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 0ecbbf07d76..6c6cbd0e16b 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -85,6 +85,8 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium");
   .euiCard__title {
     display: block;
     margin-top: $euiCardSpacing;
+    @include euiTitle($euiFontSizeM);
+    font-weight: $euiFontWeightRegular;
   }
 
   .euiCard__description {
diff --git a/src/components/card/card.js b/src/components/card/card.js
index 8231b149891..78bb7d91295 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -70,7 +70,7 @@ export const EuiCard = ({
       </span>
 
       <span className="euiCard__content">
-        <EuiTitle size="s" className="euiCard__title">
+        <EuiTitle className="euiCard__title">
           <span>{title}</span>
         </EuiTitle>
 

From bd52d64fdcf1a3569d24127f1f3db3e0210a87a4 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 11:33:37 -0400
Subject: [PATCH 10/19] Adding h4-h6 to the EuiText docs

---
 src-docs/src/views/text/text.js       | 18 ++++++++++++++++++
 src-docs/src/views/text/text_small.js | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js
index 230018f62d2..f39fb8fe2f0 100644
--- a/src-docs/src/views/text/text.js
+++ b/src-docs/src/views/text/text.js
@@ -70,6 +70,24 @@ export default () => (
         So it thought the dog was making a poor life choice by focusing so much on mindfulness.
         What if its car broke down?
       </p>
+
+      <h4>This is Heading Four</h4>
+
+      <p>
+        So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+        What if its car broke down?
+      </p>
+
+      <h5>This is Heading Five</h5>
+
+      <p>
+        <small>
+          So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+          What if its car broke down?
+        </small>
+      </p>
+
+      <h6>This is Heading Six</h6>
     </EuiText>
   </div>
 );
diff --git a/src-docs/src/views/text/text_small.js b/src-docs/src/views/text/text_small.js
index 46ccbb7b844..9c43a618b28 100644
--- a/src-docs/src/views/text/text_small.js
+++ b/src-docs/src/views/text/text_small.js
@@ -62,6 +62,24 @@ const exampleText = (
       So it thought the dog was making a poor life choice by focusing so much on mindfulness.
       What if its car broke down?
     </p>
+
+    <h4>This is Heading Four</h4>
+
+    <p>
+      So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+      What if its car broke down?
+    </p>
+
+    <h5>This is Heading Five</h5>
+
+    <p>
+      <small>
+        So it thought the dog was making a poor life choice by focusing so much on mindfulness.
+        What if its car broke down?
+      </small>
+    </p>
+
+    <h6>This is Heading Six</h6>
   </div>
 );
 

From 964f2f21a668de2987247cf8ebac43d08bedf1eb Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 11:43:27 -0400
Subject: [PATCH 11/19] Using map on EuiTitle for textTransform

---
 src-docs/src/views/title/title.js |  2 +-
 src/components/title/title.js     | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
index 738daf5c538..c289ace91f7 100644
--- a/src-docs/src/views/title/title.js
+++ b/src-docs/src/views/title/title.js
@@ -31,7 +31,7 @@ export default () => (
       <h6>This is an extra extra extra small title and should only be used when the title is inconsequential (like a label)</h6>
     </EuiTitle>
 
-    <EuiTitle size="xxxs" uppercase>
+    <EuiTitle size="xxxs" textTransform="uppercase">
       <h6>This is an extra extra extra small title that is uppercase</h6>
     </EuiTitle>
 
diff --git a/src/components/title/title.js b/src/components/title/title.js
index 984eff222a8..eb7375c5307 100644
--- a/src/components/title/title.js
+++ b/src/components/title/title.js
@@ -15,14 +15,18 @@ const titleSizeToClassNameMap = {
 
 export const TITLE_SIZES = Object.keys(titleSizeToClassNameMap);
 
-export const EuiTitle = ({ size, children, className, uppercase, ...rest }) => {
+const textTransformToClassNameMap = {
+  uppercase: 'euiTitle--uppercase',
+};
+
+export const TEXT_TRANSFORM = Object.keys(textTransformToClassNameMap);
+
+export const EuiTitle = ({ size, children, className, textTransform, ...rest }) => {
 
   const classes = classNames(
     'euiTitle',
     titleSizeToClassNameMap[size],
-    {
-      'euiTitle--uppercase': uppercase,
-    },
+    textTransformToClassNameMap[textTransform],
     className
   );
 
@@ -38,7 +42,7 @@ EuiTitle.propTypes = {
   children: PropTypes.element.isRequired,
   className: PropTypes.string,
   size: PropTypes.oneOf(TITLE_SIZES).isRequired,
-  uppercase: PropTypes.bool,
+  textTransform: PropTypes.oneOf(TEXT_TRANSFORM),
 };
 
 EuiTitle.defaultProps = {

From 2a0cb6aac64cb7df17b21210215e46c487140d28 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 14:36:33 -0400
Subject: [PATCH 12/19] Created a euiScaleText mixin just for the .EuiText
 component

- All values are in rem
- All margin/line-height values are a multiple of the baseLineHeightMultiplier
- Updated K6 font sizing to use the scale as well
---
 src-docs/src/components/guide_components.scss |   2 +
 src-docs/src/views/text/text_example.js       |  20 ++-
 src/components/text/_text.scss                | 139 +++++++++++-------
 src/global_styling/mixins/_typography.scss    |   2 +-
 src/global_styling/variables/_typography.scss |  15 +-
 src/themes/k6/k6_globals.scss                 |  18 ++-
 6 files changed, 116 insertions(+), 80 deletions(-)

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index 4d7a1d6d778..4c0f8ee2d55 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -108,11 +108,13 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 .guideDemo__textLines {
   background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important;
   background-size: 100% 8px !important;
+  background-position-y: 2px;
 }
 
 .guideDemo__textLines--s {
   background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important;
   background-size: 100% 7px !important;
+  background-position-y: -2px;
 }
 
 .guideDemo__color {
diff --git a/src-docs/src/views/text/text_example.js b/src-docs/src/views/text/text_example.js
index b579418247e..490df584d8d 100644
--- a/src-docs/src/views/text/text_example.js
+++ b/src-docs/src/views/text/text_example.js
@@ -35,13 +35,19 @@ export const TextExample = {
       code: textHtml,
     }],
     text: (
-      <p>
-        <EuiCode>EuiText</EuiCode> is a generic catchall wrapper that will apply
-        our standard typography styling and spacing to naked HTML. Because of
-        its forced style it <strong>only accepts raw HTML</strong> and can
-        not / should not be used to wrap React components (which would break
-        their styling).
-      </p>
+      <div>
+        <p>
+          <EuiCode>EuiText</EuiCode> is a generic catchall wrapper that will apply
+          our standard typography styling and spacing to naked HTML. Because of
+          its forced style it <strong>only accepts raw HTML</strong> and can
+          not / should not be used to wrap React components (which would break
+          their styling).
+        </p>
+        <p>
+          <EuiCode>EuiText</EuiCode> also ensure proper line-length for readability by
+          setting a <EuiCode>max-width</EuiCode> on the entire component.
+        </p>
+      </div>
     ),
     props: { EuiText },
     demo: <Text />,
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 92961bf8c47..6173a0b77a3 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,3 +1,82 @@
+// This should only be used for .euiText, therefore it's not included in a separate mixin file
+@mixin euiScaleText($baseFontSize) {
+  $baseLineHeight: ($baseFontSize * $euiLineHeight);
+  $baseLineHeightMultiplier: $baseLineHeight/3;
+
+  p,
+  ul,
+  ol,
+  blockquote,
+  img {
+    margin-bottom: convertToRem($baseLineHeightMultiplier * 4);
+  }
+
+  ul, ol {
+    margin-left: convertToRem($baseLineHeightMultiplier * 4);
+  }
+
+  blockquote {
+    padding:  convertToRem($baseFontSize * 1.5);
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 4));
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: convertToRem($baseLineHeightMultiplier * 1);
+  }
+
+  * + h2,
+  * + h3,
+  * + h4,
+  * + h5,
+  * + h6 {
+    margin-top: convertToRem($baseLineHeightMultiplier * 4);
+  }
+
+  /**
+  * 1. Set line-height to a muliplier of the base line height without being under the font-size.
+  */
+
+  h1 {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 1));
+    line-height: convertToRem($baseLineHeightMultiplier * 6); /* 1 */
+  }
+
+  h2 {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 2));
+    line-height: convertToRem($baseLineHeightMultiplier * 5); /* 1 */
+  }
+
+  h3 {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 3));
+    line-height: convertToRem($baseLineHeightMultiplier * 4); /* 1 */
+    font-weight: $euiFontWeightMedium;
+  }
+
+  h4 {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 5)); // skip level 4 on purpose
+  }
+
+  h5 {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 6));
+    line-height: convertToRem($baseLineHeight);
+  }
+
+  h6 {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 7));
+    line-height: convertToRem($baseLineHeight);
+    text-transform: uppercase;
+  }
+
+  small {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 6));
+  }
+}
+
 .euiText {
   @include euiText;
   @include euiFontSize;
@@ -17,22 +96,12 @@
     width: 100%;
   }
 
-  p,
-  ul,
-  ol,
-  blockquote,
-  img {
-    margin-bottom: 1.5em;
-  }
-
   ul {
     list-style: disc;
-    margin-left: 1.5em;
   }
 
   ol {
     list-style: decimal;
-    margin-left: 1.5em;
   }
 
   blockquote {
@@ -40,10 +109,7 @@
     text-align: center;
     margin-left: auto;
     margin-right: auto;
-    padding:  1.5em;
-    max-width: 36rem;
     font-family: Georgia,Times,Times New Roman,serif;
-    font-size: 112.5%;
     line-height: 1.5;
     font-style: italic;
 
@@ -69,86 +135,45 @@
     }
   }
 
-  * + h1,
-  * + h2,
-  * + h3,
-  * + h4,
-  * + h5,
-  * + h6 {
-    margin-top: $euiSizeXL;
-  }
-
   /**
   * 1. Customize font size to be a percentage of the .euiText container's base font size (easy scaling)
   */
   h1 {
     @include euiTitle($euiFontSizeXXL);
-    font-size: ($euiFontSizeXXL/$euiFontSize)*100%; /* 1 */
-    margin-bottom: .4em;
   }
 
   h2 {
     @include euiTitle($euiFontSizeXL);
-    font-size: ($euiFontSizeXL/$euiFontSize)*100%; /* 1 */
-    margin-bottom: .6em;
   }
 
   h3 {
     @include euiTitle($euiFontSizeL);
-    font-size: ($euiFontSizeL/$euiFontSize)*100%; /* 1 */
     font-weight: $euiFontWeightMedium;
-    margin-bottom: .5em;
-  }
-
-  h4, h5, h6 {
-    margin-bottom: .5em;
   }
 
   h4 {
     @include euiTitle($euiFontSize);
-    font-size: 100%; /* 1 */
   }
 
   h5 {
     @include euiTitle($euiFontSizeS);
-    font-size: ($euiFontSizeS/$euiFontSize)*100%; /* 1 */
   }
 
   h6 {
     @include euiTitle($euiFontSizeXS);
-    font-size: ($euiFontSizeXS/$euiFontSize)*100%; /* 1 */
     text-transform: uppercase;
   }
 
-  small {
-    @include euiFontSizeS;
-    font-size: ($euiFontSizeS/$euiFontSize)*100%; /* 1 */
-  }
+  @include euiScaleText($euiFontSize);
 
   &.euiText--small {
     @include euiFontSizeS;
-
-    * + h1,
-    * + h2,
-    * + h3,
-    * + h4,
-    * + h5,
-    * + h6 {
-      margin-top: $euiSizeL;
-    }
+    @include euiScaleText($euiFontSizeS);
   }
 
   &.euiText--extraSmall {
     @include euiFontSizeXS;
-
-    * + h1,
-    * + h2,
-    * + h3,
-    * + h4,
-    * + h5,
-    * + h6 {
-      margin-top: $euiSizeM;
-    }
+    @include euiScaleText($euiFontSizeXS);
   }
 
   > :last-child {
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 04da9e35beb..0f06070e9be 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -12,7 +12,7 @@
 
 @mixin euiTitle($fontSize: null) {
   $font-weight: $euiFontWeightMedium;
-  $line-height: 1.2;
+  $line-height: 1.25;
 
   @if $fontSize {
     @include fontSize($fontSize);
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index a76f8104706..da98aa9e0ee 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -22,15 +22,16 @@ $euiFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
 $euiCodeFontFamily: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 
 // Font sizes -- scale is loosely based on Major Third (1.250)
+$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75;
 
-$euiFontSize:       $euiSize !default;
+$euiFontSize:       $euiSize !default; // 5th position in scale
 
-$euiFontSizeXS:     $euiFontSize * .75 !default;
-$euiFontSizeS:      $euiFontSize * .875 !default;
-$euiFontSizeM:      $euiFontSize * 1.125 !default;
-$euiFontSizeL:      $euiFontSize * 1.25 !default;
-$euiFontSizeXL:     $euiFontSize * 1.75 !default;
-$euiFontSizeXXL:    $euiFontSize * 2.25 !default;
+$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default;
+$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default;
+$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default;
+$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default;
+$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default;
+$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default;
 
 // Line height
 
diff --git a/src/themes/k6/k6_globals.scss b/src/themes/k6/k6_globals.scss
index e61c08a4107..4ac83328313 100644
--- a/src/themes/k6/k6_globals.scss
+++ b/src/themes/k6/k6_globals.scss
@@ -1,14 +1,16 @@
 // Font families
 $euiFontFamily: 'Open Sans', Helvetica, Arial, sans-serif;
 
-// Font Sizes
-$euiFontSize:       14px;
-$euiFontSizeXS:     12px;
-$euiFontSizeS:      14px;
-$euiFontSizeM:      16px;
-$euiFontSizeL:      18px;
-$euiFontSizeXL:     24px;
-$euiFontSizeXXL:    32px;
+$euiTextScale: 2.28571429, 1.71428571, 1.28571429, 1.14285714, 1, 1, 0.85714286;
+
+$euiFontSize:       14px; // 5th position in scale
+
+$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7); // 12px
+$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6); // 14px
+$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4); // 16px
+$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3); // 18px
+$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2); // 24px
+$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1); // 32px
 
 // Make titles bold.
 $euiFontWeightLight: 600;

From c7fc95c23aa667417773d025fdb94ff9f82771a2 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 14:38:04 -0400
Subject: [PATCH 13/19] Removing uppercase example from docs

---
 src-docs/src/views/title/title.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
index c289ace91f7..8e74e4e7bbe 100644
--- a/src-docs/src/views/title/title.js
+++ b/src-docs/src/views/title/title.js
@@ -31,11 +31,6 @@ export default () => (
       <h6>This is an extra extra extra small title and should only be used when the title is inconsequential (like a label)</h6>
     </EuiTitle>
 
-    <EuiTitle size="xxxs" textTransform="uppercase">
-      <h6>This is an extra extra extra small title that is uppercase</h6>
-    </EuiTitle>
-
-
     <EuiHorizontalRule />
 
     <EuiTitle size="l">

From e0e82363795fbea796e6ad1d38d9320490f7a7e1 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 14:45:59 -0400
Subject: [PATCH 14/19] Fix error

---
 src/components/text/_text.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 6173a0b77a3..52830e680a5 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,7 +1,6 @@
 // This should only be used for .euiText, therefore it's not included in a separate mixin file
 @mixin euiScaleText($baseFontSize) {
-  $baseLineHeight: ($baseFontSize * $euiLineHeight);
-  $baseLineHeightMultiplier: $baseLineHeight/3;
+  $baseLineHeightMultiplier: $baseFontSize/2;
 
   p,
   ul,
@@ -63,12 +62,12 @@
 
   h5 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 6));
-    line-height: convertToRem($baseLineHeight);
+    line-height: convertToRem($baseLineHeightMultiplier * 2);
   }
 
   h6 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 7));
-    line-height: convertToRem($baseLineHeight);
+    line-height: convertToRem($baseLineHeightMultiplier * 2);
     text-transform: uppercase;
   }
 

From 855c65a67bf3e37b9d5b309bd8c2e8a036ff74f5 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 16:34:44 -0400
Subject: [PATCH 15/19] Updating euiTitle mixin to add rem valued line-heights
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The mixin also recommends using the same prop names as EuiTitle as arguments (ie “xs”, “m”, “l”)
- Added another mid-way font weight
- Updated docs
---
 src-docs/src/views/title/title.js             | 13 ++++
 src/components/call_out/_call_out.scss        |  7 +-
 .../description_list/_description_list.scss   |  8 +--
 src/components/modal/_modal.scss              |  2 +-
 src/components/popover/_mixins.scss           |  3 +-
 src/components/side_nav/_side_nav_item.scss   |  2 +-
 src/components/steps/_steps.scss              |  4 +-
 src/components/steps/_steps_horizontal.scss   |  2 +-
 src/components/table/_table.scss              |  5 +-
 src/components/text/_text.scss                | 37 ++++------
 src/components/title/_title.scss              | 12 ++--
 src/components/toast/_toast.scss              |  4 +-
 src/global_styling/mixins/_typography.scss    | 72 +++++++++----------
 src/global_styling/variables/_typography.scss |  8 +++
 14 files changed, 96 insertions(+), 83 deletions(-)

diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js
index 8e74e4e7bbe..10b7b876d78 100644
--- a/src-docs/src/views/title/title.js
+++ b/src-docs/src/views/title/title.js
@@ -3,6 +3,8 @@ import React from 'react';
 import {
   EuiTitle,
   EuiHorizontalRule,
+  EuiSpacer,
+  EuiCode,
 } from '../../../../src/components';
 
 export default () => (
@@ -10,26 +12,37 @@ export default () => (
     <EuiTitle size="l">
       <h1>This is a large title, only one should exist per page</h1>
     </EuiTitle>
+    <EuiCode>size=&quot;l&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle>
       <h2>This is the default size for title</h2>
     </EuiTitle>
+    <EuiCode>size=&quot;m&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="s">
       <h3>This is a small title</h3>
     </EuiTitle>
+    <EuiCode>size=&quot;s&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="xs">
       <h4>This is an extra small title</h4>
     </EuiTitle>
+    <EuiCode>size=&quot;xs&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="xxs">
       <h5>This is an extra extra small title</h5>
     </EuiTitle>
+    <EuiCode>size=&quot;xxs&quot;</EuiCode>
 
+    <EuiSpacer />
     <EuiTitle size="xxxs">
       <h6>This is an extra extra extra small title and should only be used when the title is inconsequential (like a label)</h6>
     </EuiTitle>
+    <EuiCode>size=&quot;xxxs&quot;</EuiCode>
 
     <EuiHorizontalRule />
 
diff --git a/src/components/call_out/_call_out.scss b/src/components/call_out/_call_out.scss
index cf4afe01c3a..c8dd415f04d 100644
--- a/src/components/call_out/_call_out.scss
+++ b/src/components/call_out/_call_out.scss
@@ -40,8 +40,8 @@ $callOutTypes: (
  * 3. Apply margin to all but last item in the flex.
  */
 .euiCallOutHeader {
-  @include euiTitle($euiFontSize);
-  font-weight: 500;
+  @include euiTitle("xs");
+  font-weight: $euiFontWeightRegular;
   display: flex;
   align-items: baseline; /* 1 */
 
@@ -55,7 +55,8 @@ $callOutTypes: (
 
   // smaller font size for headers in small callout
   .euiCallOut--small & {
-    @include euiTitle($euiFontSizeS);
+    @include euiTitle("xxs");
+    font-weight: $euiFontWeightRegular;
   }
 }
 
diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss
index 0427832a8db..54159f632e8 100644
--- a/src/components/description_list/_description_list.scss
+++ b/src/components/description_list/_description_list.scss
@@ -3,7 +3,7 @@
   &.euiDescriptionList--row {
 
     .euiDescriptionList__title {
-      @include euiTitle($euiFontSize);
+      @include euiTitle("xs");
       margin-top: $euiSize;
 
       // Make sure the first <dt> doesn't get a margine.
@@ -29,7 +29,7 @@
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
-        @include euiTitle($euiFontSizeS);
+        @include euiTitle("xxs");
       }
 
       .euiDescriptionList__description {
@@ -54,7 +54,7 @@
     }
 
     .euiDescriptionList__title {
-      @include euiTitle($euiFontSize);
+      @include euiTitle("xs");
       flex-basis: 50%;
       padding-right: $euiSizeS;
     }
@@ -76,7 +76,7 @@
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
-        @include euiTitle($euiFontSizeS);
+        @include euiTitle("xxs");
       }
 
       .euiDescriptionList__description {
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index c35e074ae1d..349b1c814f3 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -32,7 +32,7 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma
 }
 
   .euiModalHeader__title {
-    @include euiTitle($euiFontSizeXL);
+    @include euiTitle("m");
   }
 
 .euiModalBody {
diff --git a/src/components/popover/_mixins.scss b/src/components/popover/_mixins.scss
index d733e4cee35..7dfeb314343 100644
--- a/src/components/popover/_mixins.scss
+++ b/src/components/popover/_mixins.scss
@@ -1,5 +1,6 @@
 @mixin euiPopoverTitle {
-  @include euiTitle($euiFontSize);
+  @include euiTitle("xs");
+  font-weight: $euiFontWeightMid;
   background-color: $euiColorLightestShade;
   padding: $euiSizeM;
 
diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss
index 746ad0effb8..ec284192083 100644
--- a/src/components/side_nav/_side_nav_item.scss
+++ b/src/components/side_nav/_side_nav_item.scss
@@ -94,7 +94,7 @@
     }
 
     .euiSideNavItemButton__label {
-      @include euiTitle($euiFontSize);
+      @include euiTitle("xs");
     }
   }
 
diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
index ed8befd029e..dfab04efe56 100644
--- a/src/components/steps/_steps.scss
+++ b/src/components/steps/_steps.scss
@@ -13,7 +13,7 @@
   }
 
   .euiStep__title {
-    font-weight: $euiFontWeightRegular;
+    font-weight: $euiFontWeightMid;
 
     &::before {
       content: attr(data-step-num); // Get the number from the data attribute
@@ -26,7 +26,7 @@
 
   .euiStep__content {
     border-left: $euiBorderThick;
-    padding: $euiSize;
+    padding: $euiSize $euiSize $euiSizeXL;
     margin: $euiSizeS 0;
 
     // Align the content's contents with the title
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
index 52b536300ec..bc1f63d9c60 100644
--- a/src/components/steps/_steps_horizontal.scss
+++ b/src/components/steps/_steps_horizontal.scss
@@ -89,7 +89,7 @@
 
 .euiStepHorizontal__title {
   display: block;
-  @include euiTitle($euiFontSize);
+  @include euiTitle("xs");
   margin-top: $euiSizeS;
   font-weight: $euiFontWeightRegular;
 
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index 277adb61e30..8accafadd65 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -26,11 +26,12 @@
 
 .euiTableHeaderCell {
   @include euiTableCell;
-
-  color: $euiTitleColor;
+  @include euiTitle("xxs");
+  font-weight: $euiFontWeightMedium;
 
   .euiTableHeaderButton {
     text-align: left;
+    font-weight: $euiFontWeightMedium;
   }
 }
 
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index 52830e680a5..3df7716145a 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -1,17 +1,18 @@
 // This should only be used for .euiText, therefore it's not included in a separate mixin file
 @mixin euiScaleText($baseFontSize) {
   $baseLineHeightMultiplier: $baseFontSize/2;
+  line-height: convertToRem($baseLineHeightMultiplier*3);
 
   p,
   ul,
   ol,
   blockquote,
   img {
-    margin-bottom: convertToRem($baseLineHeightMultiplier * 4);
+    margin-bottom: convertToRem($baseLineHeightMultiplier * 3);
   }
 
   ul, ol {
-    margin-left: convertToRem($baseLineHeightMultiplier * 4);
+    margin-left: convertToRem($baseLineHeightMultiplier * 3);
   }
 
   blockquote {
@@ -36,24 +37,19 @@
     margin-top: convertToRem($baseLineHeightMultiplier * 4);
   }
 
-  /**
-  * 1. Set line-height to a muliplier of the base line height without being under the font-size.
-  */
-
   h1 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 1));
-    line-height: convertToRem($baseLineHeightMultiplier * 6); /* 1 */
+    line-height: convertToRem($baseLineHeightMultiplier * 6);
   }
 
   h2 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 2));
-    line-height: convertToRem($baseLineHeightMultiplier * 5); /* 1 */
+    line-height: convertToRem($baseLineHeightMultiplier * 5);
   }
 
   h3 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 3));
-    line-height: convertToRem($baseLineHeightMultiplier * 4); /* 1 */
-    font-weight: $euiFontWeightMedium;
+    line-height: convertToRem($baseLineHeightMultiplier * 4);
   }
 
   h4 {
@@ -68,7 +64,6 @@
   h6 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 7));
     line-height: convertToRem($baseLineHeightMultiplier * 2);
-    text-transform: uppercase;
   }
 
   small {
@@ -134,44 +129,40 @@
     }
   }
 
-  /**
-  * 1. Customize font size to be a percentage of the .euiText container's base font size (easy scaling)
-  */
   h1 {
-    @include euiTitle($euiFontSizeXXL);
+    @include euiTitle("l");
   }
 
   h2 {
-    @include euiTitle($euiFontSizeXL);
+    @include euiTitle("m");
   }
 
   h3 {
-    @include euiTitle($euiFontSizeL);
-    font-weight: $euiFontWeightMedium;
+    @include euiTitle("s");
   }
 
   h4 {
-    @include euiTitle($euiFontSize);
+    @include euiTitle("xs");
   }
 
   h5 {
-    @include euiTitle($euiFontSizeS);
+    @include euiTitle("xxs");
   }
 
   h6 {
-    @include euiTitle($euiFontSizeXS);
+    @include euiTitle("xxxs");
     text-transform: uppercase;
   }
 
   @include euiScaleText($euiFontSize);
 
   &.euiText--small {
-    @include euiFontSizeS;
+    @include fontSize($euiFontSizeS);
     @include euiScaleText($euiFontSizeS);
   }
 
   &.euiText--extraSmall {
-    @include euiFontSizeXS;
+    @include fontSize($euiFontSizeXS);
     @include euiScaleText($euiFontSizeXS);
   }
 
diff --git a/src/components/title/_title.scss b/src/components/title/_title.scss
index 4b656cce280..30e8a1fcbc8 100644
--- a/src/components/title/_title.scss
+++ b/src/components/title/_title.scss
@@ -9,25 +9,25 @@
 }
 
 .euiTitle--xxxsmall {
-  @include euiTitle($euiFontSizeXS);
+  @include euiTitle("xxxs");
 }
 
 .euiTitle--xxsmall {
-  @include euiTitle($euiFontSizeS);
+  @include euiTitle("xxs");
 }
 
 .euiTitle--xsmall {
-  @include euiTitle($euiFontSize);
+  @include euiTitle("xs");
 }
 
 .euiTitle--small {
-  @include euiTitle($euiFontSizeL);
+  @include euiTitle("s");
 }
 
 .euiTitle--medium {
-  @include euiTitle($euiFontSizeXL);
+  @include euiTitle("m");
 }
 
 .euiTitle--large {
-  @include euiTitle($euiFontSizeXXL);
+  @include euiTitle("l");
 }
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
index a0cf9b87645..247b680f5e6 100644
--- a/src/components/toast/_toast.scss
+++ b/src/components/toast/_toast.scss
@@ -69,7 +69,6 @@ $toastTypes: (
  * 3. Account for close button.
  */
 .euiToastHeader {
-  @include euiFontSizeM;
   padding-right: $euiSizeL; /* 3 */
 
   display: flex;
@@ -90,7 +89,8 @@ $toastTypes: (
   }
 
   .euiToastHeader__title {
-    @include euiTitle;
+    @include euiTitle("s");
+    font-weight: $euiFontWeightLight;
   }
 
 .euiToastHeader--withBody {
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 0f06070e9be..cf397e6ace2 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -10,48 +10,44 @@
   font-family: $euiCodeFontFamily;
 }
 
-@mixin euiTitle($fontSize: null) {
-  $font-weight: $euiFontWeightMedium;
-  $line-height: 1.25;
-
-  @if $fontSize {
-    @include fontSize($fontSize);
-
-    @if ($fontSize > $euiFontSizeL) {
-      $font-weight: $euiFontWeightLight;
-    }
-
-    @if ($fontSize < $euiFontSizeXL) {
-      $font-weight: $euiFontWeightRegular;
-    }
-
-    @if ($fontSize < $euiFontSizeL) {
-      $font-weight: $euiFontWeightMedium;
-      $line-height: $euiLineHeight;
-    }
-
-    @if ($fontSize < $euiFontSizeS) {
-      $font-weight: $euiFontWeightBold;
-    }
-  }
-
-  font-weight: $font-weight;
-  line-height: $line-height;
-  color: $euiTitleColor;
-}
-
 @mixin euiText {
   color: $euiTextColor;
   font-weight: $euiFontWeightRegular;
 }
 
-// Font sizing extends, using rem mixin
+@mixin euiTitle($size: "m") {
+  color: $euiTitleColor;
 
-@mixin euiFontSize {
-  @include fontSize($euiFontSize);
-  line-height: $euiLineHeight;
+  @if $size == "xxxs" {
+    @include euiFontSizeXS;
+    font-weight: $euiFontWeightBold;
+    @include lineHeight(3);
+  } @else if $size == "xxs" {
+    @include euiFontSizeS;
+    font-weight: $euiFontWeightBold;
+    @include lineHeight(3);
+  } @else if $size == "xs" {
+    @include euiFontSize;
+    font-weight: $euiFontWeightMedium;
+    @include lineHeight(3);
+  } @else if $size == "s" {
+    @include euiFontSizeL;
+    font-weight: $euiFontWeightMedium;
+    @include lineHeight(4);
+  } @else if $size == "m" {
+    @include euiFontSizeXL;
+    @include lineHeight(5);
+  } @else if $size == "l" {
+    @include euiFontSizeXXL;
+    @include lineHeight(6);
+  } @else {
+    @include fontSize($size);
+    @include lineHeight(3);
+  }
 }
 
+// Font sizing extends, using rem mixin
+
 @mixin euiFontSizeXS {
   @include fontSize($euiFontSizeXS);
   line-height: $euiLineHeight;
@@ -74,15 +70,17 @@
 
 @mixin euiFontSizeL {
   @include fontSize($euiFontSizeL);
-  line-height: 1.2;
+  line-height: $euiLineHeight;
 }
 
 @mixin euiFontSizeXL {
   @include fontSize($euiFontSizeXL);
-  line-height: 1.2;
+  line-height: 1.25;
+  font-weight: $euiFontWeightLight; // always apply light weight to x-large type
 }
 
 @mixin euiFontSizeXXL {
   @include fontSize($euiFontSizeXXL);
-  line-height: 1.2;
+  line-height: 1.25;
+  font-weight: $euiFontWeightLight; // always apply light weight to x-large type
 }
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index da98aa9e0ee..137765a82e1 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -16,6 +16,13 @@
   font-size: convertToRem($size);
 }
 
+// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
+
+@mixin lineHeight($multiplier: 3) {
+  line-height: convertToRem(($euiFontSize/2)*$multiplier);
+}
+
+
 // Families
 
 $euiFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
@@ -42,5 +49,6 @@ $euiLineHeight:     1.5;
 
 $euiFontWeightLight:    300 !default;
 $euiFontWeightRegular:  400 !default;
+$euiFontWeightMid:      500 !default;
 $euiFontWeightMedium:   600 !default;
 $euiFontWeightBold:     700 !default;

From ff492f52ead842a7ff061679e7a4564345da27a2 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 22:34:39 -0400
Subject: [PATCH 16/19] updating lineheight mixin name

---
 src/global_styling/mixins/_typography.scss    | 14 +++++++-------
 src/global_styling/variables/_typography.scss |  8 +++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index cf397e6ace2..8b0b790384f 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -21,28 +21,28 @@
   @if $size == "xxxs" {
     @include euiFontSizeXS;
     font-weight: $euiFontWeightBold;
-    @include lineHeight(3);
+    @include lineHeightFromBaseline(3);
   } @else if $size == "xxs" {
     @include euiFontSizeS;
     font-weight: $euiFontWeightBold;
-    @include lineHeight(3);
+    @include lineHeightFromBaseline(3);
   } @else if $size == "xs" {
     @include euiFontSize;
     font-weight: $euiFontWeightMedium;
-    @include lineHeight(3);
+    @include lineHeightFromBaseline(3);
   } @else if $size == "s" {
     @include euiFontSizeL;
     font-weight: $euiFontWeightMedium;
-    @include lineHeight(4);
+    @include lineHeightFromBaseline(4);
   } @else if $size == "m" {
     @include euiFontSizeXL;
-    @include lineHeight(5);
+    @include lineHeightFromBaseline(5);
   } @else if $size == "l" {
     @include euiFontSizeXXL;
-    @include lineHeight(6);
+    @include lineHeightFromBaseline(6);
   } @else {
     @include fontSize($size);
-    @include lineHeight(3);
+    @include lineHeightFromBaseline(3);
   }
 }
 
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 137765a82e1..54f7b19c68c 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -17,8 +17,10 @@
 }
 
 // Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
-
-@mixin lineHeight($multiplier: 3) {
+// EX: A proper line-height for text is 1.5 times the font-size.
+//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
+//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
+@mixin lineHeightFromBaseline($multiplier: 3) {
   line-height: convertToRem(($euiFontSize/2)*$multiplier);
 }
 
@@ -29,7 +31,7 @@ $euiFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
 $euiCodeFontFamily: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 
 // Font sizes -- scale is loosely based on Major Third (1.250)
-$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75;
+$euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75;
 
 $euiFontSize:       $euiSize !default; // 5th position in scale
 

From 8e4c0d2791a4ce69083c0298b8298137885d4270 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 22:38:27 -0400
Subject: [PATCH 17/19] changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbeda7b5afa..8f9b07a8379 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Tweaked sizing, weights, color, line-heights, and added more levels to `EuiTitle` and `EuiText` ([#627](https://github.com/elastic/eui/pull/627))
+
 **Bug fixes**
 
 - Fix visual shadow glitch on hover of `EuiToast` ([#632](https://github.com/elastic/eui/pull/632))

From 0d9f9669e6e6afc92df66078e71611eee2cfef1c Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 22:41:25 -0400
Subject: [PATCH 18/19] Get rid of $euiFontWeightMid

---
 src/components/popover/_mixins.scss           | 2 +-
 src/components/steps/_steps.scss              | 2 +-
 src/global_styling/variables/_typography.scss | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/popover/_mixins.scss b/src/components/popover/_mixins.scss
index 7dfeb314343..4410bad3b37 100644
--- a/src/components/popover/_mixins.scss
+++ b/src/components/popover/_mixins.scss
@@ -1,6 +1,6 @@
 @mixin euiPopoverTitle {
   @include euiTitle("xs");
-  font-weight: $euiFontWeightMid;
+  //font-weight: $euiFontWeightMid;
   background-color: $euiColorLightestShade;
   padding: $euiSizeM;
 
diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
index dfab04efe56..e0c6f014413 100644
--- a/src/components/steps/_steps.scss
+++ b/src/components/steps/_steps.scss
@@ -13,7 +13,7 @@
   }
 
   .euiStep__title {
-    font-weight: $euiFontWeightMid;
+    font-weight: $euiFontWeightMedium;
 
     &::before {
       content: attr(data-step-num); // Get the number from the data attribute
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index 54f7b19c68c..c33ebfc3c2b 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -51,6 +51,5 @@ $euiLineHeight:     1.5;
 
 $euiFontWeightLight:    300 !default;
 $euiFontWeightRegular:  400 !default;
-$euiFontWeightMid:      500 !default;
 $euiFontWeightMedium:   600 !default;
 $euiFontWeightBold:     700 !default;

From 637e650018f7e5d01eacbb58d856a46b84e2f7b8 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 4 Apr 2018 22:44:49 -0400
Subject: [PATCH 19/19] remove comment

---
 src/components/popover/_mixins.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/popover/_mixins.scss b/src/components/popover/_mixins.scss
index 4410bad3b37..d41ab9c21aa 100644
--- a/src/components/popover/_mixins.scss
+++ b/src/components/popover/_mixins.scss
@@ -1,6 +1,5 @@
 @mixin euiPopoverTitle {
   @include euiTitle("xs");
-  //font-weight: $euiFontWeightMid;
   background-color: $euiColorLightestShade;
   padding: $euiSizeM;