Responsive Type

[grayghostvisuals]

via Hacker News:

The demo page is a representative case of the "designer font-size" setting. I get exactly 4 lines of text on the first pageful. Not everyone surfs on Retina displays or humongous iMac panels at 1080 vertical resolution. As much as I appreciate being able to admire individual glyph curves up close and personal, it comes at the expense of being actually read the page without constant scrolling.

This comment is something that has been on my mind since we started this. The point was to get it out to the community so we can mold it even more so here we are...Responsive Type! dun dun dun dun.

Do we provide @media queries to authors via a wizardry @mixin? Here's an example to get the ball rollin':

@media screen and (max-width: $mw1) {
    html { 
        font-size: $percent;
    }
}

[grayghostvisuals]

A screen shot I took using a range of 300px to 460ish-px (via a top secret method called "squeezing my browser window"). The font-size is set at 100% -or- 16px and the line-height is 1.3125 -or- 21px. Seems like a nice range for these various contexts as a baseline/standard in RWD (whatever that means. I like to call it just "web design").

[caycefischer]

[2013-03-04 10:59:06 AM] Zak Kain: it's really content-dependent anyway
[2013-03-04 10:59:14 AM] GrayGhostVisuals: yes it is
[2013-03-04 10:59:16 AM] Zak Kain: when your content looks like it needs to get smaller, then you break
[2013-03-04 10:59:26 AM] Zak Kain: so maybe we just set up one and comment in a guideline or two

To explore further

[grayghostvisuals]

Great article on viewport sized typography from Chris Coyier. Example depicts using vw units to size the font.
http://css-tricks.com/viewport-sized-typography

[grayghostvisuals]

A few more resources on responsive typography. I'd also like to add molten leading to this list, but alas it's a JS solution. I want it in my CSS man!

Craig Mod wrote an article for A List Apart where he discusses his project Bibliotype

Nick Sherman also wrote on a much different idea with regards to Hinting and the Future of Responsive Typography

http://informationarchitects.net/blog/responsive-typography-the-basics

http://webdesign.maratz.com/lab/responsivetypography/

[grayghostvisuals]

Fluid Type
Looking at the blog of @TrentWalton it appears his use of responsive typography is the following...

<= 599px body { font: normal 100%/1.6 serif } // 16px

>= 600px body { font-size: 112.5% } // 18px

>=800px  body { font-size: 125% } // 20px

>=1030px body { font-size: 137.5% } // 22px

>=1200px body { font-size: 150% } // 24px

>=1650px body { font-size: 162.5% } // 26px

Can't seem to put together the relation for his screen sizes yet.

[grayghostvisuals]

Responsive Type
http://codepen.io/jakob-e/pen/Ccahj

[caycefischer]

bwabwabwaaaahhhh?!

that's crazy, I don't understand what's happening. Gotta take a close look.

[jakob-e]

ResponsiveFonts mixin (beta) https://gist.github.com/jakob-e/6658437

[grayghostvisuals]

@jakob-e awesome! Can u explain how this would be used by Authors? Do we use the @includes within a declaration block or on their own?