The Sweetener

The work we do stuff we love

November 3, 2013

Viewport Sized Typography

blogimg-css3-viewport-sized-typography

One super awesome value in CSS3 not getting the fanfare it deserves is viewport relative sizing. For me, this is especially exciting with respects to typography.

Reducing and expanding font sizes is an area of responsive design that I’ve always seen as inefficient. My old method involved a series of media queries to globally adjust the typographic sizings. But, this approach lead to some bloated css and always left a bad taste in my mouth. Next, I began using a few global classes to pull from in an object oriented manner – essentially, a .big, .bigger, .biggest kinda deal. This was far more lean for sure, but still a tad gross. The ultimate goal is to avoid direct intervention via media query.

Proportional Grids

Some time ago, I told pixels to kick rocks and moved entirely to ems, rems and percentages. By having the whole site proportionally sized, you can apply a percentage font size to the body tag and everything will scale in accordance. Good stuff. This just felt right. With this approach, your typographic scale will remain in proportion from mobile to desktop, sans specific breakpoint intervention. However, I still often find that little adjustments are required here and there, especially if you’re in to big ass headers like myself.

This is where Viewport Sized Typography could really shine on.

Now, there is FitText from the crazy smart fellas over at Paravel – and it works great for headers. But, holistic typography requires that all elements play ball. My friends, viewport sizing is the answer. And yo, with the exception of Android, support’s coming around nicely.

The Values

The units are vw , vh, vmax, vmin. Basically, each unit is equal to 1% of viewport size. So, as the viewport changes, the browser computes that value and adjusts accordingly.

Specifically:

  • 1vw (viewport width) = 1% of viewport width
  • 1vh (viewport height) = 1% of viewport height
  • 1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
  • 1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

So, it would look a little something like:

h1 { 
  font-size: 4.5em; /* A failsafe, if you're nervous */
  font-size: 7vw;
}

You Little Buggers

With Webkit at least, it appears the sizing is computed at load, not dynamically in realtime. And, while Liggie insists that only dorks like myself resize to peep the responsive layout, this is a deal breaker for me. I need to see my sites nicely respond. Luckily, Chris Coyier over at CSS Tricks already dropped a simple solution for this with a touch of Jquery.

causeRepaintsOn = $("h1, h2, h3, p");

$(window).resize(function() {
  causeRepaintsOn.css("z-index", 1);
});

Think On It

Of course, viewport sizings aren’t just for fonts – they can replace any sizing value. Stop and think on that. If you can establish a single modular scale, responding to viewport, the need for media queries becomes super diminished, perhaps regulated to only your grid system. Game changing stuff for sure.

How About a Demo?

You got it. Resize your browser to watch truly responsive typography do its thing:

Viewport Sized Typography Demo


Update! – FlowType.js

I just came across a super slick Jquery plugin by Simple Focus called FlowType.js, that adjusts font-size and line-height based on an element’s width. Their demo looks very promising, and performance seems on point at first glance.

Essentially you establish your typographic base, give FlowType a font-size and line-height ratio to work with, set min and max width thresholds, and initiate by applying to an element. With a fluid-grid system, throw FlowType on the body and watch it go to town on your sizings. Slickness.

Go check out FlowType.js
Read its dev story

Show Comments 0 +

Leave a Reply

Let's Make Contact

Ready to start your monocle dropping project?

Back

Build something awesome with us!

SoSweet! Creative is located at 65 Schley Ave. in sunny Pittsburgh, PA 15205. Our phone number is 412-506-7311 and you can reach us with the form below or by emailing directly to hello@sosweetcreative.com


9+8=?