Behind the Geek Out Scenes: Fancy Fonts and Jaunty Input Fields

After launching Geek Out, we thought it might be interesting to show how we built some of the prettier effects that made up the page.

The two CSS effects used were @font-face and transform: rotate. With these two CSS styles, you can make some very nifty forms.

@font-face is one of those little gems that has been missed by a lot of designers. Support for it was introduced in Internet Explorer 5, Firefox 3.5, Safari 3.1, Opera 10, Chrome 4, and it’s part of the CSS2 spec. The difficulty, however, is font format support. Internet Explorer will only support EOT (Embedded OpenType) files, while Mozilla, Safari, Opera and Chrome will happily accept a TTF (TypeType) font.

Browser EOT TTF OTF SVG WOFF
Internet Explorer X X (IE9)
Mozilla Browsers X X X
Safari X X X
Opera X X X
Chrome X X X

As you can see in the table, support is spread across the four formats, but you can safely address almost all the browsers viewing your site by using an EOT and a TTF. The easiest way to cater to all your users is to use Paul Irish’s Bulletproof @font-face syntax. It relies on your including the differing file formats in a specific order, so that all the browsers will only use the first format they can.

@font-face can be implemented as shown below, and has a few moving parts. The font-family declaration lets you name the font, so you can set elements to use it later. All of the src: url() declarations are paths to the font files. It isn’t necessary to have all the file formats, but if you have them, you may as well use them. That way, they cover the largest possible share of the browsers and provide better options (WOFF, for example, is a compressed, lossless format, so the file sizes are smaller, but retain the same level of quality as TTF/OTF format files). Paul Irish has a nice trick: naming the main set of files means you won’t ever accidentally use a local copy of a file (that is, one stored on the user’s computer), so you know your page will use the font you want.

@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
  url("GraublauWeb.woff") format("woff"),
  url("GraublauWeb.otf") format("opentype"),
  url("GraublauWeb.svg#grablau") format("svg");
}

/* Now you can use the font on any element you like. */
h1 {
  font-family: 'Graublau Web';
}

Finally, there are some great ways to get free fonts to use. Google Font Directory offers a small list of free fonts (we used the Lobster font from here), as well as FontSquirrel’s Font Kits.

The second CSS effect is the transform: rotate style. Support for transform: rotate is provided in Webkit, in Firefox 3.5 and up, and in Opera version 10.5 and up. Like most of the new CSS3 styles, they use a browser specific naming convention.

-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg)

Internet Explorer has a rudimentary implementation using filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); where 0, 1, 2, and 3 will rotate the applied element 0 degrees, 90 degrees, 180 degrees, or 270 degrees respectively.

So, if you’re rotating something in those four directions, you can use all four CSS styles to cover all browsers, and the code would look like this:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg)

If, as we did with the Geek Out page, we want to rotate the form in an arbitrary direction (in our case, -13 degrees), Internet Explorer will just have to sit this one out. IE will display it normally (no rotation applied), while the other browsers will play along and rotate nicely. To read more about this, have a look at Jonathon Snook’s article Text Rotation with CSS.

I hope this has been helpful! It’s a bit of fun to play around with making forms interesting again, don’t you think?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tyssendesign.com.au Tyssen

    Speaking of CSS3, the rounded corners/border on the header of your font format table don’t look quite right in FF 3.6 on Windows.

  • http://www.apcooper.co.uk AndrewCooper

    Yet another brilliant article, Mark! :)

    The table you included was very interesting and enlightening! Silly Internet Explorer, eh! Hopefully we’ll end up with all five of the main Web browsers supporting the WOFF format someday (soon!) so we can have ourselves a nice little Web font format standard. What do you think about that, Mark?

    It’s even more interesting and nice to see an article that is in a little way like a case study that is focused on a project at SitePoint HQ. Can we expect to be reading more case study like articles that will go through how a SP employee did such and such a thing?

    • Mark Cipolla

      Thanks!

      WOFF is a fair improvement over the other formats as you can really reduce your bandwidth overheads because of compression…

      Getting all the browsers to play nice and use the one format, however, is a slow and arduous process (and even then, support for just one format is years away at best, as people on older browsers would need differing formats).

      I do foresee the SitePoint crew doing more case study posts… it’s great to learn a new technique, but even better when you can also see it in action.

  • Gilles

    Great writeup, now if we only could ‘enforce’ smoothing on larger font-sizes, it wouldn’t look so damn ugly and it would be actually usefull also for headers.

  • Pablo Impallari

    Nice to see my Lobster font in use!
    Congrats

    • Mark Cipolla

      Thankyou for such a wonderful font!

      • simonJae

        I agree Mark, congrats Pablo, a really nice implementation

  • http://www.brothercake.com/ brothercake

    At the risk of throwing a world of pain your way — arbitrary rotation is fairly trivial to implement with IE’s Matrix filter.

    The MSDN library demonstrates a simple JS function for applying a rotation with it, and from that you can see how implementing different angles is simply a case of working out the matrix values using common trigonometric functions — http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

    If you need more convincing, check out these transition animations — http://www.brothercake.com/site/resources/scripts/transitions2beta/ — rotate, skew, scale; it’s all there, and it all works in IE!

    But what I recommend you check-out is the awesome cssSandpaper library, which abstracts all this into a set of “-sand” vendor CSS properties — http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

    Or if you just want your example fixing for IE, here it is :-)

    -o-transform:rotate(13deg);
    -moz-transform:rotate(13deg);
    -webkit-transform:rotate(13deg);
    filter:progid:DXImageTransform.Microsoft.Matrix(
       M11=0.9743700647852352,
       M12=-0.224951054343865,
       M21=0.224951054343865,
       M22=0.9743700647852352,
       SizingMethod="auto expand"
       );

  • Anonymous

    Thanks for the Article, it helps.

  • simonJae

    The all time winner here is MONOTYPE (the holder of the original GILL type library) that has just released over 800 typefaces.
    It is amazing and must be considered now the leading font provider on the web.
    Their implementation is ‘drop dead’ simple; and their library far surpasses anything out there at the moment (includes Linotype)

    Simon

  • simonJae

    oh… their website – take a minute and check it out – http://www.Fonts.com

  • steve

    The Monotype fonts.com web fonts site is
    http://webfonts.fonts.com
    There are currently 7701 fonts, including many languages