Main Typography

go.raybo.org/49ss

There's quite a few classes that will help you with typography, so let's take a look at what's available.

Font Sizes

h1 h2 h3 h4 h5 h6

fs-1 fs-2 fs-3 fs-4 fs-5 fs-6

display-1 display-2 display-3
display-4 display-5 display-6

lead

Try it

There are four types of font size classes.

The headline classes try to emulate the styles of headlines, so they will be the same size as an h1, h2, h3, etc. One of the nice things about these is that you can use them in inline or inline-block tags, so they don't have to have the space above and below the tag.

The font size tags, also match the headline tags, but without the boldness, applying only the font size.

The display heading classes are a lot bigger and are meant to stand out a bit more than headlines.

There is also a special class called lead that is really meant for paragraphs that need to stand out from regular text...usually at the top of an article.

Weight/Styles

  • fw-{WGT}

    • WGT: lighter light normal bold bolder

  • fst-{STL}

    • STL: italic normal

Try it

You can control both the weight and style of text with these classes. These styles will override the current weight, so for example, if you were using a headline tag, it will override the boldness.

The normal style is meant as a reset, so if something is already set to be italic, then this will set it back to normal.

Line Height

  • lh-{HGT}
    • HGT: 1 sm base lg

Try it

There's a few line height styles that let you quickly control the space between lines of text. I think they're a little hard to remember.

Text Alignment

  • text{-BR}-{TYP}
    • BR: sm md lg xl
    • TYP: start center end

Try it

Text alignment of course lets you control the alignment of the text. The interesting thing about these is that there is a series of optional breakpoint tags that let you control alignment at the different bootstrap breakpoints.

The other interesting thing is that there is no justification class as in previous versions. I'm not a fan of full justification. It think it looks awful and can create odd spacing when you have a thin container.

Text Decoration

  • text-decoration-{TYP}
    • TYP: underline line-through none

Try it

Text decoration lets you control the different type of underline styles available. They are often used to control the underlining of links. Notice that none here is used to get rid of an existing underline.