<ul>
  <li data-year="2001">HTML</li>
  <li data-year="2002">CSS</li>
  <li data-year="2003">PHP</li>
  <li data-year="2010">Javascript</li>
  <li data-year="2012">Ruby</li>
  <li data-year="2010">Python</li>
  <li data-year="2017">Node.js</li>
  <li data-year="2010">MySQL</li>
</ul>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");

body {
  font-family: 'Inconsolata', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background-color: #FCE4EC;
  color: #304FFE;
  font-size: 20px;
}

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 300px;
  text-align: center;
  
  li {
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;
  }
}
$(window).on('load', function() {
  var nums = $('ul li').map(function() {
    return parseInt($(this).data('year'));
  }).get();
  var currentDate = new Date();
  var currentYear = currentDate.getFullYear();
  var maxVal = Math.max(...nums);
  var minVal = Math.min(...nums);
  var baseFont = $('ul li').css("font-size");
  var fontsplit = baseFont.match(/([0-9\.]+)\s?([a-z\%]+)/);
  var minFont = parseInt(fontsplit[1]);
  var maxFont = parseInt(fontsplit[1])*3;
  var fontUnits = fontsplit[2];
  $('ul li').each(function() {
    var itemYear = parseInt($(this).data('year'));
    if (itemYear) {
      var num = currentYear - itemYear;
      var fontSize = (((maxVal - itemYear )/(maxVal - minVal)) * (maxFont - minFont)) + parseInt(fontsplit[1]);
      $(this).css("font-size", fontSize+fontUnits);
      $(this).attr("title", (currentYear - itemYear)+" years");
    } else {
      $(this).css("font-size", (parseInt(fontsplit[1])*.9)+fontUnits);
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js
  2. https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.js