pxv

Typography

The way we're doing responsive typogrpahy is all new! Sorry! Writeup here.

h1 – This is how we CSS

 
h1 {
  @include setType(32, 48);
}

setType() can be used with 2 arguments. Specify the mobile font size, and desktop font size, both of which should be available in Figma. It will automatically scale based on site settings.

h2 – Heading example

h2 {
  @include setType(26, 40);
}

My favorite heading tag is h3

h3 {
  @include setType(22, 33);
}

Sometime's h4's get neglected

h4 {
  @include setType(20, 27);
}

But not as much as h5's

h5 {
  @include setType(18, 23);
}

This h6 is a bit larger than the paragraph

h6 {
  @include setType(16, 20);
}

This is an example paragraph tag. Sometimes for smaller fonts you want to override the smallest size it can go. In this case pass in the $minClamp argument which is the percentage the minimum font size should be. Set it to 100% to have it not scale any smaller than default.

p {
  @include setType(14, 16, $minClamp: 94%);
}

This is an example paragraph with the class ".p--xs". For very small selectors you may not want it to ever scale smaller. The `minClamp` argument can also just be value on it's own:

.p--xs {
  @include setType(10, 12, 100%);
}