Typography Variables

Whenever you change the font settings for a campaign in Design > Fonts, we automatically generate a set of SCSS variables that you can use in your custom styles.

We currently generate FontFamily, TextColor, and FontSize variables for all headings, paragraphs, and link variations.

Each heading is prefixed with $heading[1-6], paragraph with $paragraph, and link variation with $link<Variation> (e.g. $linkHover). This means that you can do stuff like this:

Variables

$heading1FontFamily
$heading1FontSize
$heading1TextColor

$heading2FontFamily
$heading2FontSize
$heading2TextColor

$heading3FontFamily
$heading3FontSize
$heading3TextColor

$heading4FontFamily
$heading4FontSize
$heading4TextColor

$heading5FontFamily
$heading5FontSize
$heading5TextColor

$heading6FontFamily
$heading6FontSize
$heading6TextColor

$paragraphFontFamily
$paragraphFontSize
$paragraphTextColor

$linkRegularFontFamily
$linkRegularFontSize
$linkRegularTextColor

$linkHoverFontFamily
$linkHoverFontSize
$linkHoverTextColor

$linkActiveFontFamily
$linkActiveFontSize
$linkActiveTextColor

Examples

Make text same size and font as h3

.foo .bar-title {
	font-size: $heading3FontSize;
  font-family: $heading3FontFamily;
}

Make text same size and font as your paragraph

.foo .bar-text {
  font-size: $paragraphFontSize;
  font-family: $heading3FontFamily;
}

Resize type elements

.foo h3.bar {
  font-size: $heading4FontSize;
}