Category Archives: Typography

TypeDNA adds a clever fonts panel to CS5 apps

CS5, Typography

The Plugged-In panel from TypeDNA adds font-browsing/selecting power to Photoshop, Illustrator, and InDesign CS5:

The easy-to-use interface provides several unique tools (Similar Fonts, Font Harmony, Attribute Filters and SmartChoice) . Each tool uses sophisticated character analysis and can be used independently or combined for extremely powerful browsing and font selection. Once a font is chosen, the plug-in sends your choices direct to the document.

Check it out:

Because the panel uses Flash, you can test drive it right on their site.

Adobe & Typekit team up on Web font delivery

Typography

Great news for anyone who cares about great-looking Web content: Adobe and Typekit are now offering a selection of Adobe typefaces for use in Web browsers.  Christopher Slye from the type team explains:

Every popular Web browser now supports font delivery over the web (via the CSS @font-face rule), giving designers more typographic options than ever before. We here at Adobe have been looking for the best way to get some of our most popular designs to you, so today we’re excited to announce a partnership with Typekit, the Web font pioneers of San Francisco who, since last year, have been leading the way in web font technology and delivery.

He goes on to share some details on the typefaces now offered:

Everyone knows Myriad and Minion — pervasive workhorse sans serif and serif typefaces, respectively, which will prove to be as useful on the Web as they have been in print. Thomas Phinney’s Hypatia Sans and Carol Twombly’s Chaparral are distinctive and versatile. Adobe Text is Robert Slimbach’s newest design which a lot of people haven’t even seen yet (so far it has only been available as a registration benefit for CS5 customers) but I’m certain it will quickly establish itself as a flexible and reliable text typeface, and I’m pleased it will now get a wider audience.

Richard Lipton’s classic Bickham Script is one of our most popular display typefaces and a distinctive addition to the Adobe Web Fonts collection. More of Robert Slimbach’s work now available for Web use include Adobe Garamond, Caflisch Script, Cronos, and the “display” designs for Garamond Premier (based on Claude Garamond’s beautiful Gros Canon type).

For complete details on browser support, licensing, etc., check out the project FAQ.

Typography: Amazing hand lettering, bizarre old ads, & Han Solo

Typography

Colosseo: A letterpress rendering of the Roman Coliseum

Illustration, Typography

You don’t need to be a type nerd to enjoy Cameron Moll’s new Colosseo letterpress project, a year-long labor of love:

The video starts a bit slowly, so if you’re pressed for time you can jump to the 4-minute mark where Cameron starts describing the project. Around the 6-minute mark you can see a time lapse of Illustrator being used to create some of the intricate textures on the building’s facade. Amazing stuff.

A little Adobe-flavored bloodletting

Illustration, Typography

Longtime InDesign PM Will Eisley has decorated his inner forearms with some bold type (larger image). Replying to my sharp-eyed wife, he says, “Yes, the marks are color and grayscale bars which are part of InDesign’s printing marks.” Hard core.

Next up, he says is “a series of 3’s in ITC Franklin Gothic Heavy. One of the best 3’s in all of typography, IMO.” Will also recommends checking out Body Type, dedicated to tattoo typography.

Previously:

[Photo courtesy of John Cornicello]

Stop-motion grooviness: Type & Legos

Typography

Being a fan of stop-motion filmmaking, I thought I’d share a couple of great recent finds. (Full-screen viewing recommended in both cases.)

“Handcrafted with love by BYU design students and faculty, for the 5th Typophile Film Festival. A visual typographic feast… Everything in the film is real–no CG effects!” [Via Marc Pawliger]
Meanwhile, as for “8-Bit Trip,” good lord:

“1500 hours of moving Lego bricks and taking photos of them.” And I thought Gondry’s Fell In Love With A Girl vid was extreme. [Via]

Wednesday Type: Sentient muffins, Kerning in space, & more

Typography

Cool interface demos o' the day

Multitouch, Typography, User Interface
  • SLAP Widgets are “real live plastic and silicone objects that are used in conjunction with a multi-touch table to allow users to control interface values through physical push buttons, sliders, knobs, keypads and keyboards.” Here’s a very cool (albeit slow-loading) video of the system in action*. (Can Slap Chop integration be far behind?)
  • Fontplore is “an interactive application designed for searching and exploring font databases… It does all that on an interactive table, using tangible objects to navigate and control actions.” The site includes a brief video demo.

I keep wanting to see great font exploration & management built into Adobe apps. TypeDNA offers a cool Photoshop-plug-in, using optical character recognition to determine a given font’s name, suggesting font harmonies, and more. I’d like to see these concepts taken even farther, offering browsing, comparison, activation, and purchase in all Suite apps via Flash panels.

* Who knew that Frustrated Total Internal Reflection is a multitouch technology & not just the story of my teenage years (okay, most of my years).

