Font Squirrel’s @font-face kit generator

If you want to create your own @font-face kits, you absolutely must check out Font Squirrel’s new @font-face generator tool. All you have to do is upload a TrueType or OpenType format font, and the generator spits out a zip file containing:

• The original typeface for Safari and Firefox 3.5
• A WOFF font for Firefox 3.6+
• An SVG font for Opera, Chrome, and iPhone
• An EOT font for Internet Explorer
• A sample HTML page
• A sample CSS stylesheet

The generator also features options to reduce file size by subsetting the font, cleanup font outlines, and auto-hint glyphs to improve rendering.

Sweet!

Typekit and the future of web fonts

Now that all major web browsers finally support the CSS @font-face declaration, embedding fonts in a web page is possible with just a few lines of CSS. In theory this means that web designers no longer need to limit their font choices to a handful of system fonts, and are free to use any typeface they please. In practice that freedom comes with a caveat: we are only allowed to use fonts with a license agreement that allows web embedding.

The trouble is that digital fonts have no provision for DRM, and pirating a copy of an embedded web font is a trivial exercise for anyone with the mind to do so. That’s obviously not a prospect type foundries are too keen on, and consequently no major foundry offers a licensing option for embedding their fonts in a web page. If you link to a commercial font from your CSS stylesheet the chances are that you are breaking your license agreement. Even the number of free fonts with an EULA that condones @font-face embedding is pitifully small.

That’s where Typekit comes into the picture. Typekit is a new font delivery service devised by Jeffrey Veen that promises to take the pain out of licensing fonts for web embedding. In their own words:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Continue reading

Scaffold: A CSS framework with a difference

I have always been slightly wary of CSS frameworks, put off by non-semantic class names, and a nagging feeling that CSS simply isn’t complex enough to require the hand-holding a framework offers.

But today I came across Scaffold, a CSS framework that made me rethink my position.

Continue reading

Aligning an element to the bottom of its container

Here is a little CSS trick that allows you to align content to the bottom of its container, in a similar fashion to how vertical-align="bottom" works in table-based layouts.

Let’s say we want to display an image with a title aligned to its top right corner, and a caption aligned to its bottom right corner:

Continue reading

IE7, first-child and HTML comments

Perhaps it is common knowledge, but until today I was unaware that the CSS first-child pseudo-class fails in IE7 when the child element is immediately preceeded by an HTML comment.

Continue reading

File download icon

I spent an hour yesterday sprucing up the ‘file download’ icon I use on one of my websites, and I’m putting my Photoshop file up here for you to use if you like. I’ve made it very easy to change the color scheme of the icon, or to modify the graphic on its label, so you’ll have no trouble adjusting it to suit your own needs.

Continue reading

CSS Advisor

CSS Advisor is a newish community website from Adobe. On CSS Advisor users can post their own CSS tips, or pose questions which other community members can attempt to answer. This question/solution format promises that CSS Advisor will remain more focused than the average forum, and provide a practical resource to call upon when faced with a sticky CSS issue. Within a few minutes on the site I discovered a potential solution to a long time CSS bugbear of mine – Safari’s ‘Wmode flicker’ when DHTML dropdown menus are displayed over a Flash movie.

Continue reading

Microsoft drop the ball with Outlook 2007

Well it looks as if Microsoft has screwed up royally with Outlook 2007, at least insofar as the way HTML emails are rendered. Instead of using the not-too-shabby Internet Explorer 7 rendering engine to display HTML emails, Microsoft opted to use a customized version of the Word 2007 rendering engine. That’s right, from now on your beautifully constructed HTML newsletters are going to be rendered by the crime against layout known as Microsoft Word. That fact alone was enough to send shivers down my spine, but when I dug a little deeper I discovered just how dire the situation really is.

Continue reading

Getting HTML newsletters right

For a long time I was wary of designing email newsletters. I had read how difficult it was to construct an HTML newsletter that displayed as intended in all the popular email clients. I had heard about the horrors of creating layouts using tables. I had been warned about the perils of using CSS. But this year I have had several clients request that I design email newsletters for them, and had no choice but to school myself in the arcane art of HTML email design.

Continue reading

Image source swapping, CSS, and Safari

Last week I was putting the finishing touches on a small website I created for a friend. Specifically, I was jazzing up the image gallery with an ‘Image loading’ animation, so that visitors knew to hang around while a new image loaded. In the process I made an interesting discovery about the way Safari (Safari 1.2 at any rate) handles javascript image source swapping.

Continue reading