With HTML5 & CSS3 constantly peeping round the corner (iPad sites, HTML5 article) we need to prep ourselves to deliver client’s rich websites to the highest standards. There’s a lot of changes going on and during the transitional period we’re updating our CSS font-techniques at Thought Den.

The industry
The font industry is apparently in a bit of turmoil for both designers and producers. The Font-designers are trying to hold onto their previous/old/out-dated/”wake-up and get with the times” print-based payment model. While the web-based font factories are trying to break it the business open into a mass/does it make profit/lowering standards/can it make money iTunes micro-payment model.
Then, the producers (us in the Den!) are trying to deliver our clients (you!) (or “you!” soon, after you’ve contacted us) a sexy web-package that will work across the most browsers and by using a technique that will last longer than a flash-in-the-pan 5 minutes.

What did we find?
There are currently many articles to help guide and inform the decision, namely from the popular web standards site, a list apart. This article in particular, “Web Fonts at the crossing” has helped round up the current full technical details,
- HTML5 & CSS aren’t fully supported everywhere yet
- IE6 to IE8 can only support a particular type of font extension
- Firefox, Chrome & Safari are pushing the boundaries
- IE9, it sounds like Miccy-soft have made an Internet Explorer browser half decent!

Thought Den will… (client round-up)
… be using the new tools/bold technology for making sure your site and its fonts are viewable across as many browsers as possible so it’s readable on many devices as possible.

Thought Den will… (techie round-up)
… be using the @font-family tag with,

Google Code (for hosted fonts)
- http://code.google.com/webfonts

Embedded Fonts (for creating fonts)
- http://www.fontsquirrel.com/

Restricted Fonts (for expensive fonts)
- http://cufon.shoqolate.com/generate/

Onwards!

For quite a while now we’ve all been struggling with browsers returning (by default) fonts that ‘should’ be the same size across the board.

Obviously, when we design with a font-size of 12px, we need it to be 12px!

IE makes its margins and padding different from Firefox’s, Opera’s and Safari’s, meaning that certain graphical elements appear un-matched when we do our testing on various platforms.
Luckily Yahoo Developer Network has come up with an answer that must have taken them a while to figure.

“Yahoo Fonts CSS“ is a clever bit code that tells all the A-Grade browsers to display the fonts the same size and when coupled with “Yahoo Reset CSS” will reset all the XHTML elements to display the same.

That’s saved a bit of time!