CSS

css responsive font size

body {
  // font grows 1px for every 100px of viewport width
  font-size: calc(16px + 1vw);
  // leading grows along with font,
  // with an additional 0.1em + 0.5px per 100px of the viewport
  line-height: calc(1.1em + 0.5vw);
}

responsive font-size

/* please refer to https://developer.mozilla.org/fr/docs/Web/CSS/clamp() */
font-size: clamp(40px, 10vw, 70px); /* clamp(MIN, VAL, MAX) */

responsive text size

$-xs-text: h1 22px, h2 18px, h3 14px, h4 12px, h5 11px, h6 10px, p 10px;
$-sm-text: h1 25px, h2 18px, h3 14px, h4 13px, h5 12px, h6 10px, p 10px
$-md-text: h1 30px, h2 21px, h3 16px, h4 14px, h5 13px, h6 12px, p 12px;
$-xl-text: h1 37px, h2 23px, h3 19px, h4 16px, h5 16px, h6 14px, p 14px;
$xxl-text: h1 45px, h2 28px, h3 23px, h4 20px, h5 18px, h6 16px, p 16px;

$responsive-text-sizes: (
    xs: $-xs-text,
    sm: $-sm-text,
    md: $-md-text,
    xl: $-xl-text,
    xxl: $xxl-text,
);
@each $breakpoints in map-keys($map: $responsive-text-sizes) {
    @include media-breakpoint-up($breakpoints) {
        @each $element, $size, $py, $px, $fw in map-get($map: $responsive-text-sizes, $key: $breakpoints) {
            #{$element}.responsive {
                font-size: $size;
                font-weight: $fw;
                padding: $py $px;
            }
        }
    }
}