Font Directives

There are two types of typography classes, let's take a look at the types that are related to fonts.

Font Family

font-sans font-serif font-mono

theme: {
  fontFamily: {
    'sans': ['Helvetica', 'Arial', 'sans-serif'],
    'display': ['Custom Font', 'Other Font'],
  }
}

Docs Try it

There are three diferent classes that you can use to specify what type of font you want to use in a project. The default styles

The font-sans style is already applied to the page by default. By default, it will try to apply default system fonts for the styles, but you can override any of the default families by modifying the theme.fontFamily element in tailwind.config.js`

You can even create a new font by adding one or more elements to that object.

Font Size

• text-SIZ
  • SIZ (font-size/line-height...in rems)
    
    xs .75/1 sm .875/1.25 base 1/1.5 lg 1.125/1.75 xl 1.25/1.75
    2xl 1.5/2 3xl 1.875/2.25 4xl 2.25/2.5 5xl 3/1 6xl 3.75/1
    7xl 4.5/1 8xl 6/1 9xl 8/1

Docs Try it

Font size is handled through the text class and you add a size option here. this changes two parameters at the same time...font-size and line-height and you can see the values here.

The size and height is in rems so it's relative to the root size of the browser, which is usually 16 pixels.

Font Weight

• font-WGT
  • WGT (font-weight)
    
    thin 100 extralight 200 light 300 normal 400 medium 500
    semibold 600 bold 700 extrabold 800 black 900

Docs Try it

Font weight is handled through a series of named classes starting with the font keyword. I'm not sure I like this, I think it'd be better if they just made them numbers, but the names seem to make sense...just harder to remember.

If you're checking out the example, you'll notice that I loaded up a font here to make sure you could see the differences between the weights. Some fonts will only contain specific weights.

Font Style

• italic not-italic (font-style)

There are only two styles you can modify under font style, wether an item is italic or not. not-italic sets font-style to normal and it's obviously for changing things that would normally be bold, like headlines to not display as bold.

Docs Try it

Font Smoothing

• antialiased subpixel-antialiased

Docs Try it

There are two different types of font smoothing you can use. The default is called subpixel antialiased, if you want to switch it you simply add the aliased keyword and to override it, you use subpixel-antialiased. Note, these are pretty cutting edge classes and might not work in every browser.

Font Variant Numeric

normal-nums ordinal slashed-zero lining-nums
oldstyle-nums proportional-nums tabular-nums
diagonal-fractions stacked-fractions

Docs Try it

Tailwind comes with some pretty esoteric classes for controlling advanced styles for fonts.

The important thing to know is that not all fonts support these features and as a matter of fact most Google Fonts, even ones that point to fonts that would normally support these features will work.

Apparently, it needs to be a font in the OpenType format, so just be careful.

Having said that, you can see what they do in the example, you can control how ordinal numbers are formatted, wether a 0 character has a internal line or dot as in this font that shows it's not an O.

The oldstyle numbers show better looking numbers that go below and above the baseline.

With tabular numbers, you force numbers to line up the numbers sort of like with mono-spaced fonts.

Finally, you have a couple of options for showing fractions. They look pretty good, specially diagonal fractions.

I think these styles look pretty good and will still look fine if the font doesn't support it, so it doesn't hurt to use them.