Playing with Technology

I’ve continued to play with @font-face and have decided that while Typekit is a nice service; it is not worth paying for unless I am getting access to Adobe’s Library or Linotype’s Library. There are a lot of nice fonts on the service but I discovered Font Squirrel which has a number of the same fonts as Typekit and actually has substantially more than the Free membership option of Typekit. All of the fonts in the @font-face section of Font Squirrel are free, but they do warn that you will need to check the license yourself to make sure you can put the fonts on the Web. You will also need to edit your CSS stylesheet to add the fonts you plan on using and generate .eot versions of the fonts if they don’t have them. (Font Squirrel kindly has created a kit which makes all of this easy.) Once that is done you can upload them to your website or blog. I created a font directory in my blog’s theme folder and put the fonts in there. Doing so means you’ll reference the fonts with url(fonts/fontfilename); in your stylesheet. As a result of this I’m now using MgOpen Moderna (Helvetica inspired) for most headings and MgOpen Cosmetica (Optima inspired) for the body. This should be working for Opera, Firefox, Safari, and IE 8 (I generated the .eot files myself).

While playing with @font-face I’ve also looked at some other CSS 3 commands to try out on the site. Currently I’m making use of the rgba command and border-radius command to style block quotes. I did try the -moz-column-count: 2; -webkit-column-count: 2; commands to make post content two-column, but it doesn’t work so well with video. I’m thinking what one would do is make the post content two-column and then have a postfooter that spanned the entire div. So a post would have a containing div with a content div (with column styling) and footer div inside it. You could then use a plugin or custom fields to place the video in the footer. More experimentation is required. I encourage everyone to start to experimenting with CSS 3 and see what it can do.

I haven’t felt like making the time to post in a while. Honestly, I haven’t had much time either. Today, however, is a new day. At 1:31 PM I received an e-mail from support@typekit.com. The e-mail informed me that Typekit was ready for people to start using their service. I’m pretty sure I wrote about this earlier but I’ll have to find that post. So I immediately stopped screwing with the WPMU test instance I was working on and headed over to signup.

If you’re not aware there is a new feature in CSS3 called @font-face. This feature is intended to address one of the major issues of publishing on the Web: not all readers have the fonts you used in the design! For graphic artists, publishers and typography nuts (such as myself) this has been a real issue. We develop a fantastic layout and design with fonts that make the entire piece or site look gorgeous, only to see it on a friends computer displayed in Arial, Georgia, or Trebuchet. @font-face and the Typekit service are here pull us out of this Dark Age of Web typography.

So how does it all work? You can see Web fonts with @font-face for a more detailed explanation, but the gist is that you host your fonts on the Web and then access them as you would any other Web file. It sounds great and if you take a .otf file and put it in a Web accessible directory then you’ll be able to use it with @font-face. Sounds great doesn’t it? So why do we need Typekit? Well, fonts are software. I know it sounds crazy but in terms of the licensing of their use they are treated like software. This means that you are allowed to have a copy on your computer and to use it to produce documents, but you cannot freely distribute it. This is exactly what you would be doing if you put that .otf file in a public Web directory.

Typekit has developed a solution which a number of font foundries seem to think is a good solution. Typekit’s solution is to host the fonts on their servers and require you to use some javascript to be able to access the fonts in your sites. They have arranged their offerings into 4 packages: Trial, Personal, Portfolio, and Corporate. Prices range from free to $49.99/month. A free account will entitle you to 5GB of bandwidth per month, two fonts from the 62 in the Trial Library to be used on one website, and you will have to display the Typekit badge (as you see in the bottom right of the site). Other plans increase the bandwidth, number of fonts you can use, number of fonts to choose from, and allow you to opt out of displaying the badge.

Once you join you’re asked to provide a website where you would like to use the service. Once you supply a URI and advance, you’ll be presented with some javascript to copy and put in the head of the pages using the fonts. After pasting the code into your webpages you can return to the Tyepekit site and select the fonts you would like to use. You can do so by browsing the appropriate library for your plan and then clicking the ADD button next to the font. Doing so will try to open a Popup window (Firefox complained and I had to allow an exception). At this point you will find directions on how to use the fonts on your site and you’ll be able to disable weights and styles that will not be used in your design so that the payload of the javascript is as small as possible. When you are finished here just click on the Publish button to make the fonts available to your site.

Overall I was very pleased with the way the service operated and the fonts that were available. I didn’t see any Adobe or Linotype designs in the Trial Library, but there were plenty of good fonts. Hopefully Typekit can get the traction necessary to attract larger foundries to use the service. I so want to use my beloved Helvetica and Myriad Pro. For now I’ll go with Liberation Sans for headings and such and M +1c Garogier Liberation Sans for the body text. If you are browsing in the most recent versions of Internet Explorer, Firefox, Opera or Safari then you should be seeing the site with my Typekit fonts. I’d encourage everyone that has a blog or website to check them out.