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

Original Source: https://www.sitepoint.com/fonts-colors-used-facebook-twitter-google/

This article was updated in November 2018 to reflect the most recent colors and fonts used by social networks such as Facebook, Twitter, and Instagram. For the first time this doesn’t include Google Plus, which is now defunct. Was it ever really alive anyway?

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

Having a collection of brand assets used social networks, so that we can incorporate them into our own designs, is quite handy. It’s something we Google every time we build an app or website (What is the color used by Facebook?, What is the Facebook color code?, or simply, Facebook blue). In fact, I bet that’s how you found this article!

Well, I won’t keep you waiting. Let’s take a look at the colors and fonts used by Facebook, Twitter, Pinterest, Instagram, Snapchat, LinkedIn, Facebook Messenger, YouTube, and Google Material Design. If I’ve missed something, hit me up on Twitter.

Just show me the main colors (Facebook, Twitter, Instagram, YouTube, Pinterest).

Facebook

“Facebook Blue” Color Codes

Hex: #4267b2
RGB: 66,103,178

Facebook Fonts

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

Facebook uses the Segoe UI font for the Windows version of their desktop website, and the Apple-made San Francisco font for the macOS version (both are the default system font). For iOS and Android, it’s San Francisco and Roboto respectively (again, both system fonts, for readability and familiarity. These fonts are becoming a standard.

Read more about Facebook’s Branding Guidelines here.

Twitter

Twitter Color Codes

Hex: #38A1F3
RGB: 56,161,243

Combined with variants of “Twitter Grey” (which contains a mix of blue, black and white tones), Twitter blue (#38A1F3) is used as the primary brand color throughout.

Read more about Twitter’s Brand Guidelines here.

Twitter Fonts

Windows: Helvetica
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), the Windows version of the website uses Helvetica, and the macOS version Helvetica Neue — somewhat outdated but I’m sure they have their reasons.

Remember when Twitter randomly trialed Gotham Narrow?

Pinterest

Pinterest Color Codes

Hex: #BD081C
RGB: 189,8,28

Pinterest’s classic red color has never changed!

Pinterest Fonts

Windows: Segoe UI
macOS: San Francisco
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.

Read more about Pinterest’s Brand Guidelines here.

Instagram

“Instagram Grey” Color Codes

Hex: #231F20
RGB: 35,31,32

Instagram also uses a combination of different gradients. It’s difficult to understand what the individual colors are and in which scenario they should be used, but you can find all of Instagram’s brand assets here. To be honest, it’s rare to see these colors in the wild — those referencing their social media channels tend to use “Instagram Grey.”

Instagram Fonts

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

Nothing out of the ordinary here. As you can, Segoe UI, San Francisco, and Roboto are sort of becoming a standard with social networks, with Instagram being no different.

The post Fonts and Colors Used by Facebook, Twitter, Instagram + More appeared first on SitePoint.