View Slideshow [2]
My site showing @font-face, text-shadow, box-shadow and border-radius enhancements
So, Firefox 3.5 is here with a whole host of CSS3 goodness, ripe and ready to be unleashed into the eyes of the web viewing public. If you're not using the browser yet then a) Why not? Are you crazy in the coconut? And b) get it now from the Mozilla FireFox website. It's very much of a nice-nus-indeedy-poos.
To celebrate the release of - what continues to be - a thoroughly decent browser, I have added a few CSS3 enhancements that can only be seen on FF3.5 (and other equivalently up-to-date browseroos).
"Oo. Nice. So what yer done?"
OK. so:
- border-radius and box-shadow on the tabs on the right
- @font-face on various sub-headings (using the font: "Delicious Italic"), also with a hint of text-shadow
- box-shadow on my portfolio and blog article thumbnails
These "enhancements" are, of course, only viewable in Firefox3.5, and the latest versions of Safari and Opera. See the pictures above to see the differences.
If you are wondering about the font on my blog headings, they are implemented using FaceLift.
What I think about all these new CSS effects to play with and that
(-moz-)border-radius, (-moz-)box shadow and text-shadow are great visual additions to a web developer's arsenal - especially when considering all the extra images and mark-up that used to be required.
It is important to not go over the top with using them though - like a child with a new toy. Use it for the good of the design, not just because you can and it's now easy to get these effects.
Also, it's important for designs not to rely too heavily on these effects for a page to 'work', as IE6, 7 and 8 will not display them, and these browsers do (unfortunately) make up a fair number of site visitor stats (in general).
As for @font-face ...
I'm impressed with it from a conceptual value. It's too early days for me at the moment though.
The reasons I'm not overly excited, and, therefore, not overly keen on using it on client work, are:
- Fonts you can currently choose without licences are limited
- Rendering between browsers that support @font-face is too varied for my liking (fonts appear bold and quite jagged on the latest version of Safari (PC), but quite light and elegant in Firefox 3.5 (PC))
- Font sizes vary, meaning fallback fonts may appear far too big / small on browsers that don't support @font-face. This isn't a problem for IE, as we can target the browser with specific CSS, but with modern browsers such as Chrome, which doesn't support @font-face (as of this being written), and also can't be specifically targeted, we end up with a fall-back font that doesn't look right in terms of size etc.
Also, you have to ask yourself the question:
Would you want to use this font if @font-face was universally supported across all browsers, and you had a choice of many more fonts?
As a designer, you probably wouldn't. Again, it's difficult not to fall into the trap of using this because you "can" and because it's "new", when really it should be because it's a font that is better for the design.
As mentioned earlier, I'm using "Delicious Italic" on my headings, but only because:
- It's the nicest @font-face license-free Sans font (imo) available at the moment
- It renders the smoothest in FF3.5 compared to other fonts I tried out
- I wanted to give this "@font-face" lark a go :P
It may be that I return back to "Arial" for my sub-headings font because it's probably the best choice from a design perspective, and also all things considered above. Perhaps when TypeKit is fully launched, and more fonts become available, this will give me more food for thought.
In terms of how fonts render in different @font-face supporting browsers ...
There have been arguments that 'sites shouldn't look the same in every browser', so it is OK for fonts to render differently in different browsers.
Well, yes - but I tend to interpret that rule for degradation purposes only. I don't want browsers I consider to be as modern as another displaying @font-face type differently. I'm too fussy about my type to think this is OK, and I also think type is now far too important in terms of modern web design - good typographical considerations can be the difference between a design that works, and one that doesn't.
So, with this in mind, I can only see myself embracing @font-face when the difference in the rendering is marginal (on, say, a level with current system font rendering differences).
It is only early days. The signs are very good. I am excited, and I can't wait to get more and more acquainted with further CSS3 goodness :)
COMMENTS
The font question is a biggie for me, but not one limited to @font-face per-se. The trouble is the way fonts are implemented in CSS at all. There is no provision whatsoever for treating font families in groups, and no understanding that properties like letter-spacing, line-height, font-size etc are dependent on the font in use, not just absolutes.
It seems no one at the CSS WG ever asked a typographer of the implications of a browser having to use a fall-back font rather than the preferred font. Subsequently no one realized that font-size:12px appears to be smaller when rendered with Calibri than it does with Verdana, and that itself is a problem. Engineers doing their own thing without asking a designer. Again.
Font handling in CSS needs an overhaul. It's not getting quite the overhaul it needs, though @font-face is certainly very nice.
Yes, spot on. An 'entire' fall-back is what's needed at this stage - font, size, style, line-height. I even think colour should be thrown in there also.
font { normal 18px/22px "Delicious" #333; }
font:fallback { bold 20px/24px Arial #000; }
Something like that perhaps? ...
A couple of things are vaguely addressed in CSS3, for example there's the font-size-adjust property (http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro), which should address the "Calibri looks smaller than Verdana at the same size" issue. But, as ever, it's a hack of a solution that doesn't really solve the issue, doesn't make much sense, but rather slaps a band-aid over a small part of a larger issue and calls it done.
In this particular instance, wouldn't it be a lot simpler, and far more direct to a typographers knowledge, if it was simply sizing the x-height directly e.g.,
font-size: x-height 12px;
Instead of going through math hoops of calculating scaling factors. We are not all engineers, and frankly hacky solutions like this devalue CSS as a whole. CSS should speak the grammar of a designer, not an engineer.
Just to update anyone who happens upon this article: some useful links regarding @font-face services:
http://blog.typekit.com/
http://www.typotheque.com/site/index.php
http://fontdeck.com/index.php
and a decent article about them:
http://ilovetypography.com/2009/08/07/the-font-as-service/
All rather interesting stuff :)
Thanks for the post, its definitely an interesting and intriguing development and I look forward to the possibilities of putting some of these CSS3 features to use.
By the way I really like the overall design of this site.