- PingMag discusses the origins, history, and state of Iranian typography & provides numerous beautiful examples. I dig these two in particular.
- Taylor Lane has created a series of typographic pinups (fair warning: there’s some glyph-heavy nekkidness). [Via Marc Pawliger]
- In an inverse vein (not pictures made from letters, but letters from pictures), Giornale Nuovo offers a brief history of figurative alphabets. [Via]
- Joshua Smith has posted a gallery of cool type treatments (including his own logotype) on Hydro74. The rest of his site is worth a visit for dynamite illustrations & more. [Via]
- Type for you is a new typography blog, containing links to useful resources like Typies’ 15 tips to choose a good text type. [Via]
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
- The Urban Typography Project features limited edition
letterpress prints depicting some of Salt Lake City’s vintage signs. - The Tiffin Directory looks fresh and contemporary–not bad for a catalog from 1922.
- Fiodor Sumkin is back with more good action.
- Buffet Script is just lovely (and a guy can’t use Zapfino all the time). [Via]
- James Clar makes 3D Display Cubes that each use 1000 LEDs to create 3D forms and animations. Each one runs a cool $3,000, but they sure are pretty, and the site offers a tutorial for designing 3D content in Photoshop. [Via]
- LOST is a typographical triptych, moving letterforms meant to be played across three adjacent monitors. [Via]
Letters del Fuego; 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:
- Russell Brown has created a video that demonstrates the 12 Photoshop text tips I posted earlier (plus four more).
- Veerle shows off how to create some handsome lettering effects using Illustrator art brushes & the dark, mysterious Appearance palette.
- The Playground showcases various artists creating complete, downloadable letter sets using everything from banana peels to world leaders to… well, you’ll see. [Via]
- Erik Spiekermann, author (among many other things) of the classic handbook Stop Stealing Sheep, gives PingMag an interesting interview, covering everything from the creation of corporate typefaces to the development of a new screen font for Nokia. Erik has also started his own blog.
- Design Melt Down surveys cool typography on the Web, while IHT charts the creation and rise of Georgia.
- CreativePro.com offers for a variety of tips for finding & previewing fonts online, converting fonts to OpenType, previewing Web fonts, and more.
- Emigre’s Typetease lets you set whatever characters you’d like using their online catalog–everything from the chunky O Brother, Where Art Thou face to the piratical Sabbath Black.
- Chank Diesel makes all kinds of good fonts, including numerous cool free ones. (Dig Newcastle!)
- DAIRY is a font of sorts–just one that spells out your text using milk crates.
- Is there really a Cyrillic “Ж” in the Declaration of Independence? Apparently so. (Why doesn’t English a character half so badass?)
- In For All Seasons, Andreas Müller sets type in beautiful motion. (Don’t let the need to download the file put you off; the full-screen effect works nicely.)
- House Industries makes a font comprised of trendy silhouettes. (See also silhouettes from Tech Vector.)
- [Updates: Colin Smith demonstrates how to make Superman-ly text in Photoshop, and Todd Dominey points out the very cool Cargo stencil font.]
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:

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:

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:

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

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:

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:

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:

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

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!]
- 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.*
- 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.)
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.)
- 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.
- 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.)
- 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.
- 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.