AndreasHTML5 training
New possibilities from a design perspective
HTML5/CSS3 offers a lot of exciting new possibilities for a richer and more diverse screen design. In the presentation, I will show new CSS3 effects including what is possible now and what will be possible in the close future.
I will focus my presentation on HTML5/CSS3 features which are most exciting from a designer's perspective.
For example, one of the most exciting HTML5/CSS3 features is "@font-face".
@font-face makes it possible for a webpage to display any font, freeing designers from dependence on the ‘web-safe’ fonts. This opens new design possibilities and enables the creation of visual identities which are consistent across both print and web media.
While it opens new possibilities, it also raises new issues, including poor screen display of non-hinted fonts. The problem is that most fonts are not designed primarily for the 72–96 dpi resolution of computer screens, but for the much higher 1,200+ dpi resolution of print media. Most type-foundries are aware of this issue and currently hint their fonts for a crisp rendering on the screen.
I will open with a brief overview of font-rendering-techniques on different platforms and browsers.
Grid-Fitting — 1bit, Grey-scale rendering 4-bit or 8-bit, ClearType, DirectWrite and Mac OS Quartz.
We currently use cufon, a rendering technique, when displaying non standard web fonts. We like it as it allows us to integrate visual identities and make the pages more characteristic. The down sides are that it is not resizable, not editable and not easily copied.
The inclusion of real fonts via
- @font-face — http://www.css3.info/preview/web-fonts-with-font-face/
- Typekit — http://typekit.com/gallery
- Typotheque Web Font Service — http://www.typotheque.com/webfonts
- Google Type Directory — http://code.google.com/webfonts
solve these problems and therefore seem to be a great step ahead.
The different services will be reviewed and presented with practical examples showing
implementation, payment models and qualities of libraries.
I will show how to optimize the inclusion of fonts with the new techniques and how to minimize the loading effects called FOUT (Flash of unstyled content)
For non western typefaces, which are not easy to include to a website now this approach sounds very promising as well. Typekit is working on it while there will soon be a typekit inspired service for arab fonts called: http://tiba3a.com/
(btw The problem of right to left flow you can solve like this:
http://fortysevenmedia.com/blog/archives/styling_right-to-left_text_with_css_on_a_multi-lingual_site/ )
I´m looking forward to this presentation and hope it will inspire you to try these new possibilities.
Reacties
Michel
Arden
Michael
Jeana