DAT204: breaking the Web Core Fonts mould with HTML5

Today, I delivered a demonstration of the advanced typography features in the HTML5 platform. Before the advent of the HTML5 platform, web designers are limited to a selection of fonts which are available on the client's computer, or using images for header banners and text content, which can be very labourious for both the browser and the internet connection to handle.

Even though with the advent of faster broadband internet connectivity, it is a lot faster to load them as actual text rather than images, but even with that, there is little that can be done when your range of typefaces are severely limited as not every computer would have them installed, and Web Core Fonts were designed to provide a standard range of fonts for all platforms that are installed by default. With HTML5, it broadens the range of fonts you can use on a web page, and most of all, they are accessible via the server side, so the only requirement would be for the browser to support the font-face rule of CSS3 (as well as obviously, HTML5) and for the font to be placed in the web page's root directory, saving the need to install a font on the client's computer, and for the use of the rather limited Web Core Fonts.

Although font-face has existed since CSS2, it hasn't really been promoted as a feature until CSS3, when it addressed the initial problems regarding the need to use a proprietary format rather than the more widespread .ttf and .otf formats.

In addition, there are much more possibilities that are contained within the whole platform, and this includes varying the CSS from a HTML5 form and using semantics to define the attributes and properties, as well as many other graphical features to name, but a few.

The example I used for the demonstration is Apple's HTML5 showcase: http://www.apple.com/html5/showcase/typography/ (requires Safari, as it uses Apple's interpretation of HTML5, although the whole platform is a draft at the moment. It may change as soon as Gecko and other browsers increase support). Another good example of HTML5 typography is at: http://www.html5rocks.com/en/tutorials/canvas/texteffects/, which also, conveniently, explains the graphical capabilities of typography in <canvas>, which will be touched upon in Term 2.