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.
Facebook Font
- Windows: Segoe UI (or Tahoma for older versions of Windows)
- macOS: San Fransisco
- iOS: San Fransisco
- Android: Roboto
Facebook uses Segoe UI for the Windows version of their desktop website, and the Apple-made San Fransisco 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 Fransisco 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 Font
- Windows: Helvetica Neue
- macOS: Helvetica Neue
- iOS: San Fransisco
- Android: Roboto
While Twitter has also defaulted to system fonts for their mobile apps (as most social networks do), using the San Fransisco 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+
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< .em> 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 Font
- Windows: Helvetica Neue
- macOS: Helvetica Neue
- iOS: San Fransisco
- 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!
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.
Continue reading %Fonts and Colors Used by Facebook, Twitter, Google+ and More%
by Daniel Schwarz via SitePoint
No comments:
Post a Comment