app/components/typography.css
[text-left]   { text-align: left; }
[text-center] { text-align: center; }
[text-right]  { text-align: right; }
[justify]     { text-align: justify; text-justify: inter-word; }
[uppercase]   { text-transform: uppercase; }
[capitalize]  { text-transform: capitalize; }
[italic]      { font-style: italic; }
[bold]        { font-weight: bolder; }
[book]        { font-weight: normal; }
[light]       { font-weight: 200; }
[thin]        { font-weight: lightest; }
[serif]       { font-family: var(--serif); }

[highlight] {
  position: relative;
  color: var(--text-color-1);

  &:before {
    content: " ";
    position: absolute;
    top: 1px;
    left: -.15em;
    width: 100%;
    height: 100%;
    padding: 0 .1em;
    background: hsla(calc(var(--hue) * 1.2), 50%, 75%, 20%);
    border-left: 2px solid var(--brand-color-3);
    border-right: 2px solid var(--brand-color-3);
  }
}

em {
  font-style: normal;
  font-size: 2.5em; 
  font-weight: lighter;
  position: relative; 
  top: .2em; 
}

a {
  display: inline-block;
  color: var(--brand-color-2);
  font-size: 1em;
}

slyd {
  line-height: 1.5;
  font-weight: 200;
  --fluid-type-min-size: 1.25;
  --fluid-type-max-size: 2.5;
  --fluid-type-min-screen: 20;
  --fluid-type-max-screen: 88;

  font-size: calc(
    (var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) * (100vw - (var(--fluid-type-min-screen) * 1rem)) /
      (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
  );

  @media (orientation: landscape) {
    --fluid-type-min-size: 1;
    --fluid-type-max-size: 2.25;
  }
}

p {
  margin: 0;
  max-width: var(--max-linelength);
  font-weight: 300;

  --fluid-type-min-size: 1.25;
  --fluid-type-max-size: 2.5;
  --fluid-type-min-screen: 20;
  --fluid-type-max-screen: 88;

  font-size: calc(
    (var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) * (100vw - (var(--fluid-type-min-screen) * 1rem)) /
      (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
  );

  &[lead] {
    line-height: 1.5;
    font-weight: 200;
  }

  @media (orientation: landscape) {
    --max-linelength: 40vw;
    --fluid-type-min-size: 1;
    --fluid-type-max-size: 2.25;
  }

  @media (orientation: portrait) {
    margin: 0 var(--spacing-3);
  }
}

small {
  display: inline-block;
  color: var(--text-color-2);
  font-weight: 300;
  font-size: 1.25em;
  letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  margin: 0;
  padding: 0;

  --fluid-type-min-size: 1;
  --fluid-type-max-size: 2;
  --fluid-type-min-screen: 20;
  --fluid-type-max-screen: 88;

  font-size: calc(
    (var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) * (100vw - (var(--fluid-type-min-screen) * 1rem)) /
      (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
  );

  @media (orientation: portrait) {
    margin: 0 7.5vmax;
  }
}

/* https://andy-bell.design/wrote/custom-property-controlled-fluid-type-sizing/ */
h1 {
  --fluid-type-min-size: 2;
  --fluid-type-max-size: 5;

  font-weight: lighter;
  letter-spacing: 0.2em;
  color: var(--text-color-1);

  @media (orientation: portrait) {
    --fluid-type-min-size: 1.5;
    --fluid-type-max-size: 4.5;
  }
}

h2 {
  --fluid-type-min-size: 1.5;
  --fluid-type-max-size: 3.5;

  font-weight: 200;
  letter-spacing: 3px;
  color: var(--text-color-2);
}

h3, h4, h5, h6 {
  --fluid-type-min-size: 1.25;
  --fluid-type-max-size: 2.5;

  font-weight: 300;
  letter-spacing: 2px;
  color: var(--text-color-3);
}

h4 {
  --fluid-type-min-size: 1.25;
  --fluid-type-max-size: 2;
  font-weight: 400;
}

h5 {
  --fluid-type-min-size: .75;
  --fluid-type-max-size: 1.5;
  font-weight: 500;
}

h6 {
  --fluid-type-min-size: .5;
  --fluid-type-max-size: 1;
  font-weight: 600;
}