Classic type, new and old

Typography

Friday Type: Animated excellence, great logos, & more

Typography

* To quote a YouTube commenter: “When I saw all the cranes piling up the buildings, I though ‘OMFG, this guy is nuts! Look at how much time he spent!'” Agreed.

Tip: Committing a text edit in PS and AI

Typography, User Interface

Reader “ray” brought up a good point:

“On the mac, when editing text in Photoshop, hitting the enter key finishes the edit* and deselects the text. Hitting escape cancels the edit and reverts the changes.

In Illustrator, hitting enter inserts a carriage return (line break), while hitting escape finishes the edit. This inconsistency is very frustrating, as my muscle memory for these actions is constantly wrong.”

Understood. There is a consistent alternative, though: in both apps, hitting Cmd-Return/Ctrl-Return will commit your changes. Hope that helps.

* Note that on the Mac, Return & Enter are different keys. Return inserts a carriage return (line break), and Enter finishes the edit. Cmd-Return and Cmd-Enter both finish the edit. So, when you want to be done editing text, just remember to add the Cmd/Ctrl key + Return/Enter regardless of app/OS and you should be all set.

Thursday Type: Steve Jobs, flying milk, & more

Typography

Monday Adobe news bits: NYT Reader, "Clean" font, & more

Typography
  • The New York Times has ditched Microsoft’s WPF technology and has introduced Times Reader 2.0 a 2.4MB Adobe AIR application. The app downloads & displays the entire day’s Times (including an interactive version of the crossword), so you can carry it wherever you go (e.g. planes, trains). Here’s a quick demo plus the download link. [Via]
  • Adobe is getting a new corporate typeface that you’ll be seeing in future product updates. Clean (screenshot), designed by Robert Slimbach, is already used in the two-character application icons. (“PS,” etc.) [Via]
  • Samsung’s new LED flat-screen TV has Flash support built in, enabling developers to deliver richly interactive content on these screens. I’m not sure about streaming HD video, but Adobe’s Digital Home announcement at NAB last month talked about embedding Flash for that purpose. (Flash Player PM Justin Everett-Church recently bought a Samsung TV and discovered that the TV’s documentation ships as SWFs on a USB memory stick.) [Via Mayank Kumar]

Sunday Type: Letters as particles, leaves, & more

Typography

Quick text tips for Photoshop

Typography

I’ve recently had gotten a few type-related questions, so thought I’d jot down a few suggestions:

  • Support for type styles (i.e. the ability to define a set of text characteristics as a style, then to modify the style & have text layers updated) was the top requested feature among those I proposed to improve management of complex PSDs. Photoshop doesn’t yet support type styles, but in the meantime a couple things may help:
    • You can select multiple text layers at once, then change their characteristics via the Character & Paragraph panels. Shift-clicking or Cmd/Ctrl-clicking works, or you can select a text layer, then choose Select->Similar Layers to select other text layers.
    • You can grab the type tool, set up the characteristics you want, then make a new tool preset (Window->Tool Presets, or hit that T-shaped icon in the upper left corner (y’know, the one that neither you nor any other human being has clicked :-)). You can then choose among these presets via the Tool Presets panel.

  • Adobe Evangelist Julieanne Kost pointed out a trick I didn’t know: “To change the Type tool’s default options, the key is to close all documents. Then choose the Type tool and select your font family, style, size, anti-aliasing, alignment and color. Whatever options you choose, will become your new default.”
  • Julieanne makes another good point: While typing text, hitting Return will add a line break instead of getting you out of text mode. Hit Cmd-Return (Mac)/Ctrl-Return (Win) to get out of text mode.

For more info, see my old 12 Tips for Photoshop Text post.

Sunday Type: Fast cars, tiny letters, & more

Typography

Sunday Type: Comics, zombies, & more

3D, Typography
  • Poor Papyrus: It’s on the hit list of this Simple Pledge. (Man, next thing you know, photographers will be told that black jeans & fanny packs are on the way out.)
  • “We meet again, my dear doctor…” Blambot presents a detailed but accessible survey of Comics Grammar & Traditions. [Via]
  • Graphic Mania features a roundup of fresh 3D typography. The fountain of type for the Zune Marketplace sorts me out.

Slick typographic apps: Hidden messages & more

Typography
  • Stewart Smith’s Histoface lets you embed secret text into an image’s histogram, making it show up in Photoshop’s Levels dialog. That’s rad. IronicSans has the details. [Via Nicolas Chaunu]
  • “Whip out your iPhone and snap a photo, and WhatTheFont for iPhone will identify that font in seconds!” How freakin’ great is that?
  • If that’s up your alley, check out i love typography’s round-up of iPhone typography apps.
  • TypeDNA’s interesting FontShaker offers “a new way to visually explore the fonts you have installed locally using Flash. It also gives you a place to save comments, tags, rating and samples… We have also started to add the ability so that you can open a font file in Photoshop from the flash movie.”

