Introducing Responsive Web Typography With FlowType.JS. Advertisement It’s our great pleasure to support active members of the Web design and development community. Today, we’re proud to present FlowType.JS that allows a perfect character count per line at any screen width. This article is yet another special of our series of various tools, libraries and techniques that we’ve published here on Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin, CSSComb and Jelly Navigation Menu. — Ed. While working on an image-heavy site for Simple Focus, a couple of our designers, John Wilson and Casey Zumwalt, noticed how images always scaled perfectly. Pull the corner of the browser window and the images expand to fill the space. “Wouldn’t it be nice,” John asked, “if text worked more like images?” “In a fluid layout, browser width and typographic measure are linked: the wider the viewport, the more characters per line.” – Trent Walton Here’s the process of how we got there: Technically Speaking The Basic Math.
Kerning.js. Kerning.js. FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width. Lettering.js - A jQuery plugin for radical web typography. Typographica. Type Reviews, Books, Commentary. We Love Typography. Typography projects on Behance. Butterick’s Practical Typography.