The Fonts and Colors Used by Facebook, Twitter and Google+

By Adam Roberts
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

Keen to make your own logo? Check out our video tutorial Logo Thumb Rules to learn more.

Sometimes it’s handy to have a collection of the brand assets used by various social networks, so you can correctly incorporate those assets into your own work. Bookmark this page to make sure you use the correct brand details in your next project.

Facebook

Fonts – Lucida Grande/Tahoma (Web), Helvetica/Roboto (Mobile)

Facebook favours Lucida Grande (Mac) and Tahoma (PC) for its text in the web interface, and for mobile, uses the system defaults Helvetica Neue (iOS) and Roboto (Android).

Colors – #3b5998

The main ‘Facebook blue’ color has a hex value of #3b5998 and the RGB values: 59, 89, 152 #FFFFFF. The full palette used on the site is viewable here.

More information on Facebook branding here.

Twitter

Fonts – Helvetica Neue (Web and Mobile)

Twitter recently reverted a high-profile font change, returning to Helvetica Neue for the web after a brief period of using Gotham Narrow SSm.

On mobile devices, the font remains Helvetica Neue, Arial or the system default sans-serif font.

Colors – #55ACEE

Twitter uses a bright blue as its primary color, pairing it with variants of Twitter gray which contain blue, and black and white. Courtesy of Twitter’s brand assets page, below is an image with the full palette.

The Twitter color palette

Source: Twitter

More information on Twitter branding here.

Google+

Fonts – Roboto

Google+ uses the Roboto font, which is also the default font for Android, Google Maps and Google Play.

Colors – #dd4b39

The main ‘Google+ red’ color has a hex value of #dd4b39 and the RGB values: 221, 75, 57

More information on Google+ branding here.

If you enjoyed reading this post, you may enjoy learning about making your own logo with our screencast Logo Thumb Rules.

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • Bruno Seixas

    snippet added ;) tks

  • Paul s.

    Awesome. Can you tell me what the fonts and colors are for Skype? That would help me out on a project I am working on. Cheers. Keep up the great posts!

  • Thank you so much for this post. I just used info here on a visual image I am planning to post on Facebook.

  • Elainia Trubee

    i can’t read my stuff its to small to see how do i get my words on my face book to be big again ,any one help !

    • bimjim

      Hold down the CTRL key and hit the plus sign. Keep hitting the plus sign until it is the size you want. Ctrl and minus sign makes the web page smaller.

  • J Munce

    Linkedin?

  • Ben Phillips

    Thanks for posting this!

  • Gracias por compartir estos datos!

  • Dave Morris

    Can you tell me the fonts used in the recent Messenger presentation given by Mark Z

  • Dave Morris
  • Gina

    Looking for the Twitter logo for the front of my phone. I’m new to this it’s very overwhelming, still learning!!