Using Modern Techniques for Great Web Typography

Great typography use is one of the most important factors in creating beautiful design. Unfortunately, at the same time web typography has been the most limiting and frustrating technology in web design and development for some time. Not too long ago, nearly every creative brief or brand conversation with clients would include the topic of which fonts we could use on their website. The answer would always lead to the depressing answer of choosing between Arial, Verdana, or a half dozen other typically supported fonts. Modern browsers and modern techniques are finally changing that.

There have been many different font replacement techniques over the years but each has had critical limitations that made them only practical for certain uses with certain designs. Image replacement using CSS looks and works great and is great for SEO but it could only be used sparingly because it requires creation of a new image and CSS changes to implement. sIFR was an ingenious workaround using Flash to replace text on the fly with beautifully rendered text, but alas it had many performance and occasional display issues and was difficult to maintain as new browser updates were released.

So, are we just stuck with Georgia headings until the end of time? Thankfully, no…

CSS3 and @font-face to the Rescue.

There are finally new tools at our disposal (and more importantly browsers that actually support them) that are helping create a more beautiful web. Newly supported CSS3 properties and some clever web services give us the ability to easily and securely embed thousands of different fonts that we were never able to use before. And using the @font-face rule these fonts are treated no differently* by the browser from the websafe fonts we’ve been using for so long.

Check out this example using CSS (rendered in your browser):

.ffexample { font-family: 'Lobster', arial, serif; text-align: center; color: #111; background: #fff; font-size: 2.2em; padding: .7em; margin: 4px 0 16px 0; }
.ffexample dfn { font-style: normal; }
.ffexample .shadow { text-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.ffexample a { color: #6eb7e4; text-decoration: underline;
-webkit-transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out; }
.ffexample a:hover { color: #DC7536; }

The quick brown fox jumps over the lazy dog.

As you can see from the example, there is a lot of power in using regular HTML text and CSS for the typography. And almost all of it works in every modern browser. The cool Lobster font is embedded from Google and then just like any other text we’re able add a link with a hover effect, a CSS3 text-shadow, and a dotted underline with a tooltip to define the word. And of course it’s as easy to change as any other text on the website using a CMS.

Continue reading → Using Modern Techniques for Great Web Typography

Internet Explorer 9 Release Candidate Now Available

Internet Explorer 9 is another step closer to full public release as Microsoft made available the first release candidate (RC) of the browser for download. Release candidates are past alpha or beta versions of software and indicate that this should be code that is close enough to bug free that it is almost ready for the general public. If no fatal bugs are discovered, the software will be released.

In addition to the obvious user interface changes and some performance boosts, IE9 will bring with it much improved CSS3 and HTML5 support. It’s nowhere near perfect, but IE9’s adoption of modern and cutting edge web standards is leaps and bounds better than Internet Explorer 8. As users ditch IE8 and adopt IE9 they’ll finally be able to enjoy many great touches and flourishes that web designers and developers can easily add thanks to CSS3.

Go download it and then take it for a test drive on some of these speed and capabilities demos.