Typographic density & more

Typography
  • Density:
    • The groovy Wordle is “a toy for generating ‘word clouds’ from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes.” So go rock it! [Via]
    • 389 Years Ago charts African American history.
    • Missed Connections turns Craigslist notices into attractive maps. [Via]
    • This year’s Grammy Awards feature a typographical portrait of Thom Yorke. [Via]
  • Double Buttcheek Score: Scrabble-inspired pillows are among 15 typography-based objects. See also the
    Scrabble keyboard. [Via Bryan O’Neil Hughes]
  • Jen Renninger brings the feel of old-school flash cards to her Modern Design deck.
  • Authentic Ink is a drippin’ good old fraktur font.
  • Hand-made fonts beg to be touched. [Update: Reader Hanford Lemoore reports getting malware notices with the link, so I’ve removed it from the main text.  I’m not seeing any problems (at least via Mac browsers), so here’s the active link if you still want to click it.]

Saturday Type: Zoos, "Buckets of Fail," and more

Typography

Tuesday Type: A great utility, more tiny Obamas, & more

Typography

"Star Wars, nothing but Staaar Waaars…"

After Effects, CS4, Typography

Now that Flash CS4 offers “postcards in space”-style 3D transformations, you can do all sorts of simple, interesting things. On CreativePro.com Jeremy Schultz has posted a tutorial on creating a Star Wars-style text crawl using the new app.

 

Photoshop CS4 offers a couple of interesting new ways to do something similar. First, because Smart Objects in CS4 now support perspective transformations, you can create some text, then transform it non-destructively while keeping everything editable. Here’s a quick recipe:

 

 

  1. Create your text. I suggest clicking & dragging out a rectangle using the text tool, then pasting in your text.
  2. Choose Layers->Smart Object->Convert to Smart Object.
  3. Hit Cmd-T/Ctrl-T to enter Free Transform mode.
  4. While hovering over one corner of the transform rectangle, hold Cmd-Opt-Shift/Ctrl-Alt-Shift, then start dragging. Hit Enter/Return when done.
  5. To change the perspective effect applied to the Smart Object, just hit Cmd-T/Ctrl-T again and you’ll be right back where you were. To edit the text, double click the SO layer to edit the original content in its own window.

 

 

Photoshop CS4 Extended offers another cool option as well: turning the layer into a 3D postcard. Try this:

 

  1. Create the initial text layer as described above.
  2. Choose 3D->New 3D Postcard From Layer.
  3. Hit K on the keyboard to select the 3D Rotate Tool.
  4. Click and drag on the layer to rotate it in 3D space. Try holding Shift, then clicking and dragging vertically.
  5. Alternatively, use the on-canvas 3D manipulation widget and/or the other object/camera manipulation tools to rotate the 3D postcard layer.
  6. To edit the text, double click the name of the text layer listed in the Layers panel beneath Textures-Diffuse.

 

 

Is one method better than the other? Not necessarily. Going the Smart Object route, you can use regular Photoshop transformation options & directly apply filters non-destructively. (Plus, of course, you’re not required to own Photoshop Extended.) The 3D postcard method offers much richer ways to manipulate the object using real 3D effects–for example, changing the focal length of the camera that’s viewing the text. It also lets you apply 3D lights, etc.
One other thing: After Effects has supported postcards in space for many years, and the Adobe Exchange features a downloadable template for AE that makes the Star Wars effect easy.

Thanks to Bill Murray for the title inspiration.

Sunday Type: NYC to GA

Typography
  • In my office I’ve got a black metal-and-enamel “Bklyn Bridge” sign from the subway station where I used to switch trains when I was new to New York. (No, I didn’t steal the sign–though I didn’t ask the seller a ton of questions.) I miss the city, and I enjoyed reading The (Mostly) True Story of Helvetica and the New York City Subway. [Via]
  • “Mmm… sexy type.” Seb Lester has skills. Check out his lovely F-bomb. [Via]
  • John Boardley of “I Love Typography” has started the My Favorite Letters Flickr Pool where you can share you favorite letters of your favorite typefaces. [Via]
  • Filippo Minelli’s Contradictions project “writing the names of anything connected with the 2.0 life we are living in the slums of the third world is to point out the gap between the reality we still live in and the ephemeral world of technologies.”
  • Type-related quip o’ the month: “The runoff in the Georgia Senate race was won this week by Saxby Chambliss, who is the incumbent Republican senator and not, as I believed, an obscure font.” –Amy Poehler

Monday Type: Star Wars, light paintings, & more

Typography

Vintage Sunday

Illustration, Typography

Thursday Type: The sacred & profane (well, mostly profane)

Typography

Thursday Type: The sacred & profane (well, mostly profane)

Typography