NOTE: This article was originally intended to be included in Fluid Web Typography, but was cut at the last minute due to new technologies that rendered the technique being described all but irrelevant. It is presented here for anyone who needs to do things the hard way.

Internet Explorer has had the ability to download font files since version 4. The only catch is that, rather than allowing the download of standard font file types (OpenType and TrueType), Internet Explorer only allows the use of the little known and—until a few years ago—proprietary Embedded Open Type (EOT) format. The EOT format adds certain protections to the font file, in theory preventing it from being stolen by the end user or by being used across different domains.

WEFT

Until recently, the only method for creating the EOT was to convert TrueType fonts (not OpenType) files was using The WEFT application, created by Microsoft in the late 1990’s and not updated in almost 10 years. Recently, FontSquirrel began providing a service allowing you to convert both OpenType and TrueType font files to EOT font files—as well as SVG and WOFF font files—rendering WEFT conversion obsolete. However, if you need to do things the hard way, here are instructions for using Microsoft WEFT.

1. Get WEFT
   You can download it from microsoft.com/typography/WEFT.mspx, then install it in a Windows environment.
2. Create an EOT font file with the WEFT wizard
   After starting WEFT, Click the “Wizard” button and then click “Next”, carefully ignoring the instructions provided on this screen.
   • Enter your name and E-mail and click “Next.”
   • Enter your root web address (e.g. www.brighteyemedia.com), making sure that http:// is selected, and click “add”.
   • After WEFT checks for the domain, click “Next.”
   • Choose “Skip analysis” then click “Next”. This is important as analysis will cause WEFT to hang.
   • Under Subsetting choose “No subsetting” and click “Add…” Although in theory, subsetting would be nice, choosing any option other than no subsetting causes WEFT to hang. A green circle with a check next to the font indicates that it is ok to go. A red circle with and x indicates that the font is unsuitable.
   • Select the font to be created and click “OK.”
   • For location change http:// to file://, click “…”, and select the location where you want to save the .eot font file.
   • Add all of the roots you need to the List. Choose “Create font declarations with relative URLs” and “Show CSS.” Leave “Skip web font creation” unchecked. Click “Next.”
   • WEFT will process the font, saving the .eot file on your computer where specified. When this process is finished, check “Do not upload modified pages to my server.” and click “Finish.”
3. Upload the EOT file to your server
   Upload the .eot file to your server where you can reference it in your CSS. I recommend putting it in a folder called “font”.
4. Tweak your @font-face code to accommodate the EOT source
   In order to have the OET and OTF or TTF files play nicely together and load for the correct browser, you will need to slightly modify your @font-face declaration, setting the source of the EOT file for Internet Explorer (ignored by other browsers) and then hiding the other font file behind local font file declarations, which causes Internet Explorer to ignore that entire line of code:

@font-face {
font-family: display;
src: url('fonts/Fontin_Sans_B_45b. eot');
local('Fontin Sans Bold'), local('FontinSans-Bold'),
url('fonts/Fontin_Sans_B_45b. otf') format('opentype');
}

Tags: CSS, Typography by jason
2 Comments »

Q:What is the practical difference between px (pixel) and em (pronounced m)? When is it best to use one over the other?

The short answer is that pixels measure dimensions relative to the screen while ems measure dimensions relative to type size.

The slightly longer answer is that pixels are the natural unit for measuring dimensions on a screen and are often used when precise deign is required. Ems are the natural unit for measuring type and used when you want to allow maximum design flexibility.

The carpenter’s adage goes “measure twice, cut once,” but carpenters deal with the physical universe where a board always stays the same length once it has been put into place. Many designers want to define with exact precision the placement and size of elements, similar to the way they might design for print or video. Those medium are static, even video, which might move and be projected on to larger screens, but the aspect ratio does not change so everything is scaled relatively. However, on the Web, you are dealing with a variable canvas, with its final size dependent on the whims of the viewer.

Read the Full Article on Peachpit.com »

Tags: CSS, Typography, Web Design by jason
No Comments »

Q: Which global reset for CSS should I use?

The short answer is the simplest one possible.

The slightly longer answer is that you should reset some styles, but do so with a good reason.

The long answer is that the exact CSS reset you choose will depend on the needs of your design. I like to keep my own reset simple, relying on adding styles to specific tags as needed. However there are several styles that are inconsistent or (in my opinion) poorly set in most browsers that need to be corrected.

The argument for redefining important CSS properties (generally to none or 0) are straight forward:

• Reduces bad styles: Undoes some of the questionable and downright annoying styles added by browser manufacturers as well as the styles that simply do not work. One that comes springs to mind is using an outline to highlight items that are in focus such as form fields. While highlighting is useful for keyboard navigation, you should design this yourself.
• Eliminates design by default: Sets a level playing field from which to begin a design. Rather than allowing the browser manufacturers dictate how your pages look, you are now in control.
• Browser style consistency: Ensures values across all browser types and versions are the same. Since browsers vary their default style values slightly, a good reset will allow your designs to appear with greater consistency, regardless of how your visitor is viewing it.

There are also several counter arguments to be made against a global reset, although I find their logic to be mostly flawed…

Read the Rest on Peachpit.com »

Tags: CSS, Web Development by jason
No Comments »

CONTEST IS OVER. Winners »

Fluid Web Typography is finished, it’s my favorite holiday, and I feel like giving something away. This is the first time in forever that I’m really going to get to sit back and enjoy Halloween without some meta project hanging over my head.

3 Copies of Speaking In Styles to Giveaway!

To celebrate the publication of Fluid Web Typography, I have 3 copies to give away of my last book, Speaking In Styles.

To enter:

1. If you are not already doing so, follow @jasonspeaking on twitter.
2. Tweet a link to this page and include #SISContest02. For example: “Get a treat, learn some CSS tricks: 3 copies of Speaking in Styles to giveaway #SISContest02″.
3. Be either the first, fifth or thirteenth person to send a tweet I will send you a copy of Speaking In Styles. It’s that easy.

I’ll periodically check the key word #SISContest02 to find the winners.

About Fluid Web Typography

The only comprehensive guide to modern web typography.
Are you tired of using the same old fonts in your Web designs?The type you use can say as much about your message as the actual words on the page. Until now, Web designers have had a limited palette of typefaces to choose from—essentially Arial (yawn), Times (yawn), and Georgia (yawwwwwn).
Design is about overcoming the limitations of a medium—the challenges of Web design and typography are no different.With Web typography undergoing massive changes, are youready for the new technologies and techniques that areavailable?In this book, Jason guides you through the latestdevelopments in Web typography, including:

• Web safe fonts, downloadable fonts, and new Web fontservices that will expand your font repertoire and providea vast catalog of untapped typefaces
• Practical methods for achieving quality typography withcurrent technologies
• Best practices for creating engaging designs usingtypographic style principals developed specifically forthe Web

Fluid Web Typography will be available online and in book stores December 2009.

Tags: CSS, Typography by jason
1 Comment »