This article was updated in 2020 to show the newer fonts and colors used by social networks, including Facebook, Twitter, Instagram, and various others. Google+ didn’t make a comeback.
Social login buttons, links to social media channels — in 2020 this is still a thing in web design and app design. I mean, what business isn’t on social media these days? It’s a necessity!
Knowing what the different fonts and colors used by social networks are (so that we can use them in our designs) is quite handy. It’s something we “google” every time we design an app or website. (For example, “Facebook blue”, “Facebook hex value”, “What is the color used by Facebook?”, and so on).
In fact, I bet that’s how you found this article!
Well, I won’t keep you waiting any more. Let’s take a look at the fonts and colors used by Messenger (by Facebook), Instagram (by Facebook), WhatsApp (by Facebook), Facebook itself, Twitter, Pinterest, LinkedIn, Snapchat, and finally, Google/YouTube.
What’s the font used by […]? 🤔
Quick note: system fonts (i.e. : system-ui in CSS) are the standard unless otherwise stated. For each medium, this means:
- Roboto for Android
- Segoe UI for Windows
- San Francisco for iOS/macOS
Material design (i.e. YouTube and other Google apps) also uses Roboto. However, the actual Google logo uses Google’s very own Product Sans font (and this applies to the Alphabet logo too).
Messenger, by Facebook
Messenger Color Values
- Messenger hex value:
#0084FF - Messenger RGB value:
rgb(0 132 255)
Messenger Fonts
Messenger on macOS uses Helvetica Neue instead of San Francisco, but everything else follows the system default.
Instagram, by Facebook
Instagram Color Values
- Instagram hex value:
#E1306C - Instagram RGB value:
rgb(225 48 108)
Instagram uses many colors in their branding, although the color value mentioned above is the one used in their own examples.
WhatsApp, by Facebook
WhatsApp Color Values
- WhatsApp hex value:
#25D366 - WhatsApp RGB value:
rgb(37 211 102)
Facebook, by Facebook (lol)
Facebook Color Values
- Facebook hex value:
#1877F2 - Facebook RGB value:
rgb(24 119 242)
Twitter Color Values
- Twitter hex value:
#1DA1F2 - Twitter RGB value:
rgb(29 161 242)
Continue reading Fonts and Colors Used by Facebook, Twitter, Instagram, Google and More on SitePoint.
No comments:
Post a Comment