responsive-font

by tomik23

HTML

<h1>JAKAŚ TREŚĆ</h1>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque sunt quasi quis voluptate tempora laboriosam. Ipsa
    sequi earum debitis facilis. Modi dolor deserunt voluptatem, earum debitis suscipit blanditiis voluptate doloribus.
  </p>

CSS

/* https://websemantics.uk/tools/responsive-font-calculator/ */

/* 1rem(16px) @ 30rem(480px) increasing to 1.5rem(24px) @ 120rem(1920px) */
@media (min-width: 30rem) {
  :root {
    font-size: calc(1rem + ((1vw - 0.3rem) * 0.5556));
    /* Where: * 0.5556 = 100 * font_Size_Difference / viewport_Width_Difference */
  }
}

/* Prevent font scaling beyond this breakpoint */
@media (min-width: 120rem) {
  :root {
    font-size: 1.5rem;
  }
}


body {
  background-color: #fff;
  color: #24292e;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 1rem;
  max-width: none;
  padding: 1.618em 0 1rem;
  line-height: 1.5;
}