Fluid fonts and icons in CSS

fluid-fonts-and-icons.css

body {
  --base: 20;
  --scale-headings: 1.44;
  --scale-mobile: 0.7;
  --scale-mobile-headings: 0.4;
  --scale-icons: 1.4;
  --min-viewport: 480;
  --max-viewport: 1600;
  --max-size: var(--base);
}
h4, .h4 {
  --max-size: calc( var(--base) * var(--scale-headings) );
}
h3, .h3 {
  --max-size: calc( var(--base) * var(--scale-headings) * var(--scale-headings) );
}
h2, .h2 {
  --max-size: calc( var(--base) * var(--scale-headings) * var(--scale-headings) * var(--scale-headings) );
}
h1, .h1 {
  --max-size: calc( var(--base) * var(--scale-headings) * var(--scale-headings) * var(--scale-headings) * var(--scale-headings) );
}
.big {
  --max-size: calc( var(--base) * var(--scale-headings) * var(--scale-headings) * var(--scale-headings) * var(--scale-headings) * 1.2 );
}
.huge {
  --max-size: calc( var(--base) * var(--scale-headings) * var(--scale-headings) * var(--scale-headings) * var(--scale-headings) * 2 );
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .big, .huge {
  --min-size: calc( var(--max-size) * var(--scale-mobile-headings) );
}
.small {
  --max-size: calc( var(--base) * 0.8 );
}
.tiny {
  --max-size: calc( var(--base) * 0.6 );
}
.ct-fancy-icon > svg {
  --max-size: calc( var(--base) * var(--scale-icons) );
}
body, .small, .tiny, .ct-fancy-icon > svg {
  --min-size: calc( var(--max-size) * var(--scale-mobile) );
}
body, h1, h2, h3, h4, .h1, .h2, .h3, .h4, .huge, .big, .small, .tiny {
  font-size: calc(var(--min-size) * 1px);
}
.ct-fancy-icon > svg {
    width: calc( var(--min-size) * 1px );
    height: calc( var(--min-size) * 1px );
}
@media screen and (min-width: 480px) {
  body, h1, h2, h3, h4, .h1, .h2, .h3, .h4, .huge, .big, .small, .tiny {
    font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100vw - (var(--min-viewport)) * 1px) / (var(--max-viewport) - var(--min-viewport))));
  }
  .ct-fancy-icon > svg {
      width: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100vw - (var(--min-viewport)) * 1px) / (var(--max-viewport) - var(--min-viewport))));
      height: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100vw - (var(--min-viewport)) * 1px) / (var(--max-viewport) - var(--min-viewport))));
  }
}
@media screen and (min-width: 1600px) {
  body, h1, h2, h3, h4, .h1, .h2, .h3, .h4, .huge, .big, .small, .tiny {
    font-size: calc(var(--max-size) * 1px);
  }
  .ct-fancy-icon > svg {
      width: calc(var(--max-size) * 1px);
      height: calc(var(--max-size) * 1px);
  }
}