Wednesday, September 29, 2010

Typeography on the Web

Why is it so hard?
You open up Microsoft Word or fire up Adobe Photoshop and there are hundreds of fonts available to chose from. Why are there so few choices on the web? Well fonts are rendered in the browser so the end user has to have the font installed on their system for the browser to know how to render and display the font. System font differ from computer to computer. Some people might have a font installed because they purchased a software that loaded the font on their computer while some one else might not have the font. So the challenge is how do we get the fonts and all of the images and algorithms that make up a font transferred to the client? It is easy enough to transfer some files from server to client but the problem is the fonts are copyright protected and we can not just send the font files all over.


Old Hacks


There are a couple of ways people got around the limited number of web fonts available. One, they could right scripts that detected what OS and browser a client was using and then set a specific font for that environment. This still works but it does not give the developer complete control over how the site looks. One font might render slightly differently on a Mac versus a PC.
Another option was to create images of the text in Photoshop or another image editor. The developer would be able to use any font that they had on their system and they would not have to worry about where the client had that font installed. This works well and is great for design but is horrible for accessibility, usibility, and updatability of the site. Screeen readers can not read images, the text can not be copied, and it takes twice as much work to update a web page if the developer has to recreate an image every time they want to change a word.

New techniques


There are several easier was to use cool new web fonts on the web today. These solutions are not perfect but there are a lot of smart people working to make this a universal standard that will work for any browser on any platform. Even though @font-face has been around since CSS2 it is making stride in CSS3. With CSS3 @font-face, which allows the browser to download the appropriate font from the web server, can now use the .tff and .otf font standards. The problem is that most of the fonts that have been made for this format are not licensed for web use. Remember fonts take hundreds of hours of labor to make sure they look good in any platform at and size and at any resolution.
Google also has a service called Font Directory that allows you to embed a link to fonts hosted on Google servers so that the client does not have to download anything special. http://code.google.com/webfonts
There is also a cool project called TypeFace that uses JavaScript to render text. This does not work in all browsers but it is a cool open source project that aims to tackle this issue. http://typeface.neocracy.org/

Tuesday, September 7, 2010

Web Standards

Why are web standards important?
Standards allow a programmer to learn one set of APIs that will work in any standards compliant browser. This means they can program a website once and it will work in any browser. Today all of the browsers are not 100% compliant but they are getting closer. Most of the new browsers already support the new HTML 5 spec. HTML 5 and CSS3 are expected to be ratified later this year. This new standard brings with it many new features that will make it even easier for developers to create dynamic, great looking websites. Even Microsoft is going to support most of the new features with IE 9.

Visit this site to see how your browser scores with HTML 5 http://html5test.com/

History
When the web was first invented there was no official standards body. It was like the wild west in the browser market. Each browser maker would add their own new features without even thinking about sharing the specs with their competitors. You might be thinking that all this competition and new features is great for consumers. Well in most markets that is true but in this case the browser is not really the end product - the websites are and all the disparate features makes creating the websites almost impossible. A developer would have to keep learning all of the special features for each browser and how to program for each browser. This takes way too much time and money and it was stagnating the web. We finally got web standards with version 2.0 of HTML in 1995 thanks to the efforts of Tim Berners-Lee and the HTML Working Group . It wasn't until 1997 that HTML 3.2 was released by the W3C. This is considered by many to be the first true standards spec.