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

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!

--ADVERTISEMENT--

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.

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.

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.

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.

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.

Snapchat

Snapchat Color Codes

Hex: #FFFC00

RGB: 255,252,0

Snapchat Fonts

Windows: Avenir Next

macOS: Avenir Next

iOS: San Francisco

Android: Roboto

Strangely enough, the font used on the web version of Snapchat is a little different to most, as most tend to revert to the system font. Snapchat, however, uses Avenir Next.

Facebook Messenger

Facebook Messenger Color Codes

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

Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, author, and teacher at heart. Currently the design editor at SitePoint (ex Toptal), founder of UX Tricks, writer at .net Magazine and Web Designer Magazine, and occasionally a collaborator with top design companies such as Adobe and InVision.