Font-Size adjusting

by Tim McKay

HTML

<h1>Adjusting Font-Size</h1>

<p>The thought is for the font-size to adjust based on the width of the screen. Instead of using a media-query to set a font-size a different breakpoints, this will provide a more consistent incremental font-size.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui.</p>

SCSS

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/

/**
 * Strip-Units function
 * Removes the unit of measurement from the number to be used as an integer.
 * Example: 14px => 14
 */

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

/*
 * Dynamic REM size
 * 
 * This calc() algorithm provides a more accurate calculation of font-sizes
 * between breakpoints. Useful for article or marketing based projects that
 * utilize screen real-estate for varying font-sizes, as opposed to something
 * like a dashboard that's most likely 16px on all breakpoints.
 * 
 * Example Output:
 * html { font-size: calc((100vw - 600px) / 640 * 3 + 16px); }
 * @media (max-width: 600px) {
 *   html {font-size: 16px; }
 * }
 * @media (min-width: 1240px) {
 *   html {font-size: 19px; }
 * }
 */

html {
	$min-fs : 16px; // Minimum Font Size
	$max-fs : 21px; // Maximum Font Size
	$min-vw : 600px; // Minimum Window width
	$max-vw : 1240px; // Maximum Window width

	font-size: calc((100vw - #{$min-vw}) / #{strip-units($max-vw - $min-vw)} * #{strip-units($max-fs - $min-fs)} + #{$min-fs});
  @media (max-width: $min-vw) { font-size: $min-fs; }
  @media (min-width: $max-vw) { font-size: $max-fs; }
}

body {
    padding: 1.5rem;
    font-family: sans-serif;
    color: #404040;
    line-height: 1.45;
}
h1 {
    font-weight: 800;
    text-transform:uppercase;
    color: #4285f4;
}