Figma Fonts Playground System

over 2 years ago from , UI Designer

Before starting a new project I was deeply involved in Google Fonts exploration process to discover most legible, interesting and underrated best web fonts to use in 2019.

As the result, I've made a Figma library where are 24 Sans and Sans Serif fonts were declared as global styles. Each of it contains some vertical and horizontal spacing tweaks for the best web performance.

It's completely free, so duplicate for Figma here: http://setproduct.com/web/fonts

  • Helps designers to be better at typography
  • Fits for typefaces pairing research
  • Labeled, named and organized
  • Powered by Figma global styles


I am planning to write a Medium post soon describing each font closer with suggestions for which kind of product it might fit for. So, stay tuned :)


  • Randolph Wiafe, over 2 years ago

    This is priceless man! Thank you for all your hard work!

    2 points
  • Alexis WollseifenAlexis Wollseifen, over 2 years ago

    Thanks man! Do you plan to "keep it up to date" with the new fonts you will discover?

    1 point
    • R. Kamushken, over 2 years ago

      I might be excited about this, but Google.Fonts used to update so rarely. Moreover, there're just a little of Sans Serif typefaces convenient for usage and there're no updates for years...

      0 points
      • Alexis WollseifenAlexis Wollseifen, over 2 years ago

        Yeah, totally agree with that. I'd like more update from them, but without loosing fonts selection quality. Nevertheless, tank you for sharing your work! :)

        0 points
  • Dave BowkerDave Bowker, over 2 years ago

    Very nice @R.Kamushken!

    One point, and this also relates to your other design kits (which I bought all of them yesterday), your naming conventions could be a little more generic. For example, the type styles names are called things like 96 sp • H1 / Abril Fatface.

    An issue with that, is that if I change the font size, it's no longer 96! Same if I changed the typeface, it's no longer Abril! Then I end up with type styles that confuse me when actually it's something like 72pt H1 / Work Sans!

    This is more a suggestion for your other kits rather than this one, but perhaps just something simpler like H1, H2, body, etc., would be enough?

    1 point
    • R. Kamushken, over 2 years ago

      Hey Dave, thanks for your feedback! Actually, this problem is more related to more convenient renaming process for the entire global styles in Figma as well, IMHO. I just considered by default it's more usable to start operating by the font-size instead if just keeping H1,2,3,4 in the name, that's why it comes first in a name. But if you're going deeper into customization you have to care about customizing proper labels for your own :)

      0 points
  • Maja CerarMaja Cerar, over 2 years ago

    Thanks for all the effort man, this is super useful

    1 point
  • Tyson KingsburyTyson Kingsbury, over 2 years ago

    I'm a HUGE fan of your work dude... Thanks for this!

    1 point
  • Metin SarayMetin Saray, over 2 years ago

    please do

    1 point
  • Josh Chambers, over 2 years ago


    0 points