The modern day (post 2007 re-brand) Applebee’s has a menu with House Script, along with a geometric sans for contrast, DIN. It looks like they have left the ligatures off (not supported in all browsers yet) and added some tracking, which is usually not desirable for script typefaces. Notice how the exit strokes show up in between the letters in ‘Introducing.’ It’s not too jarring in this setting but it helps that this design has nicely shaped joins unlike, say, the notorious Mistral typeface. House Script degrades well in the sometimes harsh world of web typesetting. Compare Applebee’s web usage with Steak ‘n Shake’s print use below.

In general when using connecting script fonts it’s best to turn ligatures on (text-rendering: optimizeLegibility;) and do not add tracking, or {letter-spacing:*px} for CSS.

Steak ‘n Shake

The House Script typeface is also used by Steak ‘n Shake. Again, seen contrasting with a geometric sans, the beefy-looking Neutra Display Titling (with modified crossbar on E?). The menu also has the old standby Optima including the Optima Extra Black weight. I think the Steak ‘n Shake logo could be a heavily modified version of Salzburg Bold, encircled by Optima caps.

 
My point is, using script typefaces with modern browsers and CSS, we can turn on ligatures (when available with text-rendering: optimizeLegibility;) and avoid letterspacing (letter-spacing:*px) and make web typesetting on par with print.

1. Open the Terminal app’s Perferences
2. Under the Settings tab, you’ll see the theme options. Select ‘Homebrew’ and then the gear icon for more options in a drop-down menu, and choose Duplicate. You can rename the new style, to something like ‘Space Shuttle’ as I did.
3. With the new theme selected, change the text selection color to a red. I did [163, 0, 0] in RGB values.
4. Then click the ‘Window’ sub tab and change the background color to a dark blue. I set it to the Midnight color crayon from the color picker, or [0, 0, 128] in RGB.

Terminal rocking the AFDKO with my Space Shuttle theme

See the full story and more details about the tireless volunteers at the SoTA site. You can license a copy of the font, with proceeds going to charity, from MyFonts, Veer, Fonts.com, and Linotype.

My contribution was this landscape-inspired glyph, which happens to be in the inverted exclamation point position in the font (¡), which I describe as:

“The circular head of this flower represents Japan and their sun-symbol flag. It grows out of a heart shape representing the indestructible human spirit. Set on an upward flowing landscape, the grass continues to grow higher representing recovery and growth ahead.”

All of these are pretty hardy designs, with a low stroke contrast (for Old Styles) for even color text rendering. The tall x-heights on all of them also give the lowercase more space, and essentially, more pixels for the shapes. Both of these attributes are common for UI or on-screen reading designs such as Lucida or Caecilia. I’m glad that Apple is sticking with the book typography tradition of Old Style serif faces, but also pleasantly surprised by Seravek, which is a neo-humanist design, I’d say. In other words, a sexy cousin of Verdana.

In the process of adding these new designs, Apple has removed some fonts from the options including Verdana, Cochin, and Baskerville. Cochin, I believe is too flamboyant to be a great text face, especially in the italics. Like I mentioned above, I see Seravek as an alternate to Verdana. But Baskerville is a classic book typeface, and they didn’t replace it with a design in the Transitional genre, but Old Style instead— peculiar. Of course, Apple engineers and executives are not immune to at least some subjectivity.

I’m looking forward to the next version, as always.

Update 12/13/11: Read more commentary about iBooks on the FontFeed blog from author Yves Peters.

Update 12/17/11: Also more comments from John Berry, a former Microsoft employee.

Update 12/29/11: Updated formatting and grammar in first paragraph.

Sources:

iBooks in Apple App Store

Macworld

Engadget

www.engadget.com

They use the typeface DIN in their old-school graphic headlines, and web-safe Arial and Georgia for text. Pretty standard use of fonts on the web. They have interesting features in the design of the site, just not aided by web fonts.

This is My Next

This site featured the Museo fonts served from TypeKit. It was an improvement to be using live web fonts, but an unimaginative choice for branding. I know, I know, it was only temporary. I like the Museo series, but I think the market has been over saturated with them. The URL is now forwarding to…

The Verge

www.theverge.com

The branding for the Verge was released months prior to the launch, and I was pleasantly surprised to see that they used the ITC Serif Gothic Black font in the logo. They did a little custom treatment with a T-H ligature, and a swash-like stroke on the interior of the V. Branding for The Verge was done by Area 17.

The Verge homepage

With the exciting launch of The Verge, I was pleased to see that they had chosen a more sophisticated design for the news site; the beautiful slab serif Adelle. I suppose they couldn’t give up on the geometric kingpin FF DIN Web Condensed, which contrasts nicely with Adelle in all caps and italics. Design for the Verge was done by Code and Theory, which I can only assume was responsible for the CSS.

For suggestions, I would say they could benefit from turning on the kerning, via the optimizeLegibility; CSS tag. Adelle will benefit from kerning, as most designs do, at all sizes.

I know that it’s a news site, and long headline text is an issue, but setting the letter-spacing: -1px; is just too extreme in this case. The letters get mashed together and actually decrease legibility. This would be a perfect fit for a Condensed weight, if available.

Congratulations on the launch of The Verge, and I’m looking forward to the next story, the next re-design, and your next font choices.

Terrance

My tormented, stenciled, and ate-up blackletter typeface, Stenblak, is featured in the October newsletter from Ascender Fonts. Stenblak is perfect for Halloween or Dia de los Muertos headlines.

• View October 2011 Newsletter from Ascender Fonts

Han Shot First, the third piece in the Lessons Learned Series of paintings, quotes a controversy about who shot first, Han or Greedo, in the Mos Eisley Cantina scene in Star Wars Episode IV. In the original cut of the movie, Han—with unchecked aggression—shoots first, without Greedo getting a shot off. In the 1997 re-release, the scene was changed showing Greedo shooting first, and Han killing him in a less-villainous, self-defense kind of way.

It’s more than that, though. It really means the best defense is a good offense. You can’t always wait for things to happen. It means shoot first, ask questions later. Ready, fire, aim. It means be decisive. Which—fact in point—has been a struggle for me at times.

So, the lesson goes, shoot first. The next intergalactic battle awaits.

Mo’ Money Mo’ Problems

Part 2 of my Lessons Learned series hails from the 1997 hit by The Notorious B.I.G. Unfortunately, the track was released posthumously, which reminds me of life being fragile. Really, it’s about how money, either too much or too little, can cause stress in one’s life.

This piece is laid on a dark charcoal grey background, giving it an overall darkness and heaviness. The mint and grass-green colors, along with the border style are meant to remind the viewer of U.S. currency. The blackletter type styles, as emulated here, are popular with hip-hop and rap music esthetics, perhaps in the attempt to look powerful and serious.

The lettering used is modeled after Brahms-Gotisch designed in 1937. My interpretation is mostly of the textura blackletter style, but I have blended some rotunda features, rounding some forms to accentuate the marks possible with a paint brush. This is most apparent in the “Mo” parts where the roundness of the brush changes the appearance of the blackletter structure to the point where is looks more friendly and soft, and adds some visual contrast and variety.

The issue of money will probably come up again in this series, and in the mean time I use mint.com to keep an eagle eye on my personal finances.

Terrance “T$” Weinzierl

I’ve started to compile a list of lessons—some taught and most learned—that will become a series of typographically illustrated pieces. The first, reading Stay Hungry, is a metaphor for staying determined. I’ve tried to present it in a way that you might see a hand-painted sign for a restaurant, making it a pun as well.

Stay hungry, my friends.

Terrance

Shark Bait font specimen

Shark Bait was drawn at a workshop with Sumner Stone and Juliet Shen at the School of Visual Concepts in Seattle. Its sharp features and sharp contrast come from the broad tipped marker that was used to hew this typeface together. It’s a little choppy, with lots of boldness and an aggressive edge. If it attacks you, punch it in the eye.

• Download PDF specimen

• Unreleased