Derrick Boyd, Web Designer at Evolve Creative Group, reviews some of the font trends he's noticed throughout 2012. He'll be discussing the rebrandings of a number of different companies, web safe font evolution and font changes in relation to responsive typography. By the end of this video you'll be able to make some conclusions as to where typography is heading in 2013. If you have any questions or feedback please leave a comment below.
Hi, I'm Derek Boyd. I'm a web designer here at Evolve Creative Group, and today I would like to go over with you some of the font trends that I've noticed over the past year. Some of the things we'll be discussing in today's video include the rebrandings of a number of different companies and the things that I've noticed that were similar between the ways they approached their typography. I'd also like to go over the web fonts, @font face, as well as responsive typography. Hopefully, at the end of the video, you will have learned a little bit about some of the technologies that are available to you online when it comes to typography.
First, let's talk about the rebrandings. There's Microsoft, who has recently been implementing their metro design principles amongst all their products and services. Those principles included things like clean typography, really simple shapes--simple flat shapes--like squares and rectangles, and overall greater attention to detail when it comes to design. You'll notice these changes in the logos for Windows 8, Xbox, Microsoft Office. Most recently, they updated their Microsoft logo. It used to have bold and blocky letter forms, and they've really slimmed it down. They're using a font called Segoe, which is a Helvetica-like sans serif. They're using this font across the board for all of the logos and rebrandings.
Next, eBay has also recently gone through a rebranding. Much like Microsoft, they went from a bolder, blockier previous font to a slimmed down Helvetica-like sans serif typeface for their current version. They're using Universe. In their old logo, each letter was a different color and the letter forms overlapped each other a little bit awkwardly. In their new logo, they did away with the overlapping, but they didn't really replace it with anything too interesting. I'll wait to judge this logo until I've seen more of how they plan to implement it in their marketing materials.
DC Comics also recently reimagined their branding. In the previous version of their logo, it was a shield that had pretty bold, blocky letter forms. In the new version of their logo, they got a little bit more clever. The D and the C act as a visual metaphor for the comic book pages that they're famous for. They also slimmed down their typography some. They moved to a Helvetica as their font of choice. If you pay attention to their applications of their branding, some of them are pretty awesome. They will focus on specific characters and do pretty cool stuff with the D and C. So the unifying trend amongst these redesigns is that all of these companies started with a more bold and blocky original logo and moved to something a little bit more slim. They all switched to Helvetica or something similar for their font. All these changes cause these companies to look more updated and modern in look and feel.
Next, let's move on to website fonts. Thanks to HTML 5, CSS 3, and the modern web browsers that we now use, we're no longer limited to just website fonts for our online typography. Website fonts used to be fonts that were already pre-installed on most computers from when consumers first purchased them. Over the past year, I've noticed a higher amount of fonts available for use with @font face, the CSS property, and I've also noticed a lot more designers using this method to implement unique fonts. When @font face first came about, the font selection for use with it was still kind of slim. This was due to the licensing issues with the different font foundries that owned the rights to these fonts. Designers were also hesitant to use it because it was still new and there were compatibility issues.
In 2012, it seems like most of the font foundries have come around and are now allowing use of their fonts online. There are also plenty of services online where you can find, buy, and also host these fonts, such as Typekit and FontSquirrel.com and MyFonts.com. You'll also notice that some of the companies that I mentioned earlier are using @font face to have their unique fonts that they used in the rebrandings on their websites as well.
Now, let's move on to responsive typography. In responsive web design, the design of a site will adjust itself to accommodate different user screen sizes. This way your site will still look perfect whether you're using a gigantic Apple Cinema display or a smaller Android Smart Phone. Responsive typography allows the designer of a site to adjust mainly the typography to accommodate these different sizes. Things that you might need to adjust with your responsive typography include the line length, the font size, and maybe even the font itself. This way, your site will continue to be readable, no matter the size of the screen that your user is using.
In summary, I've noticed a lot of companies that previously had bold, blocky typography in their logos are switching to something more slim and clean in their rebranding. Most of them are using Helvetica or something similar for their fonts. I've also noticed a lot of designers using @font face for their web typography and using responsive typography to make sure all of that text is readable across all devices. If you have any questions or feedback, please leave them in the comments below. Thanks for watching, and for more educational videos, please head over to the Evolve U YouTube channel.