About Product Sans

Creator:

License: Product Sans

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.

Regular

!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z

Bold

!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z

Italic

!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z

Bold Italic

!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z

In tandem with developing the logotype, we created a custom, geometric sans-serif typeface to complement the logo in product lockups and supporting identity materials. We call it Product Sans. The typeface design takes cues from that same schoolbook letter-printing style, but adopts the neutral consistency we’ve all come to expect from a geometric sans serif. This allows us to maintain an appropriate level of distinction between the Google logotype and the product name. The character set is complete with numerals, punctuation, accent and alternate characters, fractions, symbols, and supports extended Latin, Greek, and Cyrillic. Download the type specimen for more detail.

Use on the Web

The Product Sans webfont is available for use on the web via the Google Fonts API.

1. Add this code to your website:

<link href='https://fonts.googleapis.com/css?family=Product+Sans:400,400i,700,700i' rel='stylesheet' type='text/css'>

Instructions: To embed this font into your web page, copy this code into the <head> of your HTML document.

2. Integrate the font into your CSS:

font-family: 'Product Sans', Arial, sans-serif;

Instructions: Add the font name to your CSS selector just as you'd do normally with any other font.

Use in Desktop Software

The Product Sans font has been extracted from the Google Fonts API for use in desktop software.

1. Download the font file in your desired format:

Latin Regular

Download TTF
ProductSans-Regular.ttf
Download WOFF
ProductSans-Regular.woff
Download WOFF2
ProductSans-Regular.woff2
Download SVG
ProductSans-Regular.svg
Download EOT
ProductSans-Regular.eot

Latin Bold

Download TTF
ProductSans-Bold.ttf
Download WOFF2
ProductSans-Bold.woff2

Latin Italic

Download TTF
ProductSans-Italic.ttf
Download WOFF2
ProductSans-Italic.woff2

Latin Bold Italic

Download TTF
ProductSans-BoldItalic.ttf
Download WOFF2
ProductSans-BoldItalic.woff2
Note: As these fonts come directly from the Google servers, they will need to be renamed. Note: Some of these formats contain the extra glyphs, some do not.

2. Download any necessary subsets (optional):

Latin Extended Regular

Download WOFF
ProductSans-LatinExt-Regular.woff

Latin Extended Bold

Download WOFF2
ProductSans-LatinExt-Bold.woff2

Latin Extended Italic

Download WOFF2
ProductSans-LatinExt-Italic.woff2

Latin Extended Bold Italic

Download WOFF2
ProductSans-LatinExt-BoldItalic.woff2

Cryllic Regular

Download WOFF
ProductSans-Cryllic-Regular.woff

Cryllic Bold

Download WOFF2
ProductSans-Cryllic-Bold.woff2

Cryllic Italic

Download WOFF2
ProductSans-Cryllic-Italic.woff2

Cryllic Bold Italic

Download WOFF2
ProductSans-Cryllic-BoldItalic.woff2

Greek Regular

Download WOFF
ProductSans-Greek-Regular.woff

Greek Bold

Download WOFF2
ProductSans-Greek-Bold.woff2

Greek Italic

Download WOFF2
ProductSans-Greek-Italic.woff2

Greek Bold Italic

Download WOFF2
ProductSans-Greek-BoldItalic.woff2

3. Install to your computer

  • For Windows 10/8/7/Vista
    Right-click the font file then click the "Install" menu option.

  • For Mac OS xx 10.3 or above
    Double-click the font file then click the "Install Font" button at the bottom of the preview.

Bonus: Use custom substitution rules

Product Sans has glyph substitution rules that replace specific glyph sequences with the Google logotype and the Google G logo.

To use the custom substitution rules, open TextEdit (or any other software that supports glyph substitutions) and type in the following glyph sequences:

  • google_logo for the Google logotype
  • google_G for the Google G logo