fluid type

Poly Fluid Sizing

Fluid typography is pretty amazing. We have a writeup of how it all works. But as fancy as that is, it's still scaling the type linearly. What if we wanted the type size to fall along a curve? The math gets a bunch more complicated, but it's possible.

Jake Wilson digs in, and while he finds that calc() isn't quite up for the job (e.g. font-size: calc(3vw * 3vw); /* This doesn't work in CSS */), he does land on a technique he's calling Poly Fluid Sizing, which takes a map of breakpoints and font sizes and linear interpolates them just about as good (*it depends*).

Fluid Typography

Getting right to the code, here's a working implementation:

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

That would scale font-size from a minimum of 16px (at a 320px viewport) to a maximum of 22px (at a 1000px viewport). Here's a demo of that, but as a Sass @mixin (which we'll cover later).

(more…)

That Fluid Type Stuff Again

There have been a couple of articles lately regarding fluid type.

Matt Smith (calling it "flexible type"):

My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the :root selector

Richard Rutter (calling it "Responsive Display Text"):

In one fell swoop you can set the size of a display heading to be proportional to the screen or browser width, rather than choosing from a scale in a series of media queries.

Both are all about leveraging viewport units to size type that doesn't jump from size to size at breakpoints, but gracefully scales.

I'd highly recommend checking out Mike Riethmuller's Fluid type though, which is nearly just as simple but allows for setting minimum and maximum sizes, which feels like the way to go for me.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag