Web
Article

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

By Adam Roberts

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.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • 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!

  • http://www.socialsuccessmarketing.com/ ruby | social success

    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!

  • https://www.youtube.com/c/umikizatoichi Umiki Zatoichi

    Gracias por compartir estos datos!

    • https://www.youtube.com/c/umikizatoichi Umiki Zatoichi

      Sorry… (in english)

      Thanks for this!

  • Dave Morris

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

  • Dave Morris
Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.