Try the handy unit converter/calculator below and get started with responsive typography, based on viewport width units, and avoid line length inconsistency once and for all. You'll never look back!

= 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.


Psst. Don't forget to 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 stuff, and in my mind every developer building responsive websites should pick this up ASAP. 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 basically 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 calculation tool 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. Simple as that.

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/

...

For more info on the subject, try the following links:
CSS Values and Units: Viewport-percentage lengths
Browser support: Can I use Viewport units: vw, vh, vmin, vmax

Suggest related links to:
hi(at)emilolsson.com

...

Viewport Units Calculator, a quick draft by Emil Olsson, aiming to inspire the use of new and useful technologies in web design. Follow on Twitter or visit the online portfolio for more work, tools, products and experiments.

...

August 4, 2015
Updated with Sass CSS example function

April 25, 2015
Published
1.39vw