HTML 5, CSS 3 and Font Replacement

As a frequenter of design based blogs I’ve been seeing a lot of posts about HTML 5.

Every few years theres an overhaul of web technologies or someone comes up with ‘the latest thing’ which will apparently exponentially improve our webby lives. So I often come at these things from an overly critical stance. Out there in the real world what’s it gonna do?

On a very basic level there are a variety of new tags which help to define and identify elements within a web page.

This is handy for a couple of reasons; you no longer have to go round defining divs and the way web elements integrate into the page will be much smoother.

So for example you’d no longer have to define a header as < div id = "header" > you’d just use the tag < header >. If you really want to know all the new tags they can be found on the design shack blog.

Another advantage of these new tags is that it helps Javascript, Flash, AJAX and other web technologies to integrate better into HTML pages. Back in 90’s most people’s internet connection couldn’t cope with streaming live video or audio however both these things are now commonplace. So the tags < video > and < audio > has been introduced.

You may have also been hearing about the < canvas > tag. Created by Apple it allows graphics to be drawn using Javascript, this giving more robust graphics since it doesn’t matter what screen size your running at. It’ll resize to compensate. In a way Canvas is related to SVG since they do similar things – drawing on the screen. You can find out more about Canvas on the Opera site.

Both Canvas and SVG rely on what goes on in the background in Illustrator, that is creating point based vector graphics by mathematics. I think this is one of the key changes in HTML for designers. It means that in the future there may be no JPG’s it’ll all be scalable vector graphics. I think it’ll be interesting to see how graphics software changes in order to cope with this new web ability.

As part of this new drawing ability CSS also now includes some new features. The functionality to create animations, its lining up to be some sort of face off between flash and CSS. Check out this CSS Animation tutorial on 24 ways.

The best new tool of CSS is probably rounded corners. Creating consistent looking round corners is generally a bit of a faff. Being able to automatically generate them is a dream come true with CSS.

Anyway the final thing you might have been hearing about is Font Replacement.

I’m not convinced that Font Replacement is such a great idea. It’s one of those things that has the potential to be incredibly annoying like GIF’s were back in the 90’s. I recently read a tutorial on how to do it and the article argued that font files are so huge that you have to ‘ease in’ the sudden change between the loading font and what your looking at on the screen.

To do this it suggested using a font stack, now font stacks are a common tool of CSS. But if your going to do a font replacement with a font that looks kinda similar – whats the point? Why not just use the web standard font anyway and not bother.

In my opinion Font Replacement isn’t worth it unless font files become smaller data packets or the internet continues to speed up (which it probably will!).

Of course all of this relies heavily on the support of browsers to be able to process HTML 5 and CSS 3 and what with IE dragging its heels who knows how long that’ll be. If your building a new site soon then it may be worth considering writing it in HTML 5 but otherwise theres no hurry just be prepared!

If your after some cool HTML 5 resources check out this list of great tutorials on speckyboy.

No related posts.

Navigate through previous posts