Typography

In the Beginning

At the dawn of the internet we as users were limited in our choice of fonts. Now, of course, the font selection for web has grown and there are great options (some of them) to use as body copy and in simple designs.   

  • Times New Roman
  • Courier New
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Arial
  • Helvetica
  • Georgia
  • Comic Sans
  • Tahoma
  • Trebuchet
  • Verdana

​​And yet the demand for something new, exciting and different is ever more important. We usually have the ability to control how text appears in images, with flash, or by using other crazy methods, but these often result in much work and compatability issues. 

Thankfully, after quite a few years, the type foundries and other companies have made their typefaces available for online use. As in @font-face CSS3 declarations. When it comes to Drupal we have some great modules that have been contributed to help us with our new found fonts.

Modules

Font Your Face - https://drupal.org/project/fontyourface
Webfont Loader - https://drupal.org/project/google_webfont_loader_api
​Typekit - https://drupal.org/project/typekit
Google Fonts - https://drupal.org/project/google_fonts

Then if you really want to get particular about your typography this module looks pretty handy:
Typogrify - https://drupal.org/project/typogrify

​Find the Right Font

Typekit - http://typekit.com/
Kernest - http://kernest.com/
Webtype - http://webtype.com
Fonts.com - http://webfonts.fonts.com
Google Fonts - http://www.google.com/webfonts/
Font Squirrel - http://www.fontsquirrel.com

You may have found some great fonts, but you also need to know how to use them. Looking at inspiration from places like the Typekit gallery section is a great place to start. Here you even know that they are using the fonts from Typekit. A great article I found helps when going the free Google route can be found here. Another great way to look at how to use Google fonts paired together is to search google or pinterest. Here is an example.

 

 

 

Let's Not Get Crazy

I think it's safe to say, and we can all admit, that when something new and exciting comes out we go a bit over board with it. So the best route is to keep it simple, as any design lecturer will tell you, and stick to maybe 1 or 2 fonts on any given website. That doesn't mean that is all you can use but there are many different avenues for you to create diversity and good texture with your type without using a hundred different fonts. ie, italics, bold, etc.

The Future

Icon Fonts - Basically the ability to have icons that can scale and keep their crisp edge because they are a font. http://css-tricks.com/flat-icons-icon-fonts/
Chart Fonts - FF Chartwell gives you the ability to manually write an equation and it will convert it into a graph. https://www.scribbletone.com/typefaces/ff-chartwell