Archive for ‘typography’ category

A little over five years ago, Greg Storey suggested Whitney for the SimpleBits logotype that went along with a previous brand update. I’m thankful he did, because since then it’s become a favorite typeface around these parts, eventually becoming the base for the current ‘SB’ mark. Over the next few years, Hoefler & Frere-Jones catalog became my standard go-to font choices for presentation slides. I was hooked.

Over the weekend I made some subtle design tweaks here, and some not-so-subtle type refreshing. I’m honored to be beta testing H&FJ’s forthcoming webfonts offering. You’ll now see Whitney and Tungsten being used throughout the site. I’m amazed at the level of detail H&FJ have been putting into the screen versions of their famous fonts. Whitney ScreenSmart, in particular, looks downright glorious on a Retina display. You might’ve seen Whitney in use over at Kottke.org as well.

So, many thanks to H&FJ for giving me an excuse to spruce up the place a bit. Perhaps it’ll inspire to write a bit more here.

I wrote an article about creating an animated, image-free button with CSS3 and Typekit type and it’s been published today over at the Typekit Blog. Thanks to Mandy Brown for coordinating and editing it.

In a way, the article is an extension to a lot of the stuff I talk about in CSS3 For Web Designers: using the experience layer as a place to fully embrace the pieces of CSS3 that have decent support today amongst modern browsers. Buttons are a perfect place to experiment that way—and embedded type makes them all the better, while remaining flexible.

Now available at the shop.

Delicious typography. A super-soft, “Tri-Blend” t-shirt in espresso brown from American Apparel, printed with everyone’s favorite logogram (set in Knockout‘s Ultra Sumo weight). Peanut butter? Mustard? Fluff? Jelly? Either way, we think the ampersand is a ligature for eat and not et.

The Ampersandwich Tee is available now over at the shop. For fine typography aficionados such as yourself.

We’re happy to announce a brand spanking new icon set for sale over at the IconShoppe. It’s called Disco, and it’s a simple little set of disc-shaped icons that come in 7 colors, 3 sizes and 2 formats (GIF and PNG). It’s also reasonably priced at just thirty-nine bucks.

The IconShoppe has been offering our hand-crafted web icons to go for designers and site owners. We’re excited to finally add a new family to the shelves, with more to come in the coming months.

Also, going on sale today is Chameleon16, a TrueType pixel font for Mac and Windows that’s inspired by the Chameleon family of color-changing icons we’ve been serving since 2005. Now at just $19 USD, Chameleon16 is now the cheapest way to get the Chameleon Original set of icons (plus alphanumeric characters!).

I love ampersands. And interest in this quirky character seems to be on the rise as of late. Case in point: Just last week, I purchased not one, but two t-shirts adorned with nothing more than an ampersand. That’s telling, no?

For much of last year, I had a little portion of a presentation dedicated to using CSS to serve up alternate, compelling ampersands. It’s also something I’ve done here on SimpleBits for quite awhile in our tagline. The simple little concept comes from one of Robert Bringhurst’s guidelines in his seminal typographic bible, The Elements of Typographic Style.

Guideline 5.1.3 offers this little tidbit regarding ampersands:

In heads and titles, use the best available ampersand.

Bringhurst explains that frequently the italic version of an ampersand is more decorative and interesting than its roman counterpart, and goes on to suggest:

Since the ampersand is more often used in display work than in ordinary text, the more creative versions are often the more useful. There is rarely any reason not to borrow the italic ampersand for use with roman text.

So why not apply this to the web? We can use CSS to cleverly specify a list of our favorite ampersands, with the reader getting the best one available. We’ll first apply a class wrapped around the ampersand we’d like to beautify like so:

<span class="amp">&amp;</span>

And we’ll build a list of cool italic ampersands that readers might have installed by default, while also specifying the italic version:

span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;
  }

We can weight our list, putting our favorites near the front, understanding that the reader may get one or none, depending on which operating system they’re on, and if they have the font installed.

Thanks to the excellent efforts of our newly-hired help, here are some charts showing some of the more interesting italic ampersands available as default fonts on Mac and Windows. These’ll help get you started building your own awesompersand list.

These charts are by no means comprehensive, but were created from the default lists from each operating system. Pre-bundled or third-party applications may install other cool fonts that could be common enough to use as well. If you have a favorite that’s not listed, let us know in the comments.

Mac OS X (10.5)

Windows XP

Windows Vista

Vista added several new fonts, all beginning with the letter ‘C’. What’s nice is that Constantia nicely matches Palatino on the Mac and Palatino Linotype on Windows XP.

For more Bringhurst-to-CSS goodness, see Richard Rutter‘s The Elements of Typographic Style Applied to the Web project. And be sure to grab Meagan’s wallpapers to ampersandify your desktop.

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.

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 :)

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.

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!.
h4. 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.