pxv

Instead of the deprecated `vw()` function we will now be using postcss-pxv for viewport unit conversions. You can read more about that here.

Typography

h1 – This is how we CSS


h1 {
  --fontSize: 38;

  @media (min-width: #{$ts}px) and (max-width: #{$tl}px) {
    font-size: 44px;
  }

  @media (min-width: #{$tl}px) {
    --fontSize: 50;
  }
}

h2 – Heading example


h2 {
  --fontSize: 33;

  @media (min-width: #{$ts}px) and (max-width: #{$tl}px) {
    font-size: 38px;
  }
  @media (min-width: #{$tl}px) {
    --fontSize: 43;
  }
}

My favorite heading tag is h3


h3 {
  --fontSize: 28;

  @media (min-width: #{$ts}px) and (max-width: #{$tl}px) {
    font-size: 31.5px;
  }
  @media (min-width: #{$tl}px) {
    --fontSize: 35;
  }
}

But not as much as h5's


h5 {
  --fontSize: 21;

  @media (min-width: #{$ts}px) and (max-width: #{$tl}px) {
    font-size: 22.5px;
  }

  @media (min-width: #{$tl}px) {
    --fontSize: 24;
  }
}

This h6 is a bit larger than the paragraph


h6 {
  --fontSize: 18;

  @media (min-width: #{$ts}px) and (max-width: #{$tl}px) {
    font-size: 19px;
  }

  @media (min-width: #{$tl}px) {
    --fontSize: 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 {
  --fontSize: 14;
  --fontSizeMinClamp: 12;
  --fontSizeMaxClamp: 18;

  @media (min-width: #{$ts}px) and (max-width: #{$tl}px) {
    font-size: 16px;
  }

  @media (min-width: #{$tl}px) {
    --fontSize: 16;
    --fontSizeMinClamp: 14;
  }
}

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 {
  --fontSize: 12;
  --fontSizeMinClamp: 10;
  --fontSizeMaxClamp: 12;

  @media (min-width: #{$ts}px) and (max-width: #{$tl}px) {
    font-size: 12px;
  }

  @media (min-width: #{$tl}px) {
    --fontSize: 12;
    --fontSizeMinClamp: 10;
  }
}

i have a negative margin