Resize text acording to screen size

Question

I have different elements in my html with different text sizes. I want to set them to be dynamic so that it would show different font sizes for different screen sizes.

What would be the best way? Now I am doing it like this but it makes the code look ugly:

<script>
$(window).resize(function(){
$('#first').css('font-size',($(window).width()*0.2)+'px');
$('h2').css('font-size',($(window).width()*0.02)+'px');
$('h1').css('font-size',($(window).width()*0.03)+'px');

For two elements it would be ok, but I have many more. Don't have big experience with html/css/javascript so this was what I came up with.

Since I am learning I want to know what would be the best way.

Maybe you have some suggestions how to improve that?

Answer 1

You could use the new css units vw,vh (viewport width/height) for this.

Here's an interesting css-tricks article which shows you how to use them for typography.

Example: (from above article)

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

So h1 will have font-size 5.9% of the viewport width. etc.

---

That being said, using viewport units for font-size in the above way is problematic because when the viewport width is very narrow - then the rendered font size will become too small and vice-versa.

In order to overcome this problem, I can recommend using a technique called Fluid Type AKA CSS Locks.

A CSS lock is a specific kind of CSS value calculation where:

• there is a minimum value and a maximum value,
• and two breakpoints (usually based on the viewport width),
• and between those breakpoints, the actual value goes linearly from the minimum to the maximum.

(From this article on CSS locks which also explains the math involved in great detail.)

So let's say we want to apply the above technique such that the minimum font-size is 16px at a viewport width of 600px or less, and will increase linearly until it reaches a maximum of 32px at a viewport width of 1200px.

We could use this SASS mixin which does all of the math for us so that the CSS would look something like this:

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

// ----
// libsass (v3.3.6)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for 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 and (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 and (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 with 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 and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

Codepen Demo

---

Further Reading

Precise control over responsive typography

Fluid Responsive Typography With CSS Poly Fluid Sizing

Non-linear interpolation in CSS