Font Style

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

Italics can be used to emphasize a piece of content. Some common uses of italics include: titles, vehicle names, letters of the alphabet, scientific terms, and quotes.

Examples

<p class="i"></p>

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

<p class="fs-normal"></p>

A quote from Jan Tschichold about typography.

Previous

Font Family

Reference

MDN - Font Weight

tachyons-font-style

v4.0.5 131 B
Declarations
8
Selectors
8
Max. Specificity Score
10
Size of Avg. Rule
1
src/_font-style.css

/*

   FONT STYLE
   Docs: http://tachyons.io/docs/typography/font-style/

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

*/

.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; }
}