Adobe Creative Cloud

March 9, 2015 /Web Design /

Typography on the Web

I’ve just come back from Amsterdam where I had the chance to give a talk about Typography on the Web at FITC. This two-day festival gathers fans of interactive design, technology and ‘cool shit’. Every year, it’s an opportunity to meet with creative coders, interactive designers and developers who want to learn more about design principles. In my session, I provided an introduction to typography which I thought I would share with you too!

We are surrounded by words. Before jumping in the world of beautiful typefaces, designers need to understand the meaning of those words. They are used to freeze our thoughts and eventually share them. The role of typography is to add meaning to words by design, and sometimes to establish tone. Every day, we face the power of words and typography. If you want to transmit a friendly intent in emails you’ll add a smiley 🙂 On the other hand, if you receive AN EMAIL WRITTEN IN CAPS, YOU MIGHT THINK THAT SOMEONE IS SHOUTING AT YOU!

Graphic designers who master typography are constantly looking for the emotion hidden behind a typeface. I did a short exercise with the FITC attendees – I displayed the text ‘FITC Amsterdam’ in different typefaces to demonstrate the emotion portrayed by each:

courier

Use Courier and your conference will target writers and journalists.

futura

Use Futura, designed in 1927 by Paul Renner, and its geometric shapes will evoke a sense of technology, a space odyssey, and a lack of emotion. By the way, FITC uses this font on their website!

helvetica

Helvetica is an efficient and overused typeface. Despite being designed by a Swiss typographer, Helvetica carries a New York City attitude, and comes with a lot of references from the 80s.

gotham

Use Gotham, a slightly different sans-serif typeface, and you’ll directly jump in the 21st century.

didot

Didot, a French typeface from the 19th century, instantly throws you into the classy world of fashion.

We had a lot of fun with this exercise, as it served as an eye-opener for attendees who didn’t realize the power of typeface.

It’s important to note that typography isn’t only about choosing a typeface as reading it is a complex exercise for our brain. We discussed the importance of spacing (kerning, leading), the number of words per line, contrast, and structure.

As famous typographer Jean-François Porchez said, “The web saved typography.” Why so? In 1996, with the rise of the web, only 9 typefaces were available in browsers for web designers (including Arial, Verdana, Times new Roman, Comic Sans MS). For years, the only option to embed other fonts was Flash. I remember having seen pages where web designers just used Flash to display titles and embed a specific font. Web standards continue to evolve and now there are more than 100,000 typefaces available for web designers. For more than 10 years, web designers had to focus on structure (h1, h2…) and contrast, which is the essence of typography – now it’s a whole lot more and that’s why Jean-Francois believes that the web saved typography.

In this ocean of fonts, designers can access free or premium typefaces. Designing characters is very complex and long work. Designing a typeface with several families (from UltraThin to Black, roman to italic), all the language exceptions, ligatures, and more is a 2 to 3 year process. That’s why the license to use a typeface comes with a cost. Typekit introduced a subscription service in 2009 to access a catalog of more than 1,000 professional typefaces. It presented a unique opportunity for designers who want to use beautiful fonts that are not seen everywhere and add value to their creations. Members of Creative Cloud have a Typekit plan included in their membership. They can even use Typekit font in their desktop apps such as Photoshop CC, Dreamweaver CC or InDesign CC. That’s why I’ve shared some tricks to create a 100% web safe design workflow from Photoshop CC to the web browser. These tricks are on my blog.

If you want to learn more about typography, I encourage you to read the Typekit team’s blog.

To train your eyes and detect the emotion behind typefaces, I recommend this website on fonts in use.

Here are my slides:

Don’t hesitate to reach me @mchaize on twitter if you have any questions!

What’s your favorite font? Let me know in the comments.

Web Design

Join the discussion

  • By sinan - 3:17 PM on March 10, 2015  

    Thanks 🙂