Uses of variable fonts in the wild

Every other day I see people asking about examples of “real” websites that use variable fonts but are not demos/tools for variable fonts. I’ve had a public Google Doc in which I compiled font releases, reference material and uses for a while now, but it’s not that nice of a resource to link to when someone asks. So I’ll collect more examples here now.

2018.ampersandconf.com
Maybe the first real-life use of variable fonts, complete with a write-up by Richard Rutter on the woes and wonders of using a still experimental thing this early on (January 2018)

whoisinthetypemediastudio.today
Little site by Rutherford Craze putting tons of pressure on the tm-students at KABK to work even harder

typographics.com
Likely the most exciting use of variable fonts online right now that is not a demo (well, if a site for a typography conference can not be a demo for fonts) also known as “the Obviously Mini Site” designed and built by Nick Sherman. Perfect fallback game down to browsers on MacOS 10.6.8!

nngroup.com
Likely the most boring normal use of variable fonts you’d never guess uses variable fonts if you didn’t know.

v-fonts.com
Of course, most sites promoting or helping you with variable fonts want to walk the walk and not only talk about them. This site by Nick Sherman uses different weight-settings of Zeitung, nothing crazy, but demonstrates that variable fonts can be practical without being super flashy and interactive.

More examples from the category “demo or real-world usage – you decide”:
typenetwork.com/brochure/opentype-font-variations
zeichenschatz.net/demos/vf/variable-web-typo
very-able-fonts.com
variablefutures.com

 
to be continued
 

This entry was posted in Type and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>