Creating Re-Scalable Fonts using Pure CSS3

Creating Re-Scalable Fonts using Pure CSS3

As the browser progresses, we are all encouraged to do responsive designing. Web UI has greatly improved in the recent years and has a tremendous growth rate due to new technologies all in all boosting it day by day. Currently there are many frameworks such as Bootstrap and many other HTML5 based frameworks in the market that ease down the markup methodology.

Today we are going to discuss on how to resize fonts in your website based on your users viewport.

Well , as we all know we can utilize the “calc()” function described  here . This W3School articles describes as how to calculate the <div> size.

We can use the calc() function to calculate the size of the browser’s window and then dynamically increase or decrease the font-size without any javascript involvement.

First of all we set the document’s Font size to a static base, for that add the following lines to your css code.

html,body{
font-size: 14px;
}

Now suppose our smallest screen size is 480px and we want to set a base font for 480px to be 14pxand a base font for a maximum screen resolution of 1200px to be 20px font size then. We can use the calc() function as below:

 

@media screen and (min-width: 480px) {
  html {
    font-size: calc(14px + 8 * ((100vw - 480px) / 1020));
  }
}

As the above media query is quite self-explanatory, i will break things down for you anyway.

We are using the media query and querying for the screen-size of 480px where we are targetting the complete HTML DOM to make sure that all the text across the DOM is changed no matter what. We are using the calc() function and setting the base font size to 14px and adding 8 to it when the screen is resized upto a maximum of 1000px in size, until then the increase or decrease in the font-size will be round about 0.9% by the time it is resized.

Additionally we can use double media query as well if you do not wish to use the calc() function, for that use the following code and modify it according to your needs:

@media screen and (min-width: 480px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 900px) {
  html {
    font-size: 18px;
  }
}
@media screen and (min-width: 1280px) {
  html {
    font-size: 22px;
  }
}

 

Thats all folks! Let me know if theres anything that can be improved!

As rated by readers
[Total: 0 Average: 0]
0

Related Posts

Leave a Reply

avatar
  Subscribe  
Notify of