Text Directives

In addition to fonts, there are related text properties that let you control things like color, opacity, alignment and more.

Text Colors

• text-COL(-STR)

Docs

Let's take a look at text colors. You can create colors using class with the keyword text, then include one of the color names and you can see them here, then optionally a strength.

A few things about this examples. First, you can clearly see that the transparent color is visible, but normally you wouldn't see it. Same thing with white...if I didn't add a background color you wouldn't see it. The difference is that if I would have made the background gray and the text transparent you wouldn't see the text either. It would still be there though.

Another thing, besides these three special 'colors' you always need to include a strength for the normal named colors like gray and beyond. You can see that these colors are designed to have lighter tints on the lower numbers and darker shades when the numbers are higher. If you're paying close attention you might notice that I used the 300 tint for the yellow color, because to me, the 500 looks more orange. For the rest I almost always chose 500.

Text Opacity

• text-opacity-AMT
  • AMT (opacity/100)
    
    0 5 10 20 25 30 40 50
60 70 75 80 90 95 100

Docs Try it

In addition to the color strengths you can add a text-opacity class to change the transparency of text. The amount is a number and you can see that it goes from 0-100 with a few more steps on the lower until 30 and a few more steps from 90-100.

Something interesting about this text-opacity is that it will only affect the text, not the background color. You're probably aware that changing the opacity on an element is a bit annoying in that it will cause both backgrounds on text, so this is pretty awesome.

If you look at the example code, you can see that it's actually modifying a

Text Alignment

• text-TYP
  • TYP (text-align)
    
    left center right justify

Docs Try it

Text sizing is handled through the text class and you add a size option here. The size is in rems so it's relative to the root size of the browser, which is usually 16 pixels. Each of these sizes also has a line-height in rems.

Text Decoration

• underline line-through no-underline

Docs Try it

There are options for working with the CSS text-decoration property by using these three parameters, they literally set the parameter to the value except for no-underline, which sets text-decoration to none.

no-underline is specially important for links, if you want to remove the classic underline normally placed on links.

Text Transform

• uppercase lowercase capitalize normal-case

Docs Try it

These options let you set values for the text-transform property. the values are pretty self explanatory, so uppercase makes the text uppercase and so on and so forth, except for normal-case, which sets the value of text-transform to none.

Text Overflow

truncate overflow-ellipsis overflow-clip

Docs Try it

Text overflow is slightly different than a regular overflow, which I cover later in another chapter. It controls how text behaves in an element.

truncate will add an ellipsis if there is too much text in overflowing text.

overflow-ellipsis truncates overflowing text with an ellipsis if the text is too long to fit on the current line. You should also add an overflow-hidden class if you want to see this at work.

overflow-clip will simply clip the word if it's too long to fit. You should also add an overflow-hidden class if you want to see this at work.