The Monstrosity Website

Posted by: Gabriel Perez | June 29th, 2010

The latest addition to my web design portfolio is a site for “The Monstrosity“, an upcoming short film akin to The Wonder Years but from a female perspective, directed by award winning filmmaker Alyssa Price.

A Better Way of Doing Fonts

In “The Monstrosity” movie website I employed the @font-face technique in order to use some cool fonts. For those not familiar with web design, there’s only a small set of standard fonts (Times, Arial, Helvetica, etc.) that are universally supported. If you try to use an exotic font, chances are most users will not be able to see it. The most common way we designers get around this is by saving text as images so everyone will see the type as it was intended. Typically this is only done for headers, titles, or navigation links because this technique comes with four major drawbacks.

1. Text saved as image files take a lot longer to load.
2. You cannot click and drag to highlight and copy the text.
3. Search engines can’t see text within and images so it is not searchable.
4. Editing is very time consuming; after all, you are modifying image files.

Until now, those drawbacks are what forced designers to use standard fonts for all body copy text. Now with the @font-face style, we don’t have to deal with any of those issues. That rocks!