Change Font-Size within Input Field Based on Length

Recently I had a great conversation with an outstanding User Experience designer about a few interactions on a project we were working on. One of the points we talked about was, what should happen when text within input fields are excessively long.

The desired result we both agreed on was to change the font size on the fly. Thankfully this is extremely easy with a little bit of jQuery that listens to events on the input field.

So if you happen to be in the same situation hopefully these snippets should get you heading down the right track.


First we need a simple input field with an ID or Class to hook into. I have opted for an ID in this example.

<input type="text" id="location" placeholder="Placeholder Text" />


Secondly a little bit of CSS to make sure the text is always aligned in the middle after it gets resized. No doubt some of this CSS will not match your designs.

#location {
  font-size: 100%;
  outline: none;
  width: 200px;
  height: 30px;
  display: table-cell; 
  vertical-align: middle;
  border: 1px solid #ccc;


Thirdly we need to get a little bit of jQuery listening to the users actions. This little snippet just checks to see if the amount of characters are below a certain length. Depending on the value it will adjust the font-size. There are many ways to achieve the same effect but for my circumstances this made sense for me.

If you would like to adjust the font-size to suit your design, just uncomment out the console.log and go crazy.

$('#location').keypress(function() {
  var textLength = $(this).val().length;
  if(textLength < 20) {
   // Do noting 
  } else if (textLength < 40) {
      $(this).css('font-size', '85%');
  } else if (textLength > 40) {
      $(this).css('font-size', '70%');

If you need to listen to more events, you can just adjust the the above snippet like so:

$('#location').on('keypress blur', function() {


Demo time. Just type a bunch of characters and see the result.

See the Pen cgilk by Jake Bresnehan (@jakebresnehan) on CodePen

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.


  1. Hi Jake,

    Great job!

    I’ve been searching for a solution, and I like the solution you have. It’s the best out there yet. However, I would like to see the calculation to get little wiser. I would like to see if the font can be automatically adjusted according to the percentage of the length of characters over the length of the input field.

  2. Just one thing, the text stay small if you use back.
    else 100% maybe

  3. one problem, the text stay small if you use back to solve this how to restore font-size

  4. Hi!
    My post may be too late. The solution does Not work with me. Probably, it is due to the incompatible version of jQuery library; which is; JQuery-3.2.1.js; in my case.
    Any suggestion, please!

This post currently has 4 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *