Typeface Analysis of the Top 8 Social Media Websites

By Kathleen Burns , Mar 26 2014
Social Media

Featured Image: Unplash/NordWood Themes

“Control over typography is not just a basic design necessity, knowing how to treat text as a user interface is the key factor for successful Web design. Successful websites manage to create a simple interface AND a strong identity at the same time. “

No one can deny that some social media networks are some of the most widely used websites on the Internet. Strong social media network brands develop unique, simple and recognizable interface, and typeface plays a huge role in why people are drawn to their content. It’s part of the reason why these big companies don’t make the same brand mistakes as other businesses. It provides a sense of what the website will be like, tells people what is appropriate to post there, and it identifies the company brand.

If you’re designing your next project and are feeling clueless about how to make decisions about the typography, read these short analyses on the top 8 social media websites for inspiration.

Facebook-logo

1. Facebook

Font:  Modified version of Klavika Bold

Klavika is a family of sans-serif fonts designed by Eric Olson and released by the typeface design company Process Type Foundry in 2004. They describe the Klavika font as “unadorned, modern, and infinitely flexible” typeface for the edgy and modern 21st century.

The font’s modification has been necessary for the Facebook logo. It cleans up the font and smooth out any awkwardness with the letters “f”, “a”, and the “k”. The use of white space is especially important in Facebook design because it gives the website an inviting readability compared to many of the sans-serif.

linkedin-logo

2. LinkedIn

Font: Myriad Bold

Myriad is a humanist san-serif typeface designed by Robert Slimbach and Carol Twombly for Adobe Systems.  Myriad’s clean, open shapes and precise letter fit make this an excellent choice for text typography that is comfortable to read. Myriad is easily distinguished from other sans-serif fonts due to the special “y” descended (tail) and slanting “e” cut.

Myriad’s versatility makes it the perfect typeface for the business social network LinkedIn. The typeface fits the corporate feel and design of LinkedIn and it can be successfully used on everything from a business card to a large-scale poster.

lastfm-logo

3. last.fm

Font:  Modified National

The National font is termed as “a revival of the 19th century English and American grotesks.” National is a commercial typeface designed by Klim Type Foundry.

The Last.fm logo design is based on National with an addition of ligatures to the letters “a” and “s”.  Last.fm has also modified the font to include the ‘as’ ligature referencing the audioscrobbler database. It lets people know this is a social music site and you can share your favorite songs or playlists with your friends.

myspace-logo

4. Myspace

Font: Calibri

Calibri is a humanist sans-serif typeface family under the Microsoft ClearType Font Collection. The font features subtly rounded stems and corners that are visible at larger sizes.

In 2013, Myspace gave up the battle as a pure social networking site and has since made several attempts at branding themselves as a more modern music site. Previously the logo had the word “my” appear in the Helvetica font, followed by a symbol representing a space. The recent font change to Calibri has been highly favored because it improves screen readability on digital devices.

tumblr_logo

5. Tumblr

Font: Bookman Old Style

Bookman or Bookman Old Style is a serif typeface derived from Old Style Antique designed by Alexander Phemister in 1858 for Miller and Richard foundry. It was developed as an alternative to the Caslon font.

Tumblr has hit the mark with their logo and looks remarkably well despite the font’s age, although some versions of the logo have bubble outlines to help keep that modern look. Most likely this font was chosen because it was one of the best fonts for books and display applications, not to mention, it’s easy to read in small sizes.

twitter_logo

6. Twitter

Font: Pico-Black and Arista

Pico is a pixel typeface that has been designed to look good in small and large sizes. It was designed in 2009 by Maniackers Design.

Pico font has been used for creating the Twitter logo for all the letters except for the “e”. Instead, Arista has been used to type the letters “e” and “s”.

The cute font style helps portray an informal tone to the whole social media platform, perfect for those bathroom text updates.

YouTube-logo

7. YouTube

Font: Alternate Gothic No. 2

Designed by Morris Fuller Benton for American Type Founders in 1903, Alternate Gothic was intended to create several black and condensed typefaces of the same design to be more flexible for different typographic tasks. It has three styles and works best for posters, headlines and advertisements.

In December 2011, when YouTube launched a new version of the site interface, a new version of the YouTube logo was introduced too. The new logo has a darker shade of red, the first change in design since October 2006. The red color change was most likely done to match the redesigned theme, and perhaps also to mean activity and passion for video viewing and sharing.

vimeo-logo

8. Vimeo

Font: Black Rose

Designed by Bright Ideas, it is a free font available to everyone. Perhaps that is why Vimeo chose to use it in their logo—cheap on the wallet.

Vimeo is a video sharing site which focuses on high quality video output. Today, it is the number one choice for independent filmmakers to showcase their film portfolio. Black Rose has been used to create that “indie” feel, which is a vital characteristic for the independent film sharing platform.

If you step back from your typeface and it doesn’t invoke a mood, you’re not creating a strong impression. Don’t be stuck in neutral! Social media sites make an impression, and their logos reflect how they want their audience to react to their content. If your typeface isn’t cutting it for your design, fix it. If it fits the design intent of your project and you can pull it off, do it. Just do it well or choose another typeface.

Now, consider what you have learned about the typography of these sites. Why do you feel they are so successful?

How useful was this post?

Average rating 1 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Kathleen is a New Jersey blogger with an interest in brand design and a passion for graphic design, illustration, and social media. She loves to deliver inspiration to others to give them the means to achieve their branding and design goals.

 

Leave a Reply