Category Archives: Typography

Biggest. Typography. Ever.

  • geoGreeting leverages Google Maps, letting you assemble animated greetings by using satellite photos of letter-shaped buildings.  Ridiculous!  Check it out! [Via]
  • Along vaguely similar lines, FireHorse Studio has fun with lettering in a 15 second teaser trailer for Toyota. [Via]

[Update: That giant “MOMO” signature (mentioned recently) would qualify as well. And so would the 8-foot LED letters of Mary Ellen Carroll’s Indestructable Language installation in Jersey City.]

Fresh typographic action

Letters del Fuego; Catch Me If You Can

  • French kids play with matches in Typographie-Bougies, creating letterforms from numerous candles. YouTube also offers a little behind the scenes clip for this film. (It’s kind of funny that even 90-second movies now get their own “making-of” featurettes.)
  • Most of the rest of the YouTube type section is, like most of YouTube, crap, but stumbling upon some great Saul Bass pieces (Psycho, Anatomy of a Murder, and The Man with the Golden Arm) made me think of a modern sequence that evolves that aesthetic masterfully: Catch Me If You Can.
  • Mo' fresh type

    • I love the old-school poster art quality of these new Toyota ads. (And if you like that style & have a bun in the oven, pay a visit to Rattle-n-Roll.)
    • Who would commit the lyrics of LL Cool J to gouache & watercolor? Ray Fenwick would, among many other things. See also his great Flickr collection. [Via]
    • BibliOdyssey displays some gorgeous Arabic zoomorphic calligraphy. The entry links to numerous related resources & examples.
    • Misprinted Type offers a variety of free & commercial distressed type. (I might have to crack the wallet for Great Circus). [Via]
    • If the graffiti thing is up your alley (or under your graffiti bridge), check out the work of Hand Selecta.
    • Launched in conjunction with the 50th anniversary of the typeface, Helvetica is “a feature-length independent film about typography, graphic design and global visual culture.” I think I’d sneak into this one wearing a trenchcoat and shades, lest my true design-dorkishness show through. [Via]
    • On Daily Type, a group of Russian type designers post sketches of their latest works-in-progress. I like the kind of hand-drawn, back-of-Trapper-Keeper “Van Halen Rulez!!” quality of many of the pieces.

    The Joy of Text

    Being kind of textually fixated these days, I thought I’d share some good type-related resources I’ve encountered lately:

    Great lettering & happy accidents, inside Illustrator & out

    Not long ago I came across the excellent hand lettering of Fiodor Sumkin. I love the intricacy with which he fits characters and shading to various shapes. [Via]
    In particular, his drawing of these hands got me thinking about the enveloping functions in Illustrator. Click this image for a quick overview of how to fit type to shapes:
    Text warping tutorial
    Using these techniques, I set out to emulate Sumkin’s work. First I traced the outline of one of his hands in Illustrator, then blocked out a number of regions. The Pencil tool works well for this, as does a Wacom tablet. The result was a skeleton for the next steps:
    Outline
    Then, needing to turn each region into a solid object, I copied and pasted all the paths into Flash, broke things apart, and then used the paint bucket to block them in. I probably could have used the Illustrator Pathfinder tools and/or the new Live Paint features, but old habits die hard, and I knew I could get what I needed from Flash:
    Colored in Flash

    At that point I copied and pasted everything back into Illustrator, then picked a font that seemed likely to fill the shapes nicely–in this case Adobe’s 60’s-style Mojo. Using the text “Word Hypnotize” and the enveloping technique described above, I got… this (click for a larger version):
    Hand
    Hmmph–it’s nothing like Sumkin’s lettering, and were I to try harder to emulate it, I think I’d fit each chunk of text to an envelope mesh, then use the various mesh, path, and warp tools to deform it as necessary. But you know, I kind of like the sinuous, abstract quality that resulted–a bit as if Slim Goodbody dipped his hand in an inkwell.
    So, there’s my little happy accident o’ the day. Software generally makes it pretty easy to repeat the same steps over and over, so I’m glad to experience a little serendipity & creative destruction now and then.
    By the way, Sumkin’s lettering reminds me a touch of Marta Monteiro’s, and for more cool lettering, you might check out Rodney White (overview/gallery). Oh, and tangentially related (at best): the look of the hand I made slightly reminds me of WWI-era Cubist ship camouflage. [Via]

    Great lettering & happy accidents, inside Illustrator & out

    Not long ago I came across the excellent hand lettering of Fiodor Sumkin. I love the intricacy with which he fits characters and shading to various shapes. [Via]
    In particular, his drawing of these hands got me thinking about the enveloping functions in Illustrator. Click this image for a quick overview of how to fit type to shapes:
    Text warping tutorial
    Using these techniques, I set out to emulate Sumkin’s work. First I traced the outline of one of his hands in Illustrator, then blocked out a number of regions. The Pencil tool works well for this, as does a Wacom tablet. The result was a skeleton for the next steps:
    Outline
    Then, needing to turn each region into a solid object, I copied and pasted all the paths into Flash, broke things apart, and then used the paint bucket to block them in. I probably could have used the Illustrator Pathfinder tools and/or the new Live Paint features, but old habits die hard, and I knew I could get what I needed from Flash:
    Colored in Flash

    At that point I copied and pasted everything back into Illustrator, then picked a font that seemed likely to fill the shapes nicely–in this case Adobe’s 60’s-style Mojo. Using the text “Word Hypnotize” and the enveloping technique described above, I got… this (click for a larger version):
    Hand
    Hmmph–it’s nothing like Sumkin’s lettering, and were I to try harder to emulate it, I think I’d fit each chunk of text to an envelope mesh, then use the various mesh, path, and warp tools to deform it as necessary. But you know, I kind of like the sinuous, abstract quality that resulted–a bit as if Slim Goodbody dipped his hand in an inkwell.
    So, there’s my little happy accident o’ the day. Software generally makes it pretty easy to repeat the same steps over and over, so I’m glad to experience a little serendipity & creative destruction now and then.
    By the way, Sumkin’s lettering reminds me a touch of Marta Monteiro’s, and for more cool lettering, you might check out Rodney White (overview/gallery). Oh, and tangentially related (at best): the look of the hand I made slightly reminds me of WWI-era Cubist ship camouflage. [Via]

    12 Tips for Photoshop Text

    This is one of those blog entries that start innocently enough, but which quickly become War and Peace in length. But take a second to scan it quickly if you find yourself setting text in Photoshop. Some of the tips will be familiar, but I’ll bet that others will strike you as new.
    [Update: Photoshop Grand Master Russell Brown has now created a video to show off these tips–plus four more, just to outdo me!]

    1. Photoshop CS2 added a WYSIWYG font menu, so that you can preview fonts before applying them. But what if you want to cycle through fonts on the document itself? Select the name of the current typeface in the Options Bar, then hit the Up and Down arrow keys. That’ll cycle through the available fonts on your system.*
    2. If you find that you’re setting the same style of text repeatedly (e.g. Times New Roman 12pt underlined, no anti-aliasing), create a Type tool preset. Click the tool preset icon (you know, that thing no one clicks in the upper-left corner), click the New Preset button, and you’ll record all your current font parameters. (This works with nearly all tools, by the way.)
    3. It’s now much easier to change the settings for multiple text layers at once in CS2. Select the layers you want (Shift-click in the Layers menu to select a range, or Cmd (Mac)/Ctrl (Win)-click to select non-adjacent layers. Any changes you make to the font settings will apply to all selected layers. If you’re working with CS1 or earlier, this still works, but it’s a little more hidden: link together the layers you want to change, then hold Shift before changing the text properties.
    4. If you want to curse less, hit Cmd-Return (Mac)/Ctrl-Return (Win) when you’re done setting a line of text. That way, instead of adding a line break (Return), Photoshop will commit the text edit.
    5. If you’re setting paragraphs of text in Photoshop (e.g. comping up Web pages), and if the process consists of “type type type RETURN, type type type RETURN”–please, for the sake of your sanity, stop! You can simply click with the Type tool, then drag to create a text box (like this). This way, if you need to modify the dimensions of the text box, you don’t end up deleting & reseting tons of hard returns.
    6. Okay, that’s cool, but what if you want to fill not just a box, but some irregular shape? Draw your shape with the Pen tool (making sure to have it set to draw paths), then hover near the inside of it with the Type tool. The cursor will change & you’ll be able to type inside the path, like this. What’s particularly nice is that the path & text stay editable, meaning that if you adjust the path, the text will reflow automatically.
    7. Similarly, you can set text along a path. Draw the path, then use the Type tool to click near the outside of the path. Et voilátext on a path in Photoshop.
    8. Starting in Photoshop 6, it’s been possible to warp text by clicking the warp button on the Options Bar. Clicking it presents a range of options for warping type while keeping it editable. But did you know…
      • You can animate text warps. After creating a warp, create a second frame, change the warp, and hit the Tween button on the Animation palette. Boom–you’ve got something like this (but hopefully way less cheesy).
      • For more warping control of text, first convert the text into to a Smart Object (choose Layer->Smart Objects->Group Into New Smart Object). This provides two main advantages: you can apply a custom warp (pushing and pulling it freely, like this), and you can warp multiple text layers as a single unit. (Downside: you can’t animate a warp applied to a Smart Object.)
    9. Illustrator CS2 has added a bunch of kickass typography tools–a good deal richer than what Photoshop offers. But because Illustrator now shares a type engine with Photoshop, you can set text in Illustrator using features like the Glyphs & Open Type palettes, then copy the text, paste it in Photoshop, and keep it fully editable. (Just make sure you select the letters in Illustrator, rather than the whole text object, before copying, and that you’ve clicked with the Type tool in Photoshop before pasting.) Or, if you have a lot of text in Illustrator, try exporting a PSD file (via File->Export). The amount that can be preserved–including text on a path & text in a shape–is pretty amazing.
    10. Don’t blindly trust any program’s letter spacing. Take a minute to make sure your text looks decent, and adjust the kerning when letters pairs are too tight or loose. (Click between the letters, then Opt (Mac)/Alt (Win) + left/right arrow to adjust the kerning.) You may also want to see Geoff Stearns’ tips on setting good Web-res type. (The default settings for print-res work may not deliver the best results at 72dpi, and vice versa.)
    11. Hold down the Cmd (Mac)/Ctrl (Win) key while you’re working on a line of text. This will let you reposition the text on the layer, without first having to commit your edit.
    12. To select an entire string of text (everything on a layer), double click the layer’s thumbnail in the Layers palette.

    Whew–hopefully some of that will prove useful to you. I’m sure I’ve forgotten some tips, so I may come back and update the entry later. If you’ve found tricks you find useful, please add them via the comments.
    * If you plan to do this often, you might want to go into Photoshop preferences and raise the number of undos, since each change of font counts as an undoable step.)

    Words at Play

    Typography + animation come together beautifully in Words At Play, the companion site to Roberto de Vicq de Cumptich & Matteo Bologna’s book of the same name. The project, a “many-splendored, multi-layered typographic tour d’amour,” showcases de Vicq’s typographic portraits of 21 renowned writers (plus Al Capone and Napoleon Bonaparte). After snagging a pair of Webby awards, the site is up for the People’s Choice award at next month’s Flashforward. It’s got my vote.
    Words at Play was built by animating type in After Effects, then exporting keyframes to Adobe LiveMotion as XML (.amx). As it happens, I’ve seen speculation recently about Adobe resurrecting LiveMotion. That strikes me as quite unlikely, but there were some cool concepts (e.g. data exchange via XML, animation applied via styles) that I’d love to see revisited.
    If you like Words At Play, check out Roberto’s earlier Bembo Zoo, an abecedary featuring animals drawn in letters [Via]. These guys also did a terrific portrait of Adobe co-founder John Warnock, using the Warnock Pro font created in his honor. (Random aside: I also found a portrait of Dr. Warnock rendered in PostScript, the language he invented.)
    Tangentially related:

    • I’m captivated by the typographic paintings of Paula Scher [Via]. She discusses her work in the video Adobe commissioned from Hillman Curtis.
    • TYPEDRAWiNG uses Flash to enable drawing with letters.