<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<h1>How big is this headline?</h1>

<h3>Font-size: <span class='size'></span></h3>

<h3>Resolution: <span class='res'></span>px</h3>

<p>To verify that this works, please resize your browser viewport</p>
/// least-squares-fit
/// Calculate the least square fit linear regression of provided values
/// @param {map} $map - A SASS map of viewport width and size value combinations
/// @return Linear equation as a calc() function
/// @example
///   font-size: least-squares-fit((576: 24, 768: 24, 992: 34));
@function least-squares-fit($map) {
  
  // Get the number of provided breakpoints
  $length: length(map-keys($map));
  
  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error "leastSquaresFit() $map must be at least 2 values"
  }
    
  // Calculate the Means
  $resTotal: 0;
  $valueTotal: 0;
  @each $res, $value in $map {
    $resTotal: $resTotal + $res;
    $valueTotal: $valueTotal + $value;
  }
  $resMean: $resTotal/$length;
  $valueMean: $valueTotal/$length;

  // Calculate some other stuff
  $multipliedDiff: 0;
  $squaredDiff: 0;
  @each $res, $value in $map {
    
    // Differences from means
    $resDiff: $res - $resMean;
    $valueDiff: $value - $valueMean;
    
    // Sum of multiplied differences
    $multipliedDiff: $multipliedDiff + ($resDiff * $valueDiff);
    
    // Sum of squared resolution differences
    $squaredDiff: $squaredDiff + ($resDiff * $resDiff);
  }

  // Calculate the Slope
  $m: $multipliedDiff / $squaredDiff;

  // Calculate the Y-Intercept
  $b: $valueMean - ($m * $resMean);

  // Return the CSS calc equation
  @return calc(#{$m*100}vw + #{$b}px);

}

body {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  background-color: #EEE;
}
h1 {
  $map: (576: 22, 768: 24, 992: 34);
  font-size: least-squares-fit($map);
  color: #e95c33;
}
View Compiled
$(function () {
  
  var $window = $(window)
  var $h1 = $('h1')
  var $res = $('.res')
  var $size = $('.size')
  
  $window.on('resize', function (data) {
    $res.text($window.width())
    $size.text($h1.css('fontSize'))
  }).trigger('resize')
  
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js