Remember the days when web designers only had a handful of web safe fonts to play with? When websites relied heavily on an images and typography was a secondary concern? Well those days are behind us as typography moves to the forefront of interactive design.
Typography focused websites have trended for the last few years, but 2013 has seen the demand for them intensify. Part of this is due to the introduction of flat UI design. The shift in focus on more content, as well as the increased use of infographics have also contributed. If you’re not paying attention to typography in your interactive/web layouts now is the time to start.
Good typography is essential to any layout. It organizes our content in a meaningful, user-friendly way. It also adds extra design flourishes. When working with typography in your digital designs consider this:
Fonts speak out
Remember those limited web safe fonts I was referring to earlier? Thanks to a little thing called Google Fonts, designers now have access to hundreds of free web safe fonts to add spice to their layout. Sick of Arial and Verdana? Try out PT Sans or Ubuntu. Want to be bold with a serif that’s not Times? Try Josefin Slab or Abril Fatface. Yes the names may sound silly, but their typefaces speak volumes. The typeface you choose speaks as much to your product/service as your imagery and content.
Maximize the minimal
Stand alone typographic design treatments used to be something relegated to print. More and more though, digital designers are incorporating typographic design approaches as the key visual. This allows designers to use text as both content and visual interest. Websites that focus on typographic solutions over visuals are also smaller in file size, requiring less band with and download time for the user. While the design may appear minimal, the resources are maximized.
Avoid the clutter
If you’ve ever worked in any kind of newspaper/publication layout, then you’re familiar with a grid layout. Web design works the same way, especially responsive design. Break out all of your typographic tools to present your content in an appealing, user-friendly way. That 1-column block of content is now 4-columns. Change the subheads to a different font-family. Allow a quote to break through 2-columns. With responsive design, CSS3 and HTML5 the options are limited only by your imagination (or CMS system lol).
Use your words
While a picture may speak a thousand words, sometimes they need real words to give context to their meeting. Good typography enhances the images around it. When viewed, it should feel like it has a symbiotic relationship with the creative around it. You never want your text to look like an after thought that’s been slapped on a photo.
With my roots in print, I’m excited to see typography take the lead in today’s interactive environment. Check out the below links for great examples of websites that are harnessing their typographic tools.
20 typographic websites | Webdesigner Depot
Best Examples of Typography in Web Design | Inspiration – Awwwards
A Journey Through Beautiful Typography In Web Design