Type Styles

Single purpose classes to set the font-style of any element at any breakpoint.

Font Style

CSS Reference
.i

Readers want what is important to be clearly laid out; they will not read what is too troublesome.

.fs-normal

A quote from Jan Tschichold about typography.

Text Align

CSS Reference
.tl

Aligned Left

.tr

Aligned Right

.tc

Aligned to the center

Text Transform

CSS Reference
.ttu

uppercase

.ttc

capitalized

.ttl

LOWER CASE THIS YELLING

Text Decoration

CSS Reference
.no-underline

This is not underlined.

.underline

This is underlined, however.

.strike

Strike this from the record

.anti-aliased

Anti-aliasing in general makes light text on a dark background look better than the default subpixel. Dark text on light backgrounds should not use it.

.anti-aliased

subpixel

/*

 FONT STYLE

 Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

*/
.anti-aliased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.i         { font-style: italic; }
.fs-normal { font-style: normal; }

@media (--breakpoint-not-small) {
.i-ns       { font-style: italic; }
.fs-normal-ns     { font-style: normal; }
}

@media (--breakpoint-medium) {
.i-m       { font-style: italic; }
.fs-normal-m     { font-style: normal; }
}

@media (--breakpoint-large) {
.i-l       { font-style: italic; }
.fs-normal-l     { font-style: normal; }
}

/*

TEXT ALIGN

Base
  t = text-align

Modifiers
  l = left
  r = right
  c = center

Media Query Extensions:
  -ns = not-small
  -m  = medium
  -l  = large

*/

.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }

@media (--breakpoint-not-small) {
.tl-ns  { text-align: left; }
.tr-ns  { text-align: right; }
.tc-ns  { text-align: center; }
}

@media (--breakpoint-medium) {
.tl-m  { text-align: left; }
.tr-m  { text-align: right; }
.tc-m  { text-align: center; }
}

@media (--breakpoint-large) {
.tl-l  { text-align: left; }
.tr-l  { text-align: right; }
.tc-l  { text-align: center; }
}

/*

 TEXT TRANSFORM

 Base:
   tt = text-transform

 Modifiers
   c = capitalize
   l = lowercase
   u = uppercase
   n = none

 Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

*/

.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }

@media (--breakpoint-not-small) {
.ttc-ns { text-transform: capitalize; }
.ttl-ns { text-transform: lowercase; }
.ttu-ns { text-transform: uppercase; }
.ttn-ns { text-transform: none; }
}

@media (--breakpoint-medium) {
.ttc-m { text-transform: capitalize; }
.ttl-m { text-transform: lowercase; }
.ttu-m { text-transform: uppercase; }
.ttn-m { text-transform: none; }
}

@media (--breakpoint-large) {
.ttc-l { text-transform: capitalize; }
.ttl-l { text-transform: lowercase; }
.ttu-l { text-transform: uppercase; }
.ttn-l { text-transform: none; }
}

/*

 TEXT DECORATION

 Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

*/

.strike       { text-decoration: line-through; }
.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }

@media (--breakpoint-not-small) {
.strike-ns       { text-decoration: line-through; }
.underline-ns    { text-decoration: underline; }
.no-underline-ns { text-decoration: none; }
}

@media (--breakpoint-medium) {
.strike-m       { text-decoration: line-through; }
.underline-m    { text-decoration: underline; }
.no-underline-m { text-decoration: none; }
}

@media (--breakpoint-large) {
.strike-l       { text-decoration: line-through; }
.underline-l {    text-decoration: underline; }
.no-underline-l { text-decoration: none; }
}