Update docs on typography helpers

Author: pichfl

docs/concepts/typography.md

@@ -10,6 +10,8 @@ Please refer to the <a href="colours">Colors</a> section for more information on
 
 ### Sizes
 
+Disclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the `<h1>` for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all `<h2>` on that page need `.text-xl` to look like `<h1>` and so on.
+
 Use `.text-sm` for small headings or notice paragraphs.
 
 ```html
@@ -42,28 +44,38 @@ Use `.text-md` for section headings. This is also the default size for the `h3`
 </div>
 ```
 
-Use `.large` for content page headings. This is also the default size for the `h2` element.
+Use `.text-lg` for content page headings. This is also the default size for the `h2` element.
 
 ```html
 <div class="text-lg">
   Build with the teams that never stop shipping.
 </div>
 ```
 
-Use `.xlarge` for landing page headlines. This is also the default size for the `h1` element.
+Use `.text-xl` for landing page headlines. This is also the default size for the `h1` element.
 
 ```html
 <div class="text-xl">
   Build with the teams that never stop shipping.
 </div>
 ```
 
-Use `.display` in page headers.
+Use `.text-hero-xl` for headlines in page headers (heros).
 
 ```html
-<div class="display">
+<h1 class="text-hero-xl">
   Build with the teams that never stop shipping.
-</div>
+</h1>
+```
+
+Use `.text-hero-base` for plain text in page headers (heros).
+
+```html
+<p class="text-hero-base">
+  Ember.js is a productive, battle-tested JavaScript framework for building
+  modern web applications. It includes everything you need to build rich UIs
+  that work on any device.
+</p>
 ```
 
 ## Weights