Comments on Variable Fonts for Responsive Design

19 Reader Comments

Back to the Post
  1. Great article. Love to see this implemented.

    Copy & paste the code below to embed this comment.
  2. I was a fan of Multiple Masters when they came out, but the UI wasn’t good and they littered your font menu with generated instances. Service bureaus didn’t like them. If the technical and UI issues were ironed out, I think they could catch on.

    My understanding is that most MM fonts use “intermediate masters” to give good results rather than just designing the extremes. So having just four masters for two axes might not be realistic. Myriad MM, for instance, has 15 primary fonts on its width and weight axes.

    Copy & paste the code below to embed this comment.
  3. Great piece, but I wouldn’t be so quick to dismiss directions like Metafont’s. I would have agreed with you as recently as a few years ago, but spending quality time with back issues of Dot Dot Dot and Bulletins of the Serving Library have convinced me that many of my negative reactions to Metafont’s products were the result of unfamiliarity. The same could be said of negative reactions to larger-scale historical shifts in letterforms (e.g., classical to transitional to modern faces), to the introductions of slab and sans serif faces in the 19th century …


    Once we have eliminated the barrier between the directions for drawing letterforms (and spacing, kerning, substituting, hinting them, etc.), on the one hand, and information about the context in which they’re being drawn, on the other, there appears the potential for a lot more than dynamic microtypography. (Which is not to dismiss any of that, by the way — it’s exciting that we are on the verge of being able finally to observe such central and well-established principles of typography.) What if we could use, not just color, or decoration, or size, but the shapes of the letters themselves to signal different kinds of content or semantics? What if, for example, we could distinguish among different kinds of links: to background material or context, to references, to opposing points of view, to tangents? What if we could signal how often text is being commented on, or linked to, or referenced or discussed on other sites? And do all of this dynamically, in ways that go beyond the capacity of what you have in past articles called ‘detect and serve’ — offering up different discrete and static collections of outlines of letterforms — to handle?


    As Andrew himself suggests in his article, even dynamic microtypography based on interpolation will require us to consider using and creating letterforms that can handle such adjustment. And what I’m suggesting would probably be even more demanding — moving past interpolation (filling into the gaps between static outlines) towards parametric or what we could also call ‘extrapolated’ outlines (starting from skeletons of letterforms and using algorithms to work outwards). I would argue that this would require us to start examining our assumptions about what ‘quality typography’ is supposed to look like. At the very least it means that we should start taking parametric design projects seriously, as more than just ways of making the type designer’s job easier.

    Copy & paste the code below to embed this comment.
  4. One can look to the enlarged type families of the phototypositor era, from Photo-Lettering Inc, Headliners International, and Techni-Process etc., to see that the personality of a typeface does in fact hold up across a range of transformations.

    Nonetheless, users (and algorithms) should beware of Bold weights in which vertical stroke and counter width are identical.

    Copy & paste the code below to embed this comment.
  5. A Myriad MM of thanks! Love it!

    + Thanks too for Nick Shinn’s memory nudge: I’d blissfully forgotten all those hours cranking films back and forth in 1970 on a then “state of the art” VGC PhotoTypositor: (http://www.forgottenartsupplies.com/?what=artifacts&image_id=38 ;-)

    Copy & paste the code below to embed this comment.
  6. It’s obvious that responsive design has created the need for new standards, and this seems like a step in the good direction, we must start from somewhere, right?

    Copy & paste the code below to embed this comment.
  7. I would love to see this approach used to respond to different pixel densities / devices. Beautiful webfonts often turn into smudged approximations of themselves when the outline points fall on subpixels; very few fonts are really as “screen-tuned” as they ought to be.

    If I’m not mistaken, this very site uses device detection to dynamically switch stylesheets - it swaps out Georgia for a narrower body copy typeface on mobile devices.

    That said, there’s some basics we need to fix first - like standardizing hyphenation, CSS widows and orphan support (and how they interact with columns). Different browsers seem to apply faux-bolding even if you’re using the approved methods to avoid it. There’s lots of JS, plugin and other server-side fixes for these, but the browser ought to be able to do it by itself.

    Copy & paste the code below to embed this comment.
  8. Was just asking the twitter-sphere about this the other day, albeit with a little less complexity (I was asking if anyone knew of any graded fonts designed for screen). This would certainly take the place of that. It’d be a lot more to QA, but definitely worth it if we’re going to continue to see a burgeoning amount contexts for reading.

    Copy & paste the code below to embed this comment.
  9. OS X and iOS actually still support Apple’s variable font mechanism, as does the open source FreeType rendering engine used in many browsers cross platform. It is part of the TrueType standard, documented here: https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6fvar.html.

    It supports multiple variation axes, including weight, width, slant, and optical size. Glyphs are interpolated along these axes, allowing a fine degree of control. It even supports non-linear interpolation via the avar table. It also supports named variation instances, which allow the font designer to specify specific designs, for example, multiple weights that would normally be separate font files. Additionally, glyph hints can be adjusted to account for variations.

    Apple only ships one font with variation support with OS X: Skia. There used to be a UI for specifying the variation you want in apps like TextEdit, but that has since disappeared. However, when you select Skia Bold, for example, you’re actually using a variation font, not a separate font file.

    This format has been around for a long time, seems fairly complete, relatively easy to implement, and is still supported by a wide variety of devices. Perhaps it could be resurrected for web fonts.

    Copy & paste the code below to embed this comment.
  10. I understand the concept. But I’m having trouble envisioning this. Is it possible to put a page together that allows for toggling between what’s possible now and what this kind if responsive type can provide so we can see the difference?

    Copy & paste the code below to embed this comment.
  11. I invite everyone interested in what problems a new format should address to edit https://meta.wikimedia.org/wiki/Future_Global_Font_Format_Requirements with their ideas :) There’s also a discussion at http://typedrawers.com/discussion/1014/the-next-font-format

    Copy & paste the code below to embed this comment.
  12. excellent article, website designing is best services to increase more conversion. this type of business is rapidly growing in the marketing you should start business of web designing as well as web development.

    Copy & paste the code below to embed this comment.
  13. Great perspective and insight, thanks!

    Copy & paste the code below to embed this comment.
  14. Be fond of variable fonts, most equipment that tells a website of the guest backgrounds is still in its immaturity. But latest HTML5 APIs and forthcoming CSS media inquiries make look tracking to verify viewing distance and responding to surrounding light a realism soon.

    Copy & paste the code below to embed this comment.
  15. Hi..
    Great Post..Thank you for sharing this valuable post..I used this method for my website..http://travelgenieapp.com/

    Copy & paste the code below to embed this comment.
  16. Really it is awesome post. Thank you for such an informative post.

    Copy & paste the code below to embed this comment.
  17. Hello Nick Sherman - I must say beautiful webfonts, very few fonts are really as you mentioned above. It would be very useful for the web designers. Thanks

    Copy & paste the code below to embed this comment.