typography

Typography

The basic typography and vertical rhythm is already setup by default. It's all variable-driven and moderately easy to modify.

Customizing typography

Overwrite these variables in _custom_variables.scss to change these defaults.

$user-font-family-sans-serif: "Source Sans Pro" !default;
$user-font-family-serif:      null !default;

$font-family-sans-serif: $user-font-family-sans-serif, "Helvetica Neue", Helvetica, sans-serif;
$font-family-serif:      $user-font-family-serif, Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, serif;
$font-family-monospace:  Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base:       $font-family-sans-serif !default;

$text-base-color:  #444 !default;
$text-light-color: lighten($text-base-color, 33%);
$text-dark-color:  darken($text-base-color, 33%);

$small-size:      0.8 !default;
$small-size-unit: em  !default;

Headings and paragraphs

Headings are given some default styling to give them a typographical hierarchy. There is more than one school of thought when using headings in markup. See this example:

<h1>This is a giant header</h1>

Your output is dependent on the styles given to h1{}. If you would rather present your h1 as a smaller font, maybe more like an h2, then your markup could look like this:

<h1 class="h2">This is a moderately big header.</h1>

Semantically, you are saying "this heading is as important as an h1, but should present itself as an h2".

Despite being a semantically correct and easily identifiable solution, it doesn't always feel right (or feels excessive) in a shared development environment. Therefore:

<h2>This is a moderately big header, too.</h2>

The code above works, but doesn't say as much semantically. YMMV.

This is a moderately big header.

And this is some paragraph text.

  <header>
    <h1 class="h2">This is a moderately big header.</h1>
  </header>
  <p>And this is some paragraph text.</p>

Helper classes

The following are some utility classes that help control the visuals of your typography.

A note about placeholders:

Why include placeholders along with classes? Why not just use one or the other? Because there are cases to be made for each at different times. It's sometimes less meaningful to use a class (or @extend a placeholder). I've found cases for both in all of my projects, so I am proactively trying to create placeholders for classes that I may later want to @extend. If this makes no sense, please feel free to ignore and do what you please :}

Oh, by the way: placeholders do not compile on their own, so there's no need to worry about bloating your code. However, classes DO compile, whether you use them or not, so stay cautious, friends.

Underline text
Superscript text
Subscript text
Small text
Uppercase text
Strikethrough text
Lorem ipsum dolor sit amet, nibh elit inermis ex eum, at quot verear vix, sed no unum dicam. Et pro possim repudiandae mediocritatem. Noster petentium expetenda ea pro, diam elit ridens id pro. Deserunt praesent ut vel, ad est natum habeo abhorreant.
Align left
Align center
Align right
Light text
Dark text
Thin text
Thick text
Normal weight text
Line height of 1 rem
Line height of 2 rem
Line height of 3 rem
Line height of 4 rem
  <div class="u">Underline text</div>
  <sup>Superscript text</sup>
  <br />
  <sub>Subscript text</sub>
  <br />
  <div class="small">Small text</div>
  <div class="uppercase">Uppercase text</div>
  <div class="strike">Strikethrough text</div>
  <div style="width: 250px;" class="truncated">
    Lorem ipsum dolor sit amet, nibh elit inermis ex eum, at quot verear vix, sed no unum dicam. Et pro possim repudiandae mediocritatem. Noster petentium expetenda ea pro, diam elit ridens id pro. Deserunt praesent ut vel, ad est natum habeo abhorreant.
  </div>
  <div class="text-l">Align left</div>
  <div class="text-c">Align center</div>
  <div class="text-r">Align right</div>
  <div class="light">Light text</div>
  <div class="dark">Dark text</div>
  <div class="thin">Thin text</div>
  <div class="thick">Thick text</div>
  <div class="normal">Normal weight text</div>
  <div class="line1">Line height of 1 rem</div>
  <div class="line2">Line height of 2 rem</div>
  <div class="line3">Line height of 3 rem</div>
  <div class="line4">Line height of 4 rem</div>

Responsive text

f-xl f-lg h1 h2 h3 h4 and p classes react responsively to change the font-size at breakpoints. This will scale down font sizes for smaller devices for better readability.

XL text
LG text
h1 text
h2 text
h3 text
h4 text
h5 text
h6 text
p text
  <div class="f-xl">XL text</div>
  <div class="f-lg">LG text</div>
  <div class="h1">h1 text</div>
  <div class="h2">h2 text</div>
  <div class="h3">h3 text</div>
  <div class="h4">h4 text</div>
  <div class="h5">h5 text</div>
  <div class="h6">h6 text</div>
  <div class="p">p text</div>

Responsive text alignment

Some utility classes for forcing the alignment of text responsively.

Basic example: On larger screens, center some heading text for impact. On smaller viewports, you might want that text forced back to the left. In that case, we apply two classes: .text-c to center the text by default, and .text-l-xs to force left-aligned text on mobile viewports.

This Heading will Align Center by Default, and Left on xs Screens

  <h1 class="h3 text-c text-l-xs">
    This Heading will Align Center by Default, and Left on xs Screens
  </h1>