<input id='test' type='text'>
<p>
  Размер Шрифта : <span id='info'>16</span> px.

  <p>
    Число символов : <span id='info2'>0</span>
input{  
  width:200px;
  font-size:16px;
  height:20px;
}
$(document).ready(function() {
  $("#test").on("keyup", function() {
    let coeff = $(this).val().length > 30 ? 5.5 : 7;
    let size =
      $(this).val().length > 10 ? 16 - ($(this).val().length / coeff) : 16;
    $(this).css({ "font-size": size });
    $("#info").text(size);
    $("#info2").text($(this).val().length);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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