Responsive Font Media Query Less Loop

Question

I thought this would be a helpful tutorial on how to create a loop in less that create media queries to allow for responsive fonts.

I was unhappy with how my font would never scale while all my DIVs and images would do so. As you scale down. The font appears to get larger making the design and layout look terrible. Of course I could leave it that way and let the text wrap but that also looks terrible.

Answer 1

So I created these media queries to incrementally increases the font size every 20 pix by 0.05. Then that evolved into less logic so that I could use less code. However, I've included both css and less bellow.

With the font changing every 20 pix of resizing can look a little choppy. But that's much better then only having 3 media queries to change font size. That's garbage. And Lazy. Why do it manually? I digress. See the advantage of having a loop is that you can refine and increase the amount of media queries to get more smoothness in font/browser sizing.

One last thing. once you have you fonts set this way; to html. Everything else must be set to percentage font sizes. That way they are a percentage of the html font size and will be responsive. Here's an example:

html{
  font-size: 1em;
}
h1{
  font-size: 120%; //1.2em
} 
h2{
  font-size: 110%; //1.1em
} 

Please tell me what you think.

-Love PAT

LESS LOOP:

//Set font for 300 pix devices and lower. Font size will increase by 0.05 every 5pix of width.
@fontSize: 0.7em; //em

//@media start at?
@screenWidth: 300px;
@screenWidthMax: 640px;
@loop: (((@screenWidthMax - @screenWidth)/20)-1);

//Size for 640px and above
@fontSizeMath640: round(@fontSize + (@fontSize * (0.05*(@loop+2))),2);
@media (min-width: @screenWidthMax) {
  html {
    font-size: "@{fontSizeMath640}";
  }
}

//Create loop that repeats from 300 pix all the way to 640 pix incrementing by 20px. So, (640-300=340)/20=17. Loop 68 times.
.responsiveFont (@index) when (@index >= 0) {
  @minWidth: (@screenWidth+(20*@index));
  @maxWidth: (@minWidth + 19);
  @fontSizeMath: round(@fontSize + (@fontSize * (0.05*(@index+1))),2);
  @media (min-width: @minWidth) and (max-width: @maxWidth) {
    html {
      font-size: "@{fontSizeMath}";
    }
  }
  // next iteration
  .responsiveFont(@index - 1);
}

// end the loop when index is 0
.responsiveFont (0) {}

// "call" the loopingClass the first time with highest value
.responsiveFont (@loop);

//Size for 300px and below
@media (max-width: @screenWidth) {
  html {
    font-size: "@{fontSize}";
  }
}

Which Prints out this: CSS

@media (min-width: 640px) {
  html {
    font-size: "1.33em";
  }
}
@media (min-width: 620px) and (max-width: 639px) {
  html {
    font-size: "1.29em";
  }
}
@media (min-width: 600px) and (max-width: 619px) {
  html {
    font-size: "1.26em";
  }
}
@media (min-width: 580px) and (max-width: 599px) {
  html {
    font-size: "1.22em";
  }
}
@media (min-width: 560px) and (max-width: 579px) {
  html {
    font-size: "1.19em";
  }
}
@media (min-width: 540px) and (max-width: 559px) {
  html {
    font-size: "1.15em";
  }
}
@media (min-width: 520px) and (max-width: 539px) {
  html {
    font-size: "1.12em";
  }
}
@media (min-width: 500px) and (max-width: 519px) {
  html {
    font-size: "1.08em";
  }
}
@media (min-width: 480px) and (max-width: 499px) {
  html {
    font-size: "1.05em";
  }
}
@media (min-width: 460px) and (max-width: 479px) {
  html {
    font-size: "1.01em";
  }
}
@media (min-width: 440px) and (max-width: 459px) {
  html {
    font-size: "0.98em";
  }
}
@media (min-width: 420px) and (max-width: 439px) {
  html {
    font-size: "0.94em";
  }
}
@media (min-width: 400px) and (max-width: 419px) {
  html {
    font-size: "0.91em";
  }
}
@media (min-width: 380px) and (max-width: 399px) {
  html {
    font-size: "0.88em";
  }
}
@media (min-width: 360px) and (max-width: 379px) {
  html {
    font-size: "0.84em";
  }
}
@media (min-width: 340px) and (max-width: 359px) {
  html {
    font-size: "0.8em";
  }
}
@media (min-width: 320px) and (max-width: 339px) {
  html {
    font-size: "0.77em";
  }
}
@media (min-width: 300px) and (max-width: 319px) {
  html {
    font-size: "0.73em";
  }
}
@media (max-width: 300px) {
  html {
    font-size: "0.7em";
  }
}