View Slideshow [2]
My site showing @font-face, text-shadow, box-shadow and border-radius enhancements
[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 :)
SAY STUFF