Is this possible with css or javascript? So If I want 20pt font or 1em font or similar at a certain browser size but the font to shrink and expand if the browser window shrinks or expands? Thanks

Is this possible with css or javascript? So If I want 20pt font or 1em font or similar at a certain browser size but the font to shrink and expand if the browser window shrinks or expands? Thanks

• javascript
• css
• browser
• fonts

• CSS3 Values and Units covers relative sizing based on the viewport but it's currently only supported by IE9. w3/TR/css3-values/#viewport-relative-lengths – DuMaurier Commented Sep 11, 2011 at 21:29

4 Answers 4

You can use the onResize event to do this. jQuery can be utilized to do this, for example: http://api.jquery./resize/ . You only need to apply proper CSS changes on specific elements.

there is no proper css solution that I know of. You can define font-size in % but it will take a % of the pixels of the parent elements font.

You could use mediaqueries, but they will bee bigger in steps not fluent.

.p {
   font-size: 20px; 
}    
@media screen and (max-width: 600px) {
  .p {
   font-size: 12px; 
  }
}
@media screen and (max-width: 800px) {
  .p {
   font-size: 14px; 
  }
}
@media screen and (max-width: 1000px) {
  .p {
   font-size: 16px; 
  }
}
@media screen and (max-width: 1200px) {
  .p {
   font-size: 18px; 
  }
}

You can use the units vw (viewport) when defining the font size in the css file and it will scale up or down with the size of the window. Example:

body {
    font-size: 10vw;
}

Here is a solution that does not depend on (non-widely supported parts of) CSS3 or Javascript to work. It uses media queries to change the font-size but thanks to employing SASS it is expressed concisely and it very easy to use:

http://github./wadim/responsive-font-size

Supplied with four parameters this mixin will intelligently figure out the right media-query definitions for you.