What font does Snapchat use for names?

Question

Social login buttons, links to social media channels — in 2022 this is still a thing in web design and app design. I mean, what business isn’t on social media these days? It’s a necessity!

Knowing what the different fonts and colors used by social networks are (so that we can use them in our designs) is quite handy. It’s something we “google” every time we design an app or website. (For example, “Facebook blue”, “Facebook hex value”, “What is the color used by Facebook?”, and so on).

In fact, I bet that’s how you found this article!

Well, I won’t keep you waiting any more. Let’s take a look at the fonts and colors used by Messenger (by Facebook), Instagram (by Facebook), WhatsApp (by Facebook), Facebook itself, Twitter, Pinterest, LinkedIn, Snapchat, and finally, Google/YouTube.

This article was updated in 2022 to show the newer fonts and colors used by social networks, including Facebook, Twitter, Instagram, and various others. We’ve also added fast-growing newer services Discord, TikTok, Twitch.

Jump straight to:

Messenger, by Facebook
Instagram, by Facebook
WhatsApp, by Facebook
Facebook, by Facebook
Twitter
Pinterest
LinkedIn
Snapchat
YouTube
Google
TikTok
Discord
Twitch

What’s the font used by […]? 🤔

Quick note: system fonts (i.e. : system-ui in CSS) are the standard unless otherwise stated. For each medium, this means:

Roboto for Android
Segoe UI for Windows
San Francisco for iOS/macOS

Material design (i.e. YouTube and other Google apps) also uses Roboto. However, the actual Google logo uses Google’s very own Product Sans font (and this applies to the Alphabet logo too).

Messenger, by Facebook

Messenger Color Values

Messenger hex value: #0084FF
Messenger RGB value: rgb(0 132 255)

Messenger Fonts

Messenger on macOS uses Helvetica Neue instead of San Francisco, but everything else follows the system default.

Instagram, by Facebook

Instagram Color Values

Instagram hex value: #E1306C
Instagram RGB value: rgb(225 48 108)

Instagram uses many colors in their branding, although the color value mentioned above is the one used in their own examples.

WhatsApp, by Facebook

WhatsApp Color Values

WhatsApp hex value: #25D366
WhatsApp RGB value: rgb(37 211 102)

Facebook, by Facebook (lol)

Facebook Color Values

Facebook hex value: #1877F2
Facebook RGB value: rgb(24 119 242)

Twitter

Twitter Color Values

Twitter hex value: #1DA1F2
Twitter RGB value: rgb(29 161 242)

Pinterest

Pinterest Color Values

Pinterest hex value: #E60023
Pinterest RGB value: rgb(230 0 35)

Pinterest Fonts

Pinterest uses Helvetica/Neue Haas Grotesk for their website, but the default system font for everything else.

LinkedIn

LinkedIn Color Values

Hex: #1666C5
RGB: rgb(22 102 197)

LinkedIn Fonts

LinkedIn uses : Sans-Serif on their website, which means Helvetica first/Arial second/system default otherwise.

Snapchat

Snapchat Color Values

Hex: #FFFC00
RGB: rga(255 252 0)

Snapchat Fonts

Standing out from the herd, Snapchat uses the Graphik font!

YouTube

Android, Google, and Google-owned apps such as YouTube use the design system known as Material Design, which makes references to several colors and also recommends the use of the Roboto font.

YouTube Color Values

Hex: #FF0000
RGB: rgb(255 0 0)

Google

Google Blue Color Value

Hex: #4285F4
RGB: rgb(66 133 244)

Google Red Color Value

Hex: #EA4335
RGB: rgb(234 67 53)

Google Yellow Color Value

Hex: #FBBC05
RGB: rgb(251 188 5)

Google Green Color Value

Hex: #34A853
RGB: rgb(52 168 83)

Alphabet Red Color Value

Alphabet is the company that owns Google.

Hex: #ED1C24
RGB: rgb(52 168 83)

TikTok

The TikTok logo hints at the offset red-blue anaglyphic effect of 3D glasses.

On top of their basic black logomark (#000000), they add:

TikTok Red Color Value

Hex: #EE1D52
RGB: rgb(238,29,82)

TikTok Blue Color Value

Hex: #69C9D0
RGB: rgb(105,201,208)

Discord

Fun fact: Discord’s visually distinctive blend of blue and purple is actually referred to as ‘Blurple’. They have a comprehensive branding guidelines document but if you just need the Logomark and color, you’re most welcome:

Discord ‘Blurple’ Color Value

Hex: #5865F2
RGB: rgb(88,101,242)

Twitch

Twitch has an excellent downloadable branding kit, although you do need to to work through their very twitchy branding introduction first. This extruded version is their default logo.

Twitch Purple Color Value

Hex: #5865F2
RGB: rgb(88,101,242)

Place this code snippet at the top of your CSS file to use the aforementioned social media brand colors (RGB) as CSS variables:

:root {
    --messenger: 0 132 255;
    --instagram: 225 48 108;
    --whatsapp: 37 211 102;
    --facebook: 24 119 242;
    --twitter: 29 161 242;
    --pinterest: 230 0 35;
    --linkedin: 22 102 197;
    --snapchat: 255 252 0;
    --youtube: 255 0 0;
    --tiktok: 105 201 208;
    --discord: 88 101 24;
    --twitch: 88 101 242;
}

Then call them like this:

.social-icon.facebook {
    background-color: rgb(var(--facebook)); // without alpha
    background-color: rgb(var(--facebook) / 50%); // with alpha
}