Spacing Typography

go.raybo.org/2YMA

Some classes let you control the spacing between lines of text and characters.

Line Height

  • leading-TYP
    • TYP (line-height...in rem)

      3 .75 4 1 5 1.25 6 1.5
      7 1.75 8 2 9 2.25 10 2.5
    • TYP (line-height...relative)

      none 1 tight 1.25 snug 1.375
      normal 1.5 relaxed 1.625 loose 2

Docs Try it

With leading, you have two options, you can specify one of eight sizes that are sized in rem, which is relative to the root font sizes. Usually 16px.

You can also size relative to the line height in the current font size.

Just like with the other items, you can customize in the config file with using theme.extend.lineHeight, overriding existing items or adding new ones. You can turn this feature off using corePlugins.lineHeight and set it to false.

Letter Spacing

  • tracking-TYP
    • TYP (letter-spaci ng...in ems)

      tighter -.05 tight -.025 normal 0
      wide .025 wider .05 widest .1

Docs Try it

Letter is under the tracking class for some reason and you can see that the measurements here are very minor. A little letter spacing goes a long way. I think these are a good set of measurements.