This subject matter is far from new, but quality typography on the web is such an important issue that it deserves attention. There many resources and tutorials out there, but I rarely come across a top-level view of all the typography-related techniques. Therefore, I’ve compiled a roundup of the most popular methods for rendering high-quality typography on the screen.

Images

using images for custom typography doesn’t necessarily have a negative impact on a site’s performance and search engine optimization. If file size is carefully considered, and the proper alt text is used, typographic images can be a good solution. Of course, this technique should only be used for short bits of text, like page headings, pull quotes, and drop caps. I will argue that there are better options available today, but at the end of the day, images are a perfectly valid option.

Flash

The value of embedding fonts in your SWF files cannot be overlooked. Although it would be considered bad practice to utilize flash for only this purpose, if Flash is going to be used anyways, one of it’s major benefits is the cross-browser pixel perfection and ability to embed dynamic type.

Web Safe Fonts & the Font Matrix

The list of “web-safe” fonts is very limited. Normally, most web designers don’t stray too far away from Helvetica, Verdana, and Georgia. This list from 24 Ways helps expand that list to fonts that are common across many computers, operating systems, and installed software. Used correctly in font stacks, developers can target most computers that have software like Office and Creative Suite. Check out the list, you might be surprised by how many fonts are available.

sIFR

It’s worth mentioning sIFR here, although many developers have abandoned this technology in favor of Cufon, which I will talk about later. sIFR (which stands for Scalable Inman Flash Replacement) is a flash replacement technology. The philosophy here is creating the ability to bring rich typography to web pages without compromising accessibility or semantics. Additionally, one of the great advantages of sIFR was it’s fallback to plain text if Flash is not supported. Although it’s been criticized as hard to implement and somewhat buggy, this was the first real jump forward for web typography, and is still very popular to this day. sIFR laid the foundation for many great resources for custom web typography.

Cufon

The best way to describe Cufon is a next generation sIFR which is built with Javascript rather than Flash. This method has it’s benefits like not requiring the Flash plugin – good news for Apple devices. It’s also extremely easy to implement, and has very good performance, even for large amounts of text. You upload font files (with the proper licensing) through the Cufon site, and convert’s the file to SVG format. Then, the SVG file is converted to JSON which can be added to your site through simple Javascript. One downside to using Cufon is that many custom font licenses do not permit usage on web pages, so check the license or use a great free or open source typeface. There are many good ones out there.

If you’re looking for some high quality free fonts, Smashing Magazine is a great place to start your search.

Font-Face

This is by far the easiest method to integrate custom typography on the web. Using the @font-face property allows you to access fonts via CSS, and host the files on your web server. Of course, the same licensing issues remain, so make sure to chose a good typeface with no constraints. From there, you can use @font-face to access that font file for use with any CSS property. Add the font name on the top of your font stacks, and that’s it. There are a few hoops to jump through, mainly to accommodate Internet Explorer. IE requires a .eot file (Embed-able Open Type) to render custom fonts. Luckily, there are a few good online converters that will take common font files (.ttf and .oft) and convert the fonts to .eot. On a side note, I wrote a recent blog post about getting @font-face to work correctly in all major browsers.

TypeKit

TypeKit aims to take all of the hassle out of setting up @font-face, and they do a killer job at it. For as little as $25 per year, you can use fully-licensed fonts which are hosted on TypeKit. All of the licensing issues as well as the compatability woes are taken care of, and in turn you get an incredibly easy-to-use and extremely large font library at your fingertips. It’s definitely work a second look.

Google Font API & Font Directory (beta)

In the same veins as TypeKit, Google recently introduced their font API and font directory. Google hosts fonts that are licensed and ready to go, you just have to target these fonts on your site, and Google will do the rest. Their library is currently very conservative, but hopefully this will grow in the near future.

One of the services we provide here at BKWLD is producing brand new sites for our clients. One of the difficult things about a brand new site is getting the word out about it. I’m mainly a developer here, so I thought it might be a cool exercise to research more about SEO (Search Engine Optimization) and put it into practice on a new site we’ve built for our new product, Elastic.

About Elastic

Many of our clients are in the “Outdoor Sports” category. Elastic is a software tool that ties together retail dealers to the sales representatives of our clients so dealers can easily order product for their stores directly from our clients. Currently, the market consists of paper based order forms, catalogs, and phone calls for inventory checking. Some of the bigger players in the industry have their own custom software solutions for this, like Trek or Burton, but they can be a little unwieldy and they only work for the one brand. Other competitors in this space force clients to adhere to their limitations and conventions. We recognized an opportunity here, so Elastic was created.

Elastic is based on Adobe Air technology, so the software runs on the desktop (Mac or PC), but  can also run in an offline mode. We designed it this way because typically sales reps would have the software loaded up on their laptop and bring it to the dealers directly. WiFi isn’t exactly pervasive yet in these environments, so always having an Internet connection is not an option. Sales Reps also travel a lot, so not relying on the Internet directly keeps them productive on the ground or in the air. Once the sales rep reconnects their laptop to the Internet, orders are placed and inventory totals are synced.

After the break we’ll get into it!

Read the rest of this entry »

While BKWLD may be one of the most Apple/Mac centric companies I’ve worked at (only 1 guy in our Seattle office uses something other than a Mac), Microsoft has been whittling away at their next monster, Windows 7. I’ve been really impressed with how Microsoft has been handling the lead up until its release of Windows 7, namely, its free release of the Release Candidate that will work until June 2010. I decided to check it out by installing Boot Camp on my iMac at home, so I could play some good old video games on Steam.

I won’t post a full tutorial here, there are plenty a Google search away, (I ended up with the 32-bit version because of some issues with the RC on a Mac).

Windows 7’s install is much improved from Windows XP (I have never used or installed Windows Vista) it was simple, non instrusive, and smooth.

However, I got everything running great, when I rebooted back into Mac OS X, my wifi would simply not work. DHCP would simply not grab an IP address from my router no matter what I tried.

I decided that it was time to try a good ol’ Archive and Install of Mac OS X, but I was worried about the reinstall messing up all my recent work getting Boot Camp up and running. I googled for hours and could not find a definititive answer to my question, “Will Boot Camp still work after a Mac OS X Archive and Install?”

I couldn’t find any definitive answer, so I just decided to screw it all, and try it out. Reinstall worked flawlessly, my wifi was back in Mac OS X, and Windows 7 on Boot Camp still works great!

Update: You can download Windows 7 at microsoft.com.