Fonts and Colors Used by Facebook, Twitter, Instagram, Google and More

Share this article

Fonts and Colors Used by Facebook, Twitter, Instagram, and More

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:

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

The Facebook Messenger logo

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

The Instagram logo

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

The WhatsApp logo

WhatsApp Color Values

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

Facebook, by Facebook (lol)

The Facebook logo

Facebook Color Values

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

Twitter

The Twitter logo

Twitter Color Values

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

Pinterest

The Pinterest logo

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

The LinkedIn logo

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

The Snapchat logo

Snapchat Color Values

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

Snapchat Fonts

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

YouTube

The YouTube logos

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 Logo brand

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.

TikTok Logomark

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:

image alt

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

Twitch Purple Color Value

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

Social Media Colors as CSS Variables

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
}

Still haven’t found what you’re looking for? Don’t worry — we’ve got a guide to free fonts that will get you taken care of.

FAQs About Fonts and Colors Used by Social Networks

What font does Facebook use?

Facebook primarily uses the “Facebook Letter Faces” font family for its branding and user interface. This font family was custom-designed for Facebook and included various weights and styles to ensure consistency across the platform.

What font does LinkedIn use?

LinkedIn primarily uses the “Circe” font family for its branding and user interface. Circe is a sans-serif typeface that LinkedIn chose to create a clean and professional appearance for its platform.

What font does Pinterest use?

Pinterest primarily uses the “Noto Sans” font for its branding and user interface. Noto Sans is a clean and legible sans-serif typeface that is widely used for digital content, and it helps maintain a consistent and readable design on the platform.

What font does Facebook Messenger use?

Facebook Messenger mainly uses the “Helvetica Neue” font family for its user interface. Helvetica Neue is a widely recognized and clean sans-serif typeface known for its readability.

What is the original font of Facebook?

The original font of Facebook’s logo, as it was initially designed, is called “Klavika.” Klavika is a sans-serif typeface known for its clean and modern appearance. It was created by Eric Olson and used for Facebook’s logo and branding during its early years.

However, it’s important to note that Facebook’s branding has evolved over time, and they have made adjustments to their logo and typography. While Klavika was used in the early days of Facebook, the company may have transitioned to custom-designed fonts or other typefaces in later iterations of its branding.

Daniel SchwarzDaniel Schwarz
View Author

Previously, design blog editor at Toptal and SitePoint. Now Daniel advocates for better UX design alongside industry leaders such as Adobe, InVision, Marvel, Wix, Net Magazine, LogRocket, CSS-Tricks, and more.

colorfacebookfontInstagramlinkedinPinterestsnapchattwitterWhatsappYoutube
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form