This article was updated in November 2018 to reflect the most recent and used by social networks such as , , and . 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!

Watch Create Better Graphics Fast with Canva

Make professional web and print designs using Canva


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

Fonts and colors used by 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

Fonts and colors used by 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

Fonts and colors used by 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

Fonts and colors used by 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

Fonts and colors used by 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

Fonts and colors used by Facebook Messenger

Facebook Messenger Color Codes

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

  • Hex: #0084FF
  • RGB: 0,132,255

And the logo also uses infuses this color:

  • Hex: #00C6FF
  • RGB: 0,198,255

Facebook Messenger Fonts

Messenger uses the same set of fonts as Facebook:

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

LinkedIn

Fonts and colors used by LinkedIn

LinkedIn Color Codes

  • Hex: #0077B5
  • RGB: 0,119,181

LinkedIn Fonts

LinkedIn uses Source Sans exclusively (with Arial as a backup), specifically with weights between light and semi-bold. Read about Linkedin’s Brand Guidelines here.

Note: Source Sans doesn’t have an italic style, so sub for Georgia. I know, weird.

YouTube

YouTube logo

YouTube Color Codes

  • Hex: #ED3833
  • RGB: 237,56,51

YouTube Fonts

YouTube, being owned by Google, uses only Roboto.

Bonus: Google’s Material Design

Yep, that’s right. All Google apps and many third-party Android apps (for familiarity and consistency), use the Google design system known as Material Design System.

Material design contains a color system of acceptable colors (not required, but recommended) and the default, widely-recognized Google font, Roboto.

Have I missed something? Let us know in the comments or tweet me.





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

LEAVE A REPLY

Please enter your comment!
Please enter your name here