Inline Text

Codebase has several simple text utility classes.

• .t-bolder (and alias .t-heavy)

  Bolder text (default 900)

• .t-bold (and alias .t-strong)

  Bold text (default 700) (same as <b> and <strong>)

• .t-semibold

  Semibold text (default 600)

• .t-normal

  Returns text to normal weight (default 400) and removes italicization. Perhaps you may find this useful in some circumstances.

• .t-lighter (and alias .t-thin)

  Thin text (default 200)

• .t-italic (and alias .t-em)

  Italic text (same as <i> and <em>)

Bolder • Italic
Bold • Italic
Semibold • Italic
Normal • Italic
Lighter • Italic

Note: Your visitor needs to have lighter (thin), semi-bold and bolder (heavy) fonts in your website’s (or, webapp’s) typeface installed on their device, or else they may not see these differences.

• .t-strike

  Strikethrough text

• .t-muted

  Muted text (opacity set to 0.5)

• .t-uppercase

  Text in uppercase (all capitals)

• .t-lg

  Big text for making something stand out.

  .t-lg enlarges text by 1.25em (125%) on small to medium screens and then 1.5em (150%) on medium screens up, to make the enlargement more obvious when viewed at a distance.

  Note: .t-lg doesn’t work as an inline class on headings or heading utilities. If you want a heading to be bigger, then use .t-lg on a block wrapper around the heading. See large display text.

• .t-sm (alias: the <small> HTML tag)

  Small text for small print.

  .t-sm shrinks text to 0.85em (85%) of its base size.

• .t-loose

  For when you need some text to have a little extra letter-spacing.

• .t-tight

  For when you need some text to have a little less letter-spacing.

• .t-nowrap

  For when you don’t want a portion of text to wrap on to a newline (not demonstrated here).