Product Sans
sethusenthil.github.io > Product Sans

What is Product Sans?



Product Sans is the font developed for google_logo branding purposes. It is used in the logo itself, and many other products.

The new Google logo and identity system was developed to respond and grow with the changing needs of our users. It is a system that takes into account scale, interaction, and legibility, giving users a consistent and beautiful experience of the Google brand, wherever they encounter it.

To fully execute the brand system, we took the design a step further, by creating a custom, geometric sans serif called Product Sans. Simple, humble, and approachable, Product Sans was created from scratch to pair seamlessly with our logo in a variety of contexts and product lockups without overshadowing it. Additionally, it complements the new identity by introducing a primary branding typeface that is different in style and character from other interface text elements used in Material Design. With its careful weaving of form and function, it is an appropriate and essential component to the Google brand system.

Try it Out!

Font Size Control:

Product Sans Webfont

If you are a web developer, most likely you are already in love with this font. Well good news for you! You can use this font in your next project!

Copied to clipboard
<link rel="stylesheet" type="text/css" href="https://sethusenthil.com/Product-Sans/api/font.css">

Before you use this font, please read the license

You can refer the font in many different methods, choose the one thats comfortable for you.

Class Id Element
.Product-Sans #Product-Sans <Product-Sans></Product-Sans>
.ProductSans #ProductSans <ProductSans></ProductSans>
.gfont #gfont <gfont></gfont>
.ps #ps <ps></ps>

Product Sans Downloadable Font

Not a web developer? Or just want it on your device? You may install them in any format you like! (Woff2 format is not compatible for Mac Os users).

But before you install any of the following, please read the license.


Syntax Specials

It's not over yet! There are specials characters you can enter, to create special icons and shapes!

google_logo google_G
google_logo google_G