Typografier cheat sheet

Font sizes

  • .tena

    • Four sizes larger than the <h1>

    • There’s even two larger sizes: .tenakilo & .tenamega

  • .nina

    • Three sizes larger than the <h1>

  • .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.

    • There’s even two smaller sizes: .nano & .pico

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.

Icons

These must be used in connection with the Modulifier icon classes.

  • .i-1

    • An icon that’s width & height are the same size of the current line-height.

  • .i-3-4

    • An icon that’s width & height are ¾ the size of the current line-height.

  • .i-1-2

    • An icon that’s width & height are ½ the size of the current line-height.

  • .i-1-4

    • An icon that’s width & height are ¼ the size of the current line-height.

  • .i-1-8

    • An icon that’s width & height are ⅛ the size of the current line-height.

  • .i-1-1-2, .i-3-2

    • An icon that’s width & height are 1½ the size of the current line-height.

  • .i-1-1-4, .i-5-4

    • An icon that’s width & height are 1¼ the size of the current line-height.

  • .i-1-3-4, .i-7-4

    • An icon that’s width & height are 1¾ the size of the current line-height.

  • .i-2

    • An icon that’s width & height are twice the size of the current line-height.