Typografier cheat sheet

Font sizes

  • .yotta

    • Two sizes larger than the <h1>.

  • .zetta

    • One size larger than the <h1>.

  • .exa, <h1>

    • Same size as the <h1>.

    • Five sizes larger than body copy.

  • .peta, <h2>

    • Four sizes larger than body copy.

  • .tera, <h3>

    • Three sizes larger than body copy.

  • .giga, <h4>

    • Two sizes larger than body copy.

  • .mega, <h5>

    • One size large than body copy.

  • .kilo, <h6>, <p>, default

    • The default font size, body copy.

  • .milli, <small>

    • One size smaller than the body copy.

  • .micro

    • Two sizes smaller than the body copy.

Spacing

  • .push

    • Adds consistent margin to the bottom.

    • Try to avoid using top margins for consistency.

  • .push-none, .push-0

    • Remove the bottom margin.

  • .push-2, .push-1-2, .push-1-4, .push-1-8

    • Add differing sizes of margin to the bottom.

    • Available as fully written out versions: .push-double, .push-half, .push-quarter, .push-eighth.

  • .push-r, .push-r-1-2, .push-r-1-4, .push-r-1-8

    • Add differing sizes of margin to the right.

    • Available as fully written out versions: .push-right, .push-right-half, .push-right-quarter, .push-right-eighth.

  • .gutter,.gutter-2, .gutter-1-2, .gutter-1-4, .gutter-1-8

    • Adds padding to left and right sides.

    • Available as fully written out versions: .gutter-double, .gutter-half, .gutter-quarter, .gutter-eighth.

  • .island,.island-2, .island-1-2, .island-1-4, .island-1-8

    • Adds padding to all four sides.

    • Available as fully written out versions: .island-double, .island-half, .island-quarter, .island-eighth.

  • .pad-t,.pad-t-2, .pad-t-1-2, .pad-t-1-4, .pad-t-1-8

    • Adds padding to top of the box.

    • Available as fully written out versions: .pad-top, .pad-top-double, .pad-top-half, .pad-top-quarter, .pad-top-eighth.

  • .pad-b,.pad-b-2, .pad-b-1-2, .pad-b-1-4, .pad-b-1-8

    • Adds padding to bottom of the box.

    • Available as fully written out versions: .pad-bottom, .pad-bottom-double, .pad-bottom-half, .pad-bottom-quarter, .pad-bottom-eighth.

Utilities

  • .text-left, .text-right, .text-center

    • Text alignment classes.

    • These are brute force and not responsive, so use only when it will always need that alignment.

  • .bold, .italic, .not-bold, .not-italic, .normal

    • Font style and weight classes.

    • .normal will set both font-weight and font-style

    • These are brute force and not responsive, so use only when it will always need that style or weight.

  • .text-upper, .text-lower

    • Font capitalization classes: all uppercase & all lowercase.

    • These are brute force and not responsive, so use only when it will always need that capitalization.

  • .hang-punc

    • Add to an element at the beginning of a line to make the character hang in the margin.

    • Great for use in blockquotes to hang the beginning quotation mark.

    • This class will only exist when the “Hang punctuation” option is selected.

    • <blockquote>
        <p><span class="hang-punc">“</span>Dinosaurs are amazing!”</p>
      </blockquote>
      
  • .wrapper

    • Sets the max-width of an element to 52em—which is a fairly good line-length for a website body.

    • There’s also .wrapper-no-center that doesn’t add the auto left & right margins.

  • .max-length

    • Sets the max-width of an element to 36em—which is a fairly good line-length for text content.

    • There’s also .max-length-no-center that doesn’t add the auto left & right margins.