Skip to main content

Pivotal UI

v18.1.0
Modifiers / Typography

Typography

Use the typography modifiers to control text sizing, emphasis, and color.

Source Sans Pro is Pivotal UI's default font family. It is packaged with the typography CSS, so the import statement below includes it in your site.

Classes

In addition to the modifiers listed here, importing typography CSS gives you the type-{color-name} modifiers listed on the Colors page.

ModifierPurpose
em-lowMakes font weight thin
em-defaultMakes font weight default
em-highMakes font weight bold
em-maxMakes font weight extra bold
em-altMakes text uppercase
h1Sets font size, family, and spacing to be the same as an <h1> tag
h2Sets font size, family, and spacing to be the same as an <h2> tag
h3Sets font size, family, and spacing to be the same as an <h3> tag
h4Sets font size, family, and spacing to be the same as an <h4> tag
h5Sets font size, family, and spacing to be the same as an <h5> tag
h6Sets font size, family, and spacing to be the same as an <h6> tag
type-lgMakes font size larger than the default
type-smMakes font size smaller than the default
type-xsMakes font size much smaller than the default
Default font sizes

an h1 (32px)

an h2 (24px)

an h3 (20px)

an h4 (18px)

an h5 (16px)
an h6 (13px)

base font size (16px)

Size modifiers

large font size (18px)

base font size (16px)

small font size (14px)

extra small font size (12px)

Emphasis modifiers

Low emphasis

Default emphasis

High emphasis

Max emphasis

Alternate emphasis (all-caps)

Separating code and visual semantics

Sometimes you may need to use a heading which has different visual and code semantics. You can accomplish this by combining classes with elements (classes take visual precedence over elements in this case).

I am an h1!

I am an h2!

Using heading classes

If it's not a heading but you need similar visual treatment, you can add just the class to any element. However, use headings when possible since they add semantic value.

Heading level 2 on a div
Multiline headings

Headings are spaced so their line height and padding are consistent on one or many lines.

One line heading

I am a
multiline heading

Imports

Import CSS:

import 'pivotal-ui/css/typography';