Design & UX
Article
By Daniel Schwarz

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

By Daniel Schwarz

It’s handy to have a collection of brand assets used by social networks, so you can correctly incorporate those assets into your own designs. Designers often need to know the fonts and colors used by popular social networks such as Facebook, Twitter and Google+, as this information can be used to design more recognizable social login buttons and icon-links to social channels.

Let’s take a look at the various fonts and colors (I’ll display both the Hex and RGB color codes) used by Facebook, Twitter, Google+, Pinterest, Snapchat, Instagram, LinkedIn and Facebook Messenger.

--ADVERTISEMENT--

Facebook

Fonts and colors used by Facebook

Facebook Font

  • Windows: Segoe UI (or Tahoma for older versions of Windows)
  • macOS: San Francisco
  • iOS: San Francisco
  • Android: Roboto

Facebook uses Segoe UI for the Windows version of their desktop website, and the Apple-made San Francisco font for the macOS version. It used to be Lucida Grande, but in recent years Facebook have tried to use default system fonts, which is why they use Roboto on Android and, again, San Francisco on iOS. Lucida Grande and Helvetica Neue are no longer used.

Facebook Hex/RGB Color

  • Hex: #3B5998
  • RGB: rgb(59, 89, 152)

You can view the entire Facebook Color Palette here — despite this resource being 5 years old now, the colors haven’t changed — but for quick reference, the main Facebook Blue color is #3B5998 in Hex, and rgb(59, 89, 152) in RGB.

You can find out more detailed information about Facebook’s Branding Guidelines here.

Twitter

Fonts and colors used by Twitter

Twitter Font

  • Windows: Helvetica Neue
  • macOS: Helvetica Neue
  • iOS: San Francisco
  • Android: Roboto

While Twitter has also defaulted to system fonts for their mobile apps (as most social networks do), using the San Francisco font for both iOS and Android, the desktop versions of the website use Helvetica Neue.

Remember when Twitter randomly switched to Gotham Narrow, then switched back again shortly after, because nobody liked it?

Twitter Hex/RGB Color

  • Hex: #1DA1F2
  • RGB: rgb(29, 161, 242)

Paired with variants of Twitter Grey (which contains blue, black and white tones), Twitter uses a bright blue hue as its primary brand color. You can find out more about Twitter’s Brand Guidelines here.

Google+

Fonts and colors used by Google Plus

Google+ Font

Google uses Roboto everywhere — it’s the standard font for every single Google app and service, including Android, Google Maps, Google Translate…you name it. In fact, the only case-scenario where I don’t think they use the Roboto font is Google.com!

Roboto and the colors used in various Google apps encompasses what Google calls the Material Design language.

Google+ Hex/RGB Color

  • Hex: #DB4437
  • RGB: rgb(219, 68, 55)

Google+ Plus once used a combination of bright colors for their logo (roughly the same colours as the well-known Google Chrome logo), but nowadays they’d rather use what they call Google+ Red, which is #DB4437 in Hex and rgb(219, 68, 55) in RGB. That being said, Google+ does still use those other colors (but not so much the yellow) for their website. Here they are:

  • Google+ Red: #DB4437 — rgb(219, 68, 55)
  • Google+ Green: #0F9D58 — rgb(0, 128, 0)
  • Google+ Blue: #2962FF — rgb(41, 98, 255)

Read more about the Google Brand Guidelines here.

Pinterest

Fonts and colors used by Pinterest

Pinterest Font

  • Windows: Helvetica Neue
  • macOS: Helvetica Neue
  • iOS: San Francisco
  • Android: Roboto

Fun fact: while Pinterest uses roughly the same fonts that are standard with other social networks, Pinterest uses the Hiragino font for Japanese and other oriental languages, which reads better in comparison to the fonts used with Roman languages.

You can read more about Pinterest’s Brand Guidelines here.

Pinterest Hex/RGB Color

  • Hex: #BD081C
  • RGB: rgb(189, 8, 28)

Pinterest’s classic red hex color has never changed!

Watch Designing with Canva

Make professional web and print designs using Canva

Snapchat

Fonts and colors used by Snapchat

Snapchat Font

  • Windows: Avenir Next
  • macOS: Avenir Next
  • iOS: Helvetica Neue
  • Android: Roboto

Strangely enough, the font used on the desktop web version of Snapchat is a little different to most social networks, as most tend to revert to whatever the default system font is, as mentioned earlier. Snapchat, however, uses Avenir Next.

Snapchat Hex/RGB Color

  • Hex: #FFFC00
  • RGB: rgb(255, 252, 0)

Instagram

Fonts and colors used by Instagram

Instagram Font

  • Windows: Segoe UI
  • macOS: San Francisco
  • iOS: San Francisco
  • Android: Roboto

Interestingly enough, the fonts used on Instagram vary depending on the default system font of that OS at the time — it’s automatically detected. For Windows this is Segoe UI, for macOS it’s San Francisco, and for Android it’s Roboto. Historically, Instagram has used Freight Sans (way back when their logo and overall visual aesthetic was way cooler), and Proxima Nova.

Instagram Hex/RGB Color

  • Hex: #262626
  • RGB: rgb(76, 76, 76)

When Instagram revamped their brand in 2016, they decided to use the Hex color code #222222, or rgb(76, 76, 76) in RGB. A monochrome layout actually makes sense for a photography-based website, as it makes the imagery stand out more. As for the Instagram logo though…well…they chose literally all of the colors (much to the dismay of Instagram users worldwide).

Facebook Messenger

Fonts and colors used by Facebook Messenger

Facebook Messenger Font

Facebook Messenger uses the same set of fonts as the standard Facebook app, both on desktop and mobile, as seen below:

  • Windows: Segoe UI
  • macOS: San Francisco
  • iOS: San Francisco
  • Android: Roboto

Facebook Messenger Hex/RGB Color

Although still a Facebook app, the blue used by Facebook Messenger is slightly different:

  • Hex: #0084FF
  • RGB: rgb(0, 132, 255)

And the logo also uses a gradient color:

  • Hex: #00C6FF
  • RGB: rgb(0, 198, 255)

LinkedIn

Fonts and colors used by LinkedIn

LinkedIn Font

LinkedIn uses Source Sans for the desktop version of their website. You can read more about Linkedin’s Brand Guidelines here.

LinkedIn Hex/RGB Color

  • Hex: #0077B5
  • RGB: rgb(0, 119, 181)

We’ll continue to update this article with new social networks as they arise, and as each social network updates their fonts and branding colors. If you think we’ve missed an important one, or something is incorrect here, let us know in the comments. Hope you found this cheat sheet helpful!

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account