Document .font() and .font-align() better.

Author: chromice

README.md

@@ -268,6 +268,8 @@ main {
 
 ##### Usage
 
+Provided we define the document baseline as follows:
+
 ```less
 @helvetica-font-family: 'Helvetica', sans-serif;
 @helvetica-font-variation: italic 400;
@@ -280,6 +282,7 @@ main {
 .use-baseline-grid(16px, 1.5, verdana);
 ```
 
+...we can set the font properties like this:
 
 ```less
 h1 {
@@ -290,6 +293,22 @@ h1 + p {
 }
 ```
 
+...which, once compiled, looks like this...
+
+```css
+h1 {
+    position: relative;
+    top: -10.732px;
+    top: -0.67075rem;
+    font: italic 400 30px / 1.25 'Helvetica', sans-serif;
+    font-size: 1.875rem;
+}
+h1 + p {
+    font: normal 400 20px / 1.45 'Verdana', sans-serif;
+    font-size: 1.25rem;
+}
+```
+
 #### `.height()`, `.min-height()`, `.max-height()`, `.top()`, `.bottom()`, `.margin-top()`, `.margin-bottom()`, `.padding-top()`, `.padding-bottom()`
 
 These mixins let you set the respective CSS property in baseline rows.