Advanced Search

Responsive Font-size & Line-height

/ Published in: jQuery
Save to your folder(s)
example:   
1. put the code on your script   
2. <p class="fz-15" >your paragraph</p>

* ******************************
* class-----Min-fontsize-----Min-lineheight-----Max-fontsize-----Max-lineheight
*
* fz-6 ---------- 4 ------------------- 6 ------------------- 6 ------------------- 9
* fz-9 ---------- 6 ------------------- 8 ------------------- 9 ------------------- 12
* fz-12 --------- 8 ------------------- 10 ------------------ 12 ------------------ 15
*
* fz-15 --------- 10 ------------------ 12 ------------------ 15 ------------------ 18
* fz-18 --------- 12 ------------------ 14 ------------------ 18 ----------------- 21
* fz-21 --------- 14 ------------------ 16 ------------------ 21 ------------------ 24
*
* fz-24 --------- 16 ------------------ 18 ------------------ 24 ------------------ 27
* fz-30 --------- 20 ------------------ 22 ------------------ 30 ------------------ 33
* fz-42 --------- 28 ------------------ 30 ------------------ 42 ------------------ 45
*
* fz-51 --------- 34 ------------------ 36 ------------------ 51 ------------------ 54
* fz-60 --------- 40 ------------------ 42 ------------------ 60 ------------------ 63
* fz-81 --------- 54 ------------------ 56 ------------------ 81 ------------------ 84
*
* fz-102 -------- 68 ------------------ 70 ------------------ 102 ----------------- 105
*
* ******************************

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2.  * ******************************
  3.  * Responsive Font-size & Line-height
  4.  * ******************************
  5. */
  6. var xlarge = 1600;
  7. var small = 768;
  8. //relationship between font-size & line-height
  9. var lhchange = 2; 
  10.  
  11. function fontResize(){
  12.     var ww=$(window).width();
  13.     if($(window).width()<=small){
  14.         /**
  15.          * ******************************
  16.          * if screen size less then 768px
  17.          * use the smallest font size and
  18.          * smallest line height
  19.          * ******************************
  20.         */
  21.         $('.fz-6').css('fontSize',(4)+'px');
  22.         $('.fz-9').css('fontSize',(6)+'px');
  23.         $('.fz-12').css('fontSize',(8)+'px');
  24.         $('.fz-15').css('fontSize',(10)+'px');
  25.         $('.fz-18').css('fontSize',(12)+'px');
  26.         $('.fz-21').css('fontSize',(14)+'px');
  27.         $('.fz-24').css('fontSize',(16)+'px');
  28.         $('.fz-30').css('fontSize',(20)+'px');
  29.         $('.fz-42').css('fontSize',(28)+'px');
  30.         $('.fz-51').css('fontSize',(34)+'px');
  31.         $('.fz-60').css('fontSize',(40)+'px');
  32.         $('.fz-81').css('fontSize',(54)+'px');
  33.         $('.fz-102').css('fontSize',(68)+'px');
  34.  
  35.         $('.fz-6').css('lineHeight',(6+lhchange)+'px');
  36.         $('.fz-9').css('lineHeight',(8+lhchange)+'px');
  37.         $('.fz-12').css('lineHeight',(10+lhchange)+'px');
  38.         $('.fz-15').css('lineHeight',(12+lhchange)+'px');
  39.         $('.fz-18').css('lineHeight',(14+lhchange)+'px');
  40.         $('.fz-21').css('lineHeight',(16+lhchange)+'px');
  41.         $('.fz-24').css('lineHeight',(18+lhchange)+'px');
  42.         $('.fz-30').css('lineHeight',(22+lhchange)+'px');
  43.         $('.fz-42').css('lineHeight',(30+lhchange)+'px');
  44.         $('.fz-51').css('lineHeight',(36+lhchange)+'px');
  45.         $('.fz-60').css('lineHeight',(42+lhchange)+'px');
  46.         $('.fz-81').css('lineHeight',(56+lhchange)+'px');
  47.         $('.fz-102').css('lineHeight',(70+lhchange)+'px');
  48.     }
  49.  
  50.         /**
  51.          * **********************************
  52.          * if screen size larger then 1600 px
  53.          * use the largest font size and 
  54.          * largest line height
  55.          * **********************************
  56.         */
  57.     else if($(window).width()>xlarge){
  58.         $('.fz-6').css('fontSize',(6)+'px');
  59.         $('.fz-9').css('fontSize',(9)+'px');
  60.         $('.fz-12').css('fontSize',(12)+'px');
  61.         $('.fz-15').css('fontSize',(15)+'px');
  62.         $('.fz-18').css('fontSize',(18)+'px');
  63.         $('.fz-21').css('fontSize',(21)+'px');
  64.         $('.fz-24').css('fontSize',(24)+'px');
  65.         $('.fz-30').css('fontSize',(30)+'px');
  66.         $('.fz-42').css('fontSize',(42)+'px');
  67.         $('.fz-51').css('fontSize',(51)+'px');
  68.         $('.fz-60').css('fontSize',(60)+'px');
  69.         $('.fz-81').css('fontSize',(81)+'px');
  70.         $('.fz-102').css('fontSize',(102)+'px');
  71.  
  72.         $('.fz-6').css('lineHeight',(9+lhchange)+'px');
  73.         $('.fz-9').css('lineHeight',(12+lhchange)+'px');
  74.         $('.fz-12').css('lineHeight',(15+lhchange)+'px');
  75.         $('.fz-15').css('lineHeight',(18+lhchange)+'px');
  76.         $('.fz-18').css('lineHeight',(21+lhchange)+'px');
  77.         $('.fz-21').css('lineHeight',(24+lhchange)+'px');
  78.         $('.fz-24').css('lineHeight',(27+lhchange)+'px');
  79.         $('.fz-30').css('lineHeight',(33+lhchange)+'px');
  80.         $('.fz-42').css('lineHeight',(45+lhchange)+'px');
  81.         $('.fz-51').css('lineHeight',(54+lhchange)+'px');
  82.         $('.fz-60').css('lineHeight',(63+lhchange)+'px');
  83.         $('.fz-81').css('lineHeight',(84+lhchange)+'px');
  84.         $('.fz-102').css('lineHeight',(105+lhchange)+'px'); 
  85.     }
  86.  
  87.  
  88.  
  89.         /**
  90.          * **********************************
  91.          * if screen size between:
  92.          * 768px and 1600px
  93.          * adjust the font-size
  94.          * between the max and min font size
  95.          * **********************************
  96.         */
  97.     else{
  98.         $('.fz-6').css('fontSize',(2*((ww-small)/832)+4)+'px');
  99.         $('.fz-9').css('fontSize',(3*((ww-small)/832)+6)+'px');
  100.         $('.fz-12').css('fontSize',(4*((ww-small)/832)+8)+'px');
  101.         $('.fz-15').css('fontSize',(5*((ww-small)/832)+10)+'px');
  102.         $('.fz-18').css('fontSize',(6*((ww-small)/832)+12)+'px');
  103.         $('.fz-21').css('fontSize',(7*((ww-small)/832)+14)+'px');
  104.         $('.fz-24').css('fontSize',(8*((ww-small)/832)+16)+'px');
  105.         $('.fz-30').css('fontSize',(10*((ww-small)/832)+20)+'px');
  106.         $('.fz-42').css('fontSize',(14*((ww-small)/832)+28)+'px');
  107.         $('.fz-51').css('fontSize',(17*((ww-small)/832)+34)+'px');
  108.         $('.fz-60').css('fontSize',(20*((ww-small)/832)+40)+'px');
  109.         $('.fz-81').css('fontSize',(27*((ww-small)/832)+54)+'px');
  110.         $('.fz-102').css('fontSize',(34*((ww-small)/832)+68)+'px');
  111.  
  112.         $('.fz-6').css('lineHeight',(3*((ww-small)/832)+6+lhchange)+'px');
  113.         $('.fz-9').css('lineHeight',(4*((ww-small)/832)+8+lhchange)+'px');
  114.         $('.fz-12').css('lineHeight',(5*((ww-small)/832)+10+lhchange)+'px');
  115.         $('.fz-15').css('lineHeight',(6*((ww-small)/832)+12+lhchange)+'px');
  116.         $('.fz-18').css('lineHeight',(7*((ww-small)/832)+14+lhchange)+'px');
  117.         $('.fz-21').css('lineHeight',(8*((ww-small)/832)+16+lhchange)+'px');
  118.         $('.fz-24').css('lineHeight',(9*((ww-small)/832)+18+lhchange)+'px');
  119.         $('.fz-30').css('lineHeight',(11*((ww-small)/832)+22+lhchange)+'px');
  120.         $('.fz-42').css('lineHeight',(15*((ww-small)/832)+30+lhchange)+'px');
  121.         $('.fz-51').css('lineHeight',(18*((ww-small)/832)+36+lhchange)+'px');
  122.         $('.fz-60').css('lineHeight',(21*((ww-small)/832)+42+lhchange)+'px');
  123.         $('.fz-81').css('lineHeight',(28*((ww-small)/832)+56+lhchange)+'px');
  124.         $('.fz-102').css('lineHeight',(35*((ww-small)/832)+70+lhchange)+'px');
  125.     }
  126.  
  127.  
  128. }
  129.  
  130.     $(document).ready(function(){
  131.             fontResize();
  132.         $(window).resize(function(){
  133.             fontResize();
  134.         });
  135.     });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.