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.
| Modifier | Purpose |
|---|---|
em-low | Makes font weight thin |
em-default | Makes font weight default |
em-high | Makes font weight bold |
em-max | Makes font weight extra bold |
em-alt | Makes text uppercase |
h1 | Sets font size, family, and spacing to be the same as an <h1> tag |
h2 | Sets font size, family, and spacing to be the same as an <h2> tag |
h3 | Sets font size, family, and spacing to be the same as an <h3> tag |
h4 | Sets font size, family, and spacing to be the same as an <h4> tag |
h5 | Sets font size, family, and spacing to be the same as an <h5> tag |
h6 | Sets font size, family, and spacing to be the same as an <h6> tag |
type-lg | Makes font size larger than the default |
type-sm | Makes font size smaller than the default |
type-xs | Makes font size much smaller than the default |
an h1 (32px)
an h2 (24px)
an h3 (20px)
an h4 (18px)
an h5 (16px)
an h6 (13px)
base font size (16px)
large font size (18px)
base font size (16px)
small font size (14px)
extra small font size (12px)
Low emphasis
Default emphasis
High emphasis
Max emphasis
Alternate emphasis (all-caps)
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!
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.
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';