Web Do’s And Web Fonts with @samanthatoy

Samantha Toy’s 2:00 panel “Get Stoked about Web Typography” was the second part of three panels today focused on web design, and while this is the only one I attended, it was chalk-full of ideas, inspiration, and outside-the-box thinking about one of the most exciting parts of a web designer’s job: fonts! Starting off with several examples of how we see fonts every day, she talked about translating those “wow” typography moments onto the web. Here are a few of her points:

  • Good typography is not based on what font you use, but how you use it. Using elements like size, style, color, space, and rhythm, you can make even fonts like Times New Roman come together and flow.
  • Free yourself. Don’t just look at how other sites have succeeded – get stoked! Get inspired by things that have nothing to do with web design, like snowboarding or sk8er kidz.
  • Think about the end user. What are the needs of the majority of targeted users? What is the predominant OS and browser? How much content do you have to work with? Does text need to be selectable? Questions like these will do a lot to filter which fonts you can use, and which ones you simply can’t.
  • Legibility is the difference between a MySpace page and a good site. Think about things like stroke weight and stroke variations, proportions, leading, etc.
  • Realize the difference between display type and body copy. DIY and exotic fonts can be eye-catching, interesting, and more artistic display type, but body font should be crystal clear.
  • Push the limits! Feel free to pick some crazy fonts, and find the emotion in your site. A site promoting work boots does well with strong, hard fonts. A site selling dainty shoes can have curly, interesting fonts. And Helvetica works with just about anything!
  • All fonts communicate feeling. Allow those feelings to guide your font choice instead of following the trends. What kind of shoes would fit your site? FontShop is a great site to test out how your text might look in different fonts.
  • Determine how to execute your fonts. One great way to use type is through image replacement solutions such as font stacks, sIFR, Cufon, @font-face, Font Squirrel, etc.

Besides discussing font solutions and getting her crowd pumped about the endless font choices and possibilities, she also gave some quick CSS3 properties that can take your site to the next level. She opened my eyes to the power of CSS3 code, which allows you to beautify your font and layout by creating multiple columns, text rotation, and text shadows, still allowing your text to be selectable. Samantha encouraged me to deviate from the handful of fonts that I’m used to using and to really be risky and edgy when I design. Each font tells a story and invokes specific feelings. Don’t just arbitrarily choose a font – be specific and be purposeful. But remember to have fun!

Leave a Reply