I haven’t had too many posts about Web Design and Development so I thought I’d get back into it. Any web designer knows that when using Photoshop or other image editing software to make a Web Design, the actual transition from Design -> Finished Website is most often not 100% exactly as promised/intended. I researched and purchased a 1 year license of Typekit to see how it goes, tickle my curiousity. I can say now that this site currently uses Typekit as it stands, and I’m lovin it.
At the basic level, when a Designer makes a design they have to have content in their design. You can have the actual content you’re going to use or use content generators like lorem ipsum. And then you have your images, banners, headers, links, and all the other glorious elements that make a website. The thing that most people don’t realize is that the actual fonts that are supported on computers is minimal. Fonts are a big mess in terms of design. It’s not like opening up Microsoft Word and just selecting a font for your own viewing pleasure. A website is meant to be seen by as many people as possible, which means is has to be universal to all. Most of the time the users computer doesn’t have the font you used in your design, in which the computer will have to default to a backup font in the “font stack”, which is basically a list of backup fonts in case the primary font is not available on the client computer. To see a list of fonts you can use, check out Typetester. As both a designer and a developer, this always frustrates me because the actual “safe list” between PC and Mac’s is really tiny and highly limits my designs, and frustrates me during development.
So what can a designer/developer do? You can keep in mind the safe list of fonts and design around that. Or you can design using all the fonts you want, and then when it comes time to actual website deployment you can just tell your client, “it’s just the way it is, I’m sorry”. I take the route of keeping fonts in mind when I design to allow for a smooth transition. Along with that, I am an honest man in my work so I always warn the client beforehand that the text never rendered perfectly 100% (Photoshop likes to use a lil anti-aliasing with text). One of my best traits is being able to make the actual deployed site look identical to the design. The thing is though, I’ve had enough in designing while being constrained by a tiny font list, I want more! (and by more I mean I want selectable, renderable text, not image replacements where text should be!)
In case you haven’t noticed, this post is about Typekit, so let me get back to it. Typekit first of all is used by developers, not designers. The thing that drew me to typekit is that it allows developers to easily integrate non-safe fonts in their websites. That means I can take a design that uses Myriad Pro font for example, and use that actual font on the website. There are many other ways to do this, such as including a reference to the font in the code hoping the user has it installed on their computer, or using newer CSS3 techniques, using Cufon, etc… but Typekit made it pretty easy for me. It has a font viewer and all that jazz which I really like, and the actual font list is huge so I know I have more than enough fonts for the job. I always wanted to use Museo Sans on my website, but I’m almost positive you don’t have Museo Sans on your computer, so when you view my site on your computer it’ll render back down to Helvetica or the generic sans-serif type. With typekit, I CAN use Museo Sans without doing any heavy lifting (yay!) and you can see it on your computer, even if you don’t have it.
The only drawbacks so far with typekit is that 1) it’s $50 for a year and 2) it adds a little bit of weight to the website, in average I’d say from 50-150kb, depending on how big your font kit is (if you get typekit, you’ll know what I’m talking about).
I’m very excited about this for both my design side of things and my developing side of things. For the design side, I can design with fonts that I want to and not be restrained (for the most part) by fonts. For the developer side, I can include fonts using typekit and have them deal with the font stacks and font default lists. I can worry about developing and not about fonts, which is a great thing.
On a side note to the non designer/developer type of people, there are MANY things that we do to provide you with a quality website. We have to worry about multiple browsers (Internet Exploder, Firefox, Chrome, Safari, Opera, etc…), browser versions (7.0, 8.0, 9.0,…), devices (iPhone, BB, Android), fonts, and a whole slew of other things. My rant is based on fonts, and fonts in regards to being displayed on screen. I have another problem with Photoshop not being allowed to render fonts like a browser does, but that’s another rant in itself. Just know that we have to go through many loops to give you the website that you see in front of you.
Back to Typekit, if you it out, visit their website at www.typekit.com