css3 - How to implement max-font-size? -

i want specify font size using vw, in

font-size: 3vw; 

however, want limit font size 36px. how can achieve equivalent of max-font-size, not exist--is option use media queries?

font-size: 3vw; means font size 3% of viewport width. when viewport width 1200px - font size 3% * 1200px = 36px.

so max-font-size of 36px can implemented using single media query override default 3vw font-size value.

codepen demo (resize browser)

div {    font-size: 3vw;  }  @media screen , (min-width: 1200px) {    div {       font-size: 36px;    }  }

<div>hello</div>

that being said, using viewport units font-size in above way problematic because when viewport width smaller - 320px - rendered font size become 0.03 x 320 = 9.6px (too) small.

in order overcome problem, can recommend using technique called fluid type aka css locks.

a css lock specific kind of css value calculation where:

• there minimum value , maximum value,
• and 2 breakpoints (usually based on viewport width),
• and between breakpoints, actual value goes linearly minimum maximum.

(from article on css locks explains math involved in great detail.)

so let's want apply above technique such minimum font-size 16px @ viewport width of 600px or less, , increase linearly until reaches maximum of 32px @ viewport width of 1200px.

we use this sass mixin of math css this:

div {   /* linearly increase font-size 16->32px       between viewport width of 600px-> 1200px  */   @include fluid-type(font-size, 600px, 1200px, 16px, 32px); } @media screen , (max-width: 600px) {   div {      font-size: 16px;   } } @media screen , (min-width: 1200px) {   div {      font-size: 36px;   } } 

// ----  // libsass (v3.3.6)  // ----    // =========================================================================  //  //  precise control on responsive typography sass  //  ---------------------------------------------------  //  indrek paas @indrekpaas  //  //  inspired mike riethmuller's precise control on responsive typography  //  http://madebymike.com.au/writing/precise-control-responsive-typography/  //  //  `strip-unit()` function hugo giraudel  //    //  11.08.2016 remove redundant `&` self-reference  //  31.03.2016 remove redundant parenthesis output  //  02.10.2015 add support multiple properties  //  24.04.2015 initial release  //  // =========================================================================    @function strip-unit($value) {    @return $value / ($value * 0 + 1);  }    @mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {    @each $property in $properties {      #{$property}: $min-value;    }      @media screen , (min-width: $min-vw) {      @each $property in $properties {        #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});      }    }      @media screen , (min-width: $max-vw) {      @each $property in $properties {        #{$property}: $max-value;      }    }  }    // usage:  // ======    // /* single property */  // html {  //   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);  // }    // /* multiple properties same values */  // h1 {  //   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);  // }    ////////////////////////////////////////////////////////////////////////////    div {    @include fluid-type(font-size, 600px, 1200px, 16px, 32px);  }  @media screen , (max-width: 600px) {    div {       font-size: 16px;    }  }  @media screen , (min-width: 1200px) {    div {       font-size: 36px;    }  }

<div>responsive typography technique known fluid type or css locks.     resize browser window see effect.  </div>

codepen demo

---

further reading

precise control on responsive typography

fluid responsive typography css poly fluid sizing

non-linear interpolation in css