Typography

All Standards Toolkit applications are set in Lato. We also provide the System Font Stack as a fallback to Lato in case a system doesn't support it:

system-ui,
BlinkMacSystemFont,
-apple-system,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;

Typography Scale

SizeValue
display-xl3rem
display-l2.25rem
display1.875rem
xxl1.5rem
xl1.25rem
l1.125rem
m1rem
base0.875rem
s0.75rem
xs0.625rem
xxs0.5rem

Using Fonts

To reference typography sizes within your styles, use the font-size() mixin. The mixin takes the Named Size string as a value, returning the correct rem value.

@include font-size("m");
// returns
font-size: 1rem;

Utility Classes

The CSS Framework's Typography variables are available in Utility Class form, allowing the standard font sizes to be overridden. All Utility classes are prefixed with the namespace .rn_. This is to prevent them clashing with any custom styles you author.

The class syntax follows this pattern:

.rn_[Property]-[Size]
PropertySizeValue
text-xxs0.5rem
n/axs0.625rem
n/as0.75rem
n/abase0.875rem
n/am1rem
n/al1.125rem
n/axl1.25rem
n/axxl1.5rem
n/adisplay1.875rem
n/adisplay-l2.25rem
n/adisplay-xl3rem

For example, adding a class of .rn_text-xl would result in the following:

margin-top: 1.5rem;

To use the Utility classes with media queries, add the required breakpoint it:

.m:rn_text-xl
PropertySizeValue
text-xs0.75rem
n/as0.875rem
n/abase1rem
n/am1.125rem
n/al1.25rem
n/axl1.5rem
n/adisplay1.875rem
n/adisplay-l2.25rem
n/adisplay-xl3rem