Typography Archives

HyperType

Posted at 9:07 PM

A portion of a talk I gave throughout much of last year had a little bit on typography, and quoted an article from October 2006, Web Design is 95% Typography (the percentage could be a little exaggerated, but the concept is solid):

During the Italian renaissance the typographer had one font to work with, and yet this period produced some of the most beautiful typographical work.

A perfect present-day example of working with one font + CSS to manipulate that to convey meaning and interest is the current one-pager for the Seed Conference in Chicago this June. Beautiful work. One font. All hypertext.

Oh, and it looks to be a great conference, too.

Update: several people have pointed me to the impressively re-worked em-based version of the Seed design by Phineas X. Jones. When using ems instead of pixels, resizing text will keep all that lovely type work intact. Nice work.

Decision or Bug?

Posted at 10:58 AM

I just logged a bug report after doing a little testing with the IE8 Beta. Overall, the progress and standards commitment in the latest effort is fantastic and exciting. Hats off to the Internet Explorer Team.

There’s one lingering decision that appears to have carried over though, and it’s an important one. I say “decision” since, by now, there clearly must be a reason why it’s still there. I’m also reminding myself that this is still a beta release. But the earlier we chime in on things, the better, right?

Here’s what I logged:

As with previous versions of Internet Explorer, the IE8 Beta also fails to resize text using the “Text Size” tool when fonts are sized in pixels. Most would consider this a bug, where the user should be able to trump any size specified by the page author, regardless of the unit specified. I remained boggled as to why this has been a consistent design decision.

It creates an accessibility issue for readers with poor or low vision, while making pixels a less than desirable choice for the page designer. In an ideal world, the designer should be able to specify fonts in any unit he or she desires (px, em, percentage, etc.) while the reader should have ultimate control over the size, using the browser’s controls. IE’s “Text Size” tool would appear to be broken when a reader attempts to adjust fonts on a page where fonts are sized in pixels. Surely confusing.

Thanks for listening, and keep up the excellent progress!

Disagree? I’d love to hear it :)

62 Comments

A Type In the Right Direction?

Posted at 11:35 AM

We hear news that Webkit now supports the @font-face CSS property, enabling the designer to specify downloadable fonts in their web pages. I can remember getting excited about this back in June after hearing Håkon Lie talk about it during @media London (check out Richard Rutter’s thoughts on this as well). Legal and security issues will prevent us from using most fonts of course, but I like to focus on the positive here. There are some perfectly useable, free fonts out there — and more choice is better than little or no choice, right?

I wholehartedly agree with Jon Hicks, who writes:

Personally, I’m just happy that we’re reaching a point where we’re having this conversation!

Right! What’s important, I think, is that this helps move things along. Perhaps it will stoke the fire in terms of a real conversation between type foundries and browsers on how things could work while protecting the font maker. Then again, maybe it won’t.

Stephen Coles at Typographica writes something I’d like to counterpoint:

In general, web designers aren’t typographers. Their specialty is in the realms of interface, hierarchy, and navigation. Their training does not include making decisions about what typeface to use for long passages of text.

While this certainly could be true for many, it doesn’t mean that web designers can’t become good typographers — especially when given the chance with more of a variety of typefaces to work with. The worry that all web pages will be suddently ruined with crappy free fonts everywhere overshadows the fact that some good can come out of the ability to at least have a choice to use those crappy (and/or potential useful) fonts. Give us all a chance, eh?

For instance, and maybe this is fresh on my mind after releasing a *cough* icon-based pixel font *cough* just days ago, but imagine using a downloadble dingbat font for displaying icons instead of GIF or JPEG images. Suddenly text and icons become truly scalable together. Just a small example — but one I’d love to experiment with.

34 Comments

DingBit

Posted at 10:50 AM

I’m pleased to announce a new product shipping today over at the IconShoppe. Chameleon16 is a new pixel font for Mac and Windows, hand-crafted using only the finest pixels available. It’s based on the Chameleon Original icons that we’ve been hocking over here to support our growing latte addiction.

Initially, I’d thought to just convert the GIF images to a bitmap font so that the customer could change the color and add effects at will. The minimalist nature of the icons begs of it, and having the 16×16 icons in font format would sure be handy. But while I was at it, why not create new alphanumeric characters to go along with it, and create a real font in the same style?

As the name suggests, Chameleon16 is designed to be used at 16px. And like its pixel font predecessors, it also works at multiples of that base (32px, 48px, 64px, etc.) for retro, extra blocky goodness.

Since each character is a 16×16 tile, it admittedly has limited use for setting large chunks of text. You’re not going to use this font to display client invoices or proposals. But interesting things can happen when you start playing with kerning and line height, and I’m excited to see some interesting applications where it could be used creatively.

The TrueType font includes standard alphanumeric characters as well as the entire Chameleon Original icon set as alternate characters and costs just $39 bucks. As a special promotion, the first three orders also get a free copy of Bulletproof Web Design, Second Edition that hit store shelves last month First three orders received!.

Special technical geek notes

The process of creating the font was a learning experience, and I would compare it (at times) to removing stubborn wallpaper. I first created the characters in Photoshop, then used a program called BitFonter to turn those into a bitmap font, assigning each character, adjusting metrics, etc.

Over the course of the last six months or so I began chipping away it, navigating the spotty documentation, and teaching myself the wonders of font metrics, character encoding and more. In the end, I needed to create additional outlines of the bitmap characters and export these into TypeTool which could then generate a proper TrueType file (after having problems letting BitFonter do this). If I knew what I was doing this wouldn’t have taken long.

I avoided using something like Fontographer (also by FontLab) because I was creating a bitmap font and BitFonter’s pixel editor seemed a natural choice — and for creating and editing pixel fonts, it’s great (or at least slightly more intuitive). It’s the output and documentation that was confusing, and my respect for real type designers has grown tenfold after this little project.

So, my advice for those looking to create their own pixel fonts: learn Fontographer, or remember that you’ll need TypeTool in order to generate a TrueType file from BitFonter’s outlines.