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 css

/* Uses vh and vm with calc */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

@media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

responsive text CSS

/* Instead of using px measurements, use % when setting width or height.*/
/* The % is calculted from the width of the parent element.*/
#NonResponsiveWidth {
	width: 1080px;
    height: auto;
}
#responsiveWidth {
	width: 85%;
    height: auto;
}
/*For text, use vw (viewport-width) instead of px when setting font-width*/
#NonResponsiveText { font-size: 20px; }
#responsiveWidth { font-size: 10vw; }

responsive text css

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

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;
            }
        }
    }
}