Try the unit calculator below and get started with responsive typography, based on viewport width units to avoid line length inconsistency.

= 1.39vw

Input

Based on a 1440px wide viewport base AND a 20px static font-size base.

Output

Results in a responsive font-size value of:
1.39vw.


Resize your browser to see how the font-size adjusts to the viewport width and that the line lengths are consistent across.


Basic CSS example


selector {
  /*** Fallback ***/
  font-size: 20px;
  /*** Responsive ***/
  font-size: 1.39vw;
}

SASS example function


@function get-vw($target) {
  $vw-context: (1440 * 0.01) * 1px;
  @return ($target / $vw-context) * 1vw;
}

selector {
  /*** Fallback ***/
  font-size: 20px;
  /*** Responsive ***/
  font-size: get-vw(20px)vw;
}

The responsive web have taken over the Internet long time ago, but common practice is still static values when defining the font-size attribute (...or at least semi static font sizes targeting different viewport widths with media queries). A consequence of this approach is that the line lengths varies a lot between different viewport widths, causing both aesthetic and legibility problems.

But with improved modern CSS support we now have new features such as CSS viewport units. This opens up for a more complete responsive approach when it comes to defining font sizes (without using JS). This is very useful, and every developer building responsive websites should make sure they know about this option. It's a fallback safe method as old browsers fallback to px/em values that you probably are using on your site already. So this means no sacrifices. It's also a great alternative to 'expanding columns' or at least simplifies the process when using these two methods in conjunction.

To help you get started with font-size viewport units, we have developed a handy measurement calculator to enable you to convert your old measurements to the new world. All you have to do is to insert your 'viewport width base' and 'font-size base' to calculate your new 'vw' values. Click the button to copy to clipboard.

Viewport width unit

'vw' is short for 'viewport width' and a percent value of the width of the viewport.

1vw = 1% of viewport width

...

If you like this tool, please copy the url and share it with your friends and fellow designers.

http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/

...

April 25, 2015
Published

1.39vw