Responsive / Fluid Typography -- CSS clamp() example

style.css

/* 
 * This will keep the element's font size between 24px and 42px.
 * The middle value automatically calculates the font size between 
 * the Min and Max, using the browser window viewport width.
 */

.archive-title {
    font-size: clamp(24px, calc(3vw + 1rem), 42px);
}

/*
 * Example use: main typography
 */

body {
    font-size: clamp( 14px, calc(.45vw + 1rem), 18px );
}

h1 {
    font-size: clamp( 36px, calc(2vw + 1rem), 64px );
}

h2 {
    font-size: clamp( 24px, calc(1.66vw + 1rem), 50px );
}

h3 {
    font-size: clamp( 20px, calc(0.8vw + 1rem), 42px );
}

h4 {
    font-size: clamp( 18px, calc(0.8vw + 1rem), 36px );
}

h5 {
    font-size: clamp( 17px, calc(0.5vw + 1rem), 24px );
}

h6 {
    font-size: clamp( 16px, calc(0.4vw + 1rem), 20px );
}