November 07, 2013

Prototypo: Kickstarting font creation

I kinda can’t decide whether this is great or terrible:

Start a font by tweaking all glyphs at once. With more than twenty parameters, design custom classical or experimental shapes. Once prototyping of the font is done, each point and curve of a glyph can be easily modified.

November 02, 2013

A typographical “Hot or Not”

The Typefight pits beautiful typographic specimens against one another in a head-to-head face-off. Each fight takes place over the course of a few days, and website visitors can vote for whichever they prefer (just click through to the individual contest pages to vote), with multiple contests running simultaneously.

October 16, 2013

Animography: Animated type for After Effects

Our animated typefaces are Adobe After Effects files with each glyph in a separate composition. A controller-composition serves as a central point from which you can customize all the glyphs in one go.

August 23, 2013

Animation: A paper-letter history of typography

The History of Typography is a paper-letter animation with 291 paper letters and 2,454 photographs, detailing the history of typography. It took Ben Barrett-Forrest of Forrest Media 140 hours to create. The whole thing is really fun and educational, in addition to being beautifully designed.

July 31, 2013

110 animators tackle a single typeface in After Effects

For this specific animated typeface we have rounded up 110 talented animators from all over the world. We asked every animator to pick a glyph and animate it using no more than 4 colors, 25 frames and a 500 x 600 px canvas in Adobe After Effects. The animators had complete freedom to work their magic within those 25 frames. The result is a wide variety of styles and techniques. The color palette and letterforms tie it all together.

The downloadable source file contains all the keyframes, expressions and artwork from the artists. This makes it a great learning source for motion students and professionals.

July 12, 2013

A new Fonts.com extension for Photoshop & Illustrator

Browse, try, & buy right within the apps:

Fonts.com has introduced a free extension for trying and installing fonts directly through Adobe Photoshop, InDesign and Illustrator. Browse thousands of fonts and try them for free for five minutes. The extension can be used with any Fonts.com Web Fonts subscription including free plans and is compatible with CS5, 5.5, 6 and CC.

May 12, 2013

Beautifully Lettered Dylan

“Inspired by Bob Dylan´s Subterranean Homesick Blues video,” writes designer Leandro Senna, “where he flips cards with the lyrics as the song plays, I decided to recreate those cards with handmade type. I ended up doing all the lyrics, and not just some of the words, as Dylan did.”

“There are 66 cards done in one month during my spare time using only pencil, black tint pens and brushes. The challenge was not to use the computer, no retouching was allowed. Getting a letter wrong meant starting the page over.”

May 03, 2013

Adobe contributes font rasterizer technology to FreeType

No, I hadn’t heard of it either, but the short story is that Adobe is giving away its IP to make type look more beautiful on your screen.

FreeType, an open-source library for font rendering, is used either partially or exclusively by Android, Chrome OS, iOS, GNU/Linux and other free Unix operating system derivatives such as FreeBSD and NetBSD. This makes FreeType the font rendering software of choice for more than a billion devices.

Details & examples are here. I’m just excited that Adobe, which since its founding 30 years ago has been redefining what’s possible around beautiful type, is making this contribution. More info from Google is here.

April 12, 2013

Dylan Roscover’s typographical “calligrams”

All of Roscover’s calligrams are driven by pure passion, and each takes 40 to 60 hours of painstaking craftsmanship to render. “These days, it is easy to make things quickly and get them out the door,” he says. “But with this type of work, every image is special and a labor of love.

November 23, 2012

Typography: Musical history, writ large

The Sony Music Timeline celebrates 125 years of musical history covering almost 150 square meters of wall space in Sony’s Derry Street offices. Using just CNC cut vinyl as the sole medium, 54 columns measuring over 2 meters tall cover feature nearly 1000 of Sony Music’s signed artists from 1887 to the present day.

October 17, 2012

Cassanet: A typography homage in flesh & blood

What a fun idea from Spanish studio Atipo: “To promote our new typeface Cassannet [a free download], based on the style of lettering seen on Cassandre posters, we’ve recreated on flesh and blood the famous triptych “Dubo, Dubon, Dubonnet”.

September 17, 2012

Extensis offers access to 5000+ Web fonts inside Photoshop

Extensis announced today it has updated its Web Font Plug-in with support for Adobe Creative Suite 6, providing web designers access to more than 5,000 WebINK and Google Web Fonts directly within Adobe Photoshop. These fonts can be used free-of-charge to mock-up any website.

September 11, 2012

Typography: Every single Unicode character in sequence

Why, exactly, Joerg Piringer decided to make a 30-minute movie that “shows all displayable characters in the unicode range 0-65536 (49571 characters), one character per frame,” I can’t really imagine. Just to honor its sheer craziness, however, I share it here:

“The sound is me reciting the alphabet (in German). One letter per frame.” Here’s more info on the project. [Via Carolina DeBartolo]

September 04, 2012

Mars Rover’s wheels embed Morse Code

This is some of the most unique typography (if you can call it that) I’ve heard of in a while: the wheels of the Curiosity Rover feature a custom pattern that spells out “JPL” (for Jet Propulsion Laboratory) in Morse Code in the vehicle’s tire tracks.

August 03, 2012

Introducing Source Sans Pro, Adobe’s first open-source type family

These days Adobe is releasing more open-source applications (e.g. the new WebKit-based code editor, Brackets). The Adobe type team felt they–and the community at large–needed a better option for on-screen work.

Thus they’ve created Source Sans Pro. As the Verge notes, “[T]his family of fonts is intended primarily to be used in user interfaces, meaning it has to be legible at low resolution yet also readable enough to support long streams of text.” Designer Paul D. Hunt explained some of his process & considerations for the project, adding:

Besides being ready for download to install on personal computers, the Source Sans fonts are also available for use on the web via font hosting services including Typekit, WebInk, and Google Web Fonts. Finally, the Source Sans family will shortly be available for use directly in Google documents and Google presentations.

June 21, 2012

Hand lettering

April 04, 2012

FontShop enables live previews inside Photoshop

Well isn’t this clever:

The FontShop Plugin Beta allows designers and other type enthusiasts to try out FontShop fonts directly inside Adobe® Photoshop® CS5 and CS5.5. You can preview any of the over 150,000 FontShop fonts for free, in the context of your own artwork.

Fonts are previewed as bitmaps rather than live, editable text. Text layers are auto-hidden while the bitmap versions are shown.

It seems the plug-in doesn’t yet work properly inside the Photoshop CS6 beta, so you might need to choose the CS5 version of Extension Manager to install it inside CS5.

March 25, 2012

Demo: How to use type styles in CS6

The #1 feature requested by Web designers has been type styles–the ability to modify one style definition & update multiple text layers at once. Now the feature is ready to use in the Photoshop CS6 beta. Deke McClelland shows you how:

February 24, 2012

Typography: Sesame Seed Braille

Wimpy, a fast food restaurant in South Africa, wanted to let blind people know that they have braille menus, so they prepared hamburgers with buns that had the burger’s description set in braille in sesame seeds.

When’s the last time you saw someone take this much pleasure in a burger?

September 30, 2011

Stream Web fonts right into Photoshop

Extensis has released a free beta of their Web Font Plug-in for Photoshop CS5+. The plug-in (a panel) allows you to use fonts from WebINK (a web font rental service from Extensis) in the creation of website mock-ups in Photoshop. Using the plug-in requires downloading a trial version of the Suitcase Fusion 3 font manager, though it’ll keep running even after the trial period expires.

I haven’t yet gotten to try out the panel, but I’m intrigued. If you have feedback on it or just general thoughts on Web fonts & design tools, please chime in.

July 31, 2011

A typeface for dyslexics

The creators quote researchers from the University of Twente as saying, “The dyslectics made fewer errors, than the normal readers, on the EMT with the font ‘Dyslexie.’ This is an indication that reading with the font ‘Dyslexie’ decreases the amount of reading errors.”

July 29, 2011

Typography: Neat new alphabets

Letter Playground from Nate Williams. It’s a site “where you can submit your own letterform designs and see what hundreds of other people have dreamed up. It’s a bit like a democratic Daily Drop Cap!” [Via]

July 15, 2011

A font face controlled by your face

Font developer Andy Clymer at H&FJ has created a tool that modifies type characteristics in real time based on facial expressions:

From their blog,

I’m intrigued by the potential to control local and global qualities of a typeface at the same time: fingers and mouse to design the details, faces and cameras to determine their position in a whole realm of design possibilities. I wonder about the possibilities of a facial feedback loop, in which one’s expression of wonder and delight could instantly undo a moment of evanescent beauty.

Story threading — allows content to flow in multiple disjointed boxes expressed in CSS and HTML, making it possible to express more complex, magazine-style threaded layouts, including pull quotes and sidebars.

Region styling — allows content to be styled based on the region it flows into. For example, the first few lines that fit into the first region of an article may be displayed with a different color or font, or headers flowing in a particular region may have a different background color or size. Region styling is not currently implemented in the CSS Regions prototype.

Arbitrary content shapes and exclusions — allows content to fit into arbitrary shapes (not just rectangular boxes) or to flow around complex shapes.

Cool. (And do wake me when the Adobe-scourging Apple fansites pick up this news, won’t you?)

“We’ve talked to everyone,” Gourdol said, noting that all the browser makers, though; all of the major ones are active in the CSS working group. They’re all very excited about it.

Next stop is getting the software accepted. Adobe has a team of 12 programmers [emphasis added] in the United States and Romania who work on WebKit, Arno said. Adobe hopes to build its CSS software into the browser engine, making it easy for Google, Apple, and others “downstream” of the central project to incorporate it into their actual browsers.

“Webkit is the most interesting area to focus right now because of its mobile presence,” said Paul Gubbay, vice president of engineering for Adobe’s design and Web group. “We’ll see if the [WebKit] community takes it.”

May 09, 2011

TypeDNA enhances Photoshop font selection; now on Windows

I’ve written previously about how the TypeDNA panel lets Photoshop, Illustrator, and InDesign select fonts by similarity, choose complementary fonts, etc. I’m pleased to see that the $49 tool is now available for Windows (as it was previously Mac-only). As a refresher, here’s a quick demo:

Other developments are in the offing. Founder Darren Glenister is speaking at Google I/O this week, promising to show “some new features that extend Google web fonts direct inside of Adobe CS5.” Check out the TypeDNA site for details about attending in person or online.

March 19, 2011

Video: A Brief History of Title Design

Just like it says on the tin.

Seeing it takes me back to a lecture from Kyle Cooper when I was just starting out in New York, back in ’98 or so, featuring the classic work of Saul Bass & others. Great to see so much classic design again.

March 15, 2011

Video: Fun kinetic typography

March 04, 2011

LetterMPress: Virtual letterpress for iPad

I dig the old-school-lovin’ idea of LetterMpress “a virtual letterpress environment—released first on the iPad—that will allow anyone to create authentic-looking letterpress designs and prints.” According to the project site,

The design process is the same as the letterpress process—you place and arrange type and cuts on a press bed, lock the type, ink the type, and print. You will be able to create unlimited designs, with multiple colors, using authentic vintage wood type and art cuts. And you can print your design directly from LetterMpress or save it as an image for import it into other applications.

December 22, 2010

Four new Adobe font families added to Typekit

Adobe & Typekit have announced the addition of four new Adobe font families–six face each for Caslon and Warnock Pro, and five each for Jensen and Arno Pro–to the Adobe Web Font collection. Check out the type team’s blog for more info. [Via]

December 08, 2010

Video: Shop Vac

My first thought: Eh, more of the tired “kinetic typography” thing.
Subsequent thought: I like the subtle wit in the type, illustrations, & lyrics.

Creator Jarrett Heather writes, “This was created using Adobe Illustrator, Photoshop, After Effects, Premiere and Toon Boom Animate. I worked on this sporadically, so it’s difficult to estimate how much time went into it. Somewhere between 500-1000 hours, but it was a labor of love.”

When this is someday done in HTML5, it’ll be considered the best, most revolutionary thing ever. [Update: I probably should have added a jokey wink emoticon to convey my tone on this one. So, “;-)!” I’ll shortly post a very long list of big, significant things Adobe is doing to support the advancement of HTML5, so no one need stress.]

November 04, 2010

Get crisp Web/screen text in Photoshop, FW

“Improved text rendering” was near the top of readers’ wish lists a few weeks back when I requested feedback on potential Web & drawing features for Photoshop, and it’s something the team is investigating. In the meantime, these links may be of interest:

The team has taken the approach of extending CSS with a few new elements utilizing the webkit- prefix so that the designer can adequately describe their intent for the content as the page is resized to simulate working across different screens. We look forward to working with the Webkit Open Source project and of course the W3C to contribute our work back in the most appropriate way. And, as always your comments are very much appreciated.

September 23, 2010

TypeDNA adds a clever fonts panel to CS5 apps

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.

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.

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

March 10, 2010

Colosseo: A letterpress rendering of the Roman Coliseum

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.

My old résumé site (c.1997) featured non-sequiturs flashing by above the text. Apologies to Douglas Coupland, Jenny Holzer, and anyone else whose text I ripped off. And no, I’m not going to show you the execrable rest of the site.

October 04, 2009

A little Adobe-flavored bloodletting

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.

September 19, 2009

Stop-motion grooviness: Type & Legos

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:

August 17, 2009

Cool interface demos o’ the day

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.

August 03, 2009

(rt) Type: Graffiti, lard, & cars

Check out this groovy typographic soap. [Via] (Zalman Stern remarks, “Yeah, just two questions for the creator: What is the font? and Have you ever been asked to leave a liposuction facility under suspicious circumstances?”)

June 23, 2009

Tip: Committing a text edit in PS and AI

“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.

May 11, 2009

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

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]

April 14, 2009

Quick text tips for Photoshop

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.

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.”

February 02, 2009

Typographic density & more

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]

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.]

Talk about “The tyranny of choice”: YouWorkForThem rounds up “300 of the best digital Blackletter typefaces.” If there are 300 “best” ones, how many must there be in total? And how many could a person need?? (My logotype above is a mash-up of two.)

January 04, 2009

Mo’ betta Star Wars text

Adobe’s Russell Brown has one-upped (ten-upped?) my suggestions for creating Star Wars crawl-style text in Photoshop. He’s created a video demo that shows off the whole process and adds some new twists.

December 28, 2008

“Star Wars, nothing but Staaar Waaars…”

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:

Create your text. I suggest clicking & dragging out a rectangle using the text tool, then pasting in your text.

Choose Layers->Smart Object->Convert to Smart Object.

Hit Cmd-T/Ctrl-T to enter Free Transform mode.

While hovering over one corner of the transform rectangle, hold Cmd-Opt-Shift/Ctrl-Alt-Shift, then start dragging. Hit Enter/Return when done.

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.

Click and drag on the layer to rotate it in 3D space. Try holding Shift, then clicking and dragging vertically.

Alternatively, use the on-canvas 3D manipulation widget and/or the other object/camera manipulation tools to rotate the 3D postcard layer.

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.

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

July 24, 2008

Write Here, Right Now: Font vids o’ the day

Font Conference Disrupted by Kidnapper: "In a shocking development, Ransom hijacked the conference’s AV system and interrupted the contentious debate with a threat to Courier and his daughter, Curlz MT." Deeply, deeply nerdy… but funny & well done. Check out the video. (I’m gonna look at Futura in a whole new light.)

July 17, 2008

Great #$!@!’in Type

What the %@^! does one call those "random non-alphabet characters to indicate cursing?" Answer: Grawlix. (Bonus cutting aside: "Is that the sound of a designer waiting for Adobe Updater to complete?" Oh, from the top rope!) [Via]

June 13, 2008

Type as illustrations & more

Letters as shapes:

Cameron Moll talks about techniques for designing with type characters–creating shapes and illustrations using just letterforms. "Don’t attempt this in one sitting. I take it back–this is the most important tip. Not only is type character designing extremely time consuming, it’s also monotonous work that requires a constant zoom in, zoom out dance to get things right."

He points out some cool examples of these techniques in action, including the all-type design for the Seed Conference. (I know I’m betraying my age & lack of CSS currency, but I’m surprised by the typographic fidelity that’s possible in modern Web browsers.)

He also points to Veer’s Flash-based Type City, an interactive journey through buildings made from letterforms. (Lovely letterpress prints of the pieces are available.)

Related bits from the archives: Bembo’s Zoo is a fun bestiary from Roberto de Vicq de Cumptich & Matteo Bologna’s; click any letter to see it turn into an animal made from letters. If that’s up your alley, peep their follow-up in the type-based portraiture in Words at Play.

April 23, 2008

Beards, Big B’s, and other type bits

My friend Bryan sometimes grows what’s known as The Beard, a semi-autonomous entity with its own wants and needs (e.g. "I’m not quite ready to go, but The Beard is getting antsy"; "The Beard will speak now…"). This font would be perfect for him–er, them. [Via]

My mom learned to type years ago and still uses the numeral 1 in place of lowercase L’s (which evidently weren’t on her generation of keyboards). Mabye she wi11 enjoy a whole blog devoted to signs written in all caps, except for the l’s. [Via]

Father and son (?) team paint the alphabet together in 4 minutes. (Maybe it’s because I’ve been up since 2am due to fatherhood, but somehow the result is cooler than it may sound.)

3D text goodness

Side note: I keep trying to tell developers that I think there’s an opportunity to knock together a very simple 3D extrusion/adjustment environment as a Photoshop plug-in, leveraging PS CS3 Extended’s ability to manipulate 3D layers. No one has yet seized the opportunity, but I’ll keep trying.

You’ll want to don safety glasses before inspecting these flair typefaces from the 70’s (scroll down til you hit the motherlode). My wife will always refer to Bookman as “that yacht club font.” [Via]

Staying on the them of puke induction, what’s up with the font used for The History of Visual Communication? Type is a little like wine with me, in that I never feel confident in my tastes. In both cases I’m kind of reassured when I hit something and can say, “Okay, that’s just foul.”

January 29, 2008

State of the Typographic Union

The frontrunners: Sens. Barack Obama and John McCain. So says the Boston Globe, analyzing the type treatments of the US presidential candidates. Of Obama: “Clean pen strokes evoke a well-pressed Armani suit.” Of McCain: “Everything about this logo says you can buy a car from this man.” [Via reader Tim]

January 12, 2008

Urban typography & more

Years ago, the design group at AGENCY.COM (of which I was part) was treated to a fun and informative talk from typographer Jonathan Hoefler. He showed & discussed snapshots of type found just in our area around NYU, and in 2000 his partner Tobias Frere-Jones undertook a study of building lettering in New York (see samples). Now their company (Hoefler & Frere-Jones) offers Gotham, a typeface inspired by the city’s visual vernacular. The site offers a cool way to test drive typefaces, Gotham included.

January 03, 2008

CSS weasels rip my flesh

Having just stumbled across the crazy-handsome I Love Typography, and having just talked about The Elements of Typographic Style being applied to the web, I have to slap my forehead–again–at my inability to get this blog to look consistent across browsers. You might think that after 14 years of development, Web browsers would have made all this a non-issue. You’d be wrong.

I’m specifically irked that I can’t get Firefox to display the titles of posts at anything approximating the correct size. Check out how they look in Firefox vs. in Safari & Internet Explorer. Typically it’s IE that gets taken to the woodshed for its standards-compliance, but in this case Firefox is the odd man out. (Tell me, though, that both Windows browsers’ failure in 2008 to anti-alias the text is just an artifact of my running Vista on a Mac. Please…?)

I’ve been using Cultured Code’s beautiful little Xylescope app to inspect my pages & tweak the CSS values. Safari & IE respond obediently when I tweak the size of h3.title; Firefox, eh, no response. And it’s obviously possible to get Firefox to honor font sizes; the author name on this page, for example, renders the same in Safari & Firefox.

I also failed to understand why the appearance of the comments area would differ between Safari and Firefox (the latter showing the text much larger). Now that I’ve updated to Safari 3, though, I see that it displays the text as Firefox does.

I spent the early part of my career wrestling with browser incompatibilities, so I know this kind of thing shouldn’t surprise me. I guess I just figured that, all these years later, something so simple should be a no-brainer.

Type, from the Bible to the Beatles to Browsers

Calligrapher Donald Jackson approached the Benedictine monks of Saint John’s University and Abbey in Collegeville, Minnesota, with his life-long dream: to create the first handwritten, illuminated bible commissioned since the invention of the printing press. You can see numerous samples & read more about the process in this Library of Congress exhibition. The Adobe type guys have been screening a BBC documentary on the work here at the office.

December 19, 2007

Trajan: The hack designer’s friend

“Trajan Trajan Trajan…”–it’s the Marsha Brady of fonts, at least when it comes to movie titles & posters. Kirby Ferguson rips hack designers a new one in this very funny video. Mark Hamburg quips, “If we want ‘cinematic’ UIs, then we obviously need to revise our typography…”

I feel like pouring one out in mourning for Zapfino, the latest once-lovely typeface to get pummeled by every hack within range of a computer. (Did it get bundled into CorelDRAW or something? >;-)) In its place, I quietly suggest Alejandro Paul’s Affair typeface (the same one seen in that Swash belt buckle).

The Washington Post comments on those text-only Ketel One ads. "My dad started crying, I started crying, my brother started crying," says Carl Nolet Jr., who sounds on the phone like he’s not kidding. "It was exactly what we wanted to say. It was simple, it was black and white, it was genuine."

October 08, 2007

Thug fonts, Queequeg, Elvish, & more

Call him Quinnqueg: Justin Quinn’s typographic art (more here) is inspired by the doomed obsessiveness found in Moby-Dick: “By repeating a spiraling, swirling labyrinthian structure, Quinn places himself in the role of Ahab who continually redraws his charts which travel nowhere and only to go into themselves.” Oh, and he uses only the letter E. [Via]

To create Ballers Delight, Mr. Chank Diesel led 50 workshop participants through some old-fashioned arts & crafts: “Each individual letter was constructed out of beads and gems on small canvas boards measuring 5″x7″. Letters were then photographed and the resulting pics were used for making a thuggish new grunge font with a big hip-hop influence.”

September 23, 2007

*Bahw-tchika-WAhow* typography

"When I hear ‘The 70’s’, I reach for my gun…"

I picked up a 1974 Car & Driver at a vintage goods store a few years ago, and after thumbing through the pages, I wanted to put my head in an oven. Honestly, I have to thank my parents for letting me miss most of that godforsaken decade, beset as it was by Bookman Swash, brownness, and gas shortages.

Ah, but maybe things weren’t quite that bad. Gene Gable presents a tour of 70’s typography*, showing the ways that evolving technology enabled new type treatments. Check out part 2 for more horrific excellence.

In the vein of type treatments that cry out for a greasy bass line (or maybe an acid rock riff), peep these others I’ve stumbled across:

August 31, 2007

Superheroic typography

Sam Potts sets cool type (“All projects 100% Times Roman-free,” he promises). Check out his designs for pal John Hodgman’s The Areas of My Expertise; the Brooklyn Superhero Supply Co.; and more. Sam was kind enough to let me pick his brain at his studio in NY last week. While we were talking, a shipment of Gmund paper (made in Germany from recycled beer bottle labels) arrived. “I’ll sleep with this paper,” he said, “if it’ll have me…” [Via Maria Brenny]

Take care when you rotate type, or you might end up with something like the WTF Mac Store. [Via]. Elsewhere in the Dept. of Signs Begging to be Misread, my wife remembers two signs in stairwell in Seattle right next to one another: one for “Gary’s Den” (the words stacked) and the other for “Rage” (some sort of boutique). With no distinction in background color it read as “Gary’s Rage Den”.
“EverysingletimeI stood in line at the Neptune,” she says, “I replayed the same line of questioning in my head about angry, angry Gary and his need for a Rage Den.”

August 01, 2007

More gigantic typography

6,272 Post-It notes form a giant, editable "TO DO" on windows in Brooklyn’s DUMBO neighborhood. Passersby are invited to jot their own to-do lists on the notes. I love it. (Consider this "Solve Gordian knot of ever-increasing power & complexity in Photoshop; also buy new shoelaces," written in absentia.) More photos of the work are on Flickr.

In her Type the Sky project, Lisa Reinermann captures buildings that form letters against the sky, creating a photographic font. [Via]

For more big letters, see previous type entries filed under Enormousness.

Digital Arts features a tutorial on making 3D type using Photoshop plus a 3D app. I continue to look forward to a developer packaging simple 3D creation tools (extrusion, lighting, warping, etc.) as a plug-in for Photoshop Extended, so that all this stuff can be done in one place while staying re-editable. [Via]

July 10, 2007

This font goes to 10,116pt.

The designers at Pentagram talk about how they created a giant NY Times logo (10,116-point Fraktur) for the publisher’s new headquarters. Interestingly, each letter is comprised of numerous small, three-dimensional “beaks” that enhance the sign’s visibility from the street. [Via]

How about lettering via “military-like technology for criminal mischief”? We Make Money Not Art hosts an interview with the Institute for Applied Autonomy. Their Streetwriter is a giant printer disguised as a cargo van, while GraffitiWriter offers radio-controlled pranking:

“Studies have shown that in nearly 100% of the cases, a given agent of the public will willing participate in high profile acts of vandalism, given the opportunity to do so via mediated tele-robotic technology.”

[Update: In response to Ramón Castañeda’s comment below, Thomas Phinney replies, "Ramón is right. Fraktur typefaces usually have a forked top to the ascenders (h, k, etc.), more curves in the lowercase (less rigidly hexagonal shapes than Textura), and all (not just some) of the caps will have curvy or squiggly shapes replacing vertical lines. This page even shows the NYT logo among the Textura samples, an unexpected bonus). Not that I think this is a big deal, by the way. If the worst typographic errors we have to worry about were people confusing different styles of blackletter, we’d be in pretty good shape. :)"]

Ever wonder what typeface a particular company uses? Here’s a handy list. One addition from personal experience: British Airways uses Mylius. (Of course, the list being a Wiki, I should probably just add that…) [Via]

May 03, 2007

Type bits: What fonts come with CS3; Why Web type sucks; more

The type designers at Vier5 are adamant that "you cannot work with modern pictures and at the same time use the typefaces of the last 50 years. The time for these typefaces is gone," and that only their new designs will suffice. The commentariat at Design Observer promptly takes ‘em to the woodshed.

I came across a short & interesting video on letterpress printing–worth a look despite the terribly mannered speaking style. [Via]

A panel discussion at SXSW is captured in this podcast on why "Web typography sucks" [Via] . [Update: the presentation slides are here (thanks, Thomas).]

Hoping to counter the suckage, CSS Zen Garden presents Tips for Timeless Type . It’s funny: we’ve come so far from when I started on the Web (tsk tsking at print designers who asked me to change the leading of body copy), and yet I still can’t get the point sizes on this blog to look consistent in Firefox vs. Safari & IE.

CreativePro features a piece about opening up to OpenType–leveraging the power of this very rich format. Scroll to the bottom for a quick visual demo of the power of alternate characters in punching up a type treatment–something I put to good (hopefully not gratuitous) use on the programs for our wedding.

Ever wonder what comic book onomatopoeia would look like in Arabic? (Who hasn’t, I know.) Wonder no more. [Via]

The edict not to "risk sounding ridiculous" in various languages is illustrated through word balloons. Hopefully when me talk German one day, I sounded a bit better than this. [Via Dirk Meyer]

On an unrelated typographic note, if you’re having trouble identifying a font, you might find this Flickr group useful. [Via] Oh, and see also What The Font. (Me, I just cheat and bug Tom Phinney ("I’ll trade you a Glyphs palette for six correct font ID’s…").)

"Akzidenz Grotesk, you’ve got me possessed…" Eh, clearly, to the point of someone making a video complete with custom sountrack. Personally, I’m holding out for an ode to Officina. [Via] (See also the Helvetica Movie.)

Update: Those math-y Google nerds aren’t the only ones who can geek out hard with a recruiting ad: the folks at Lunar BBDO took a chance by typesetting posters in a dingbat font. Check out the story for more examples of their work, and scroll to the end for a little challenge.

January 25, 2007

Mo’ betta tips for Photoshop type

Author & Photoshop TV personality Dave Cross shares a wealth of tips for working with text in Photoshop in a 10-page PDF on CreativePro.com. The chapter (excerpted from Dave’s book) gives succinct answers to a variety of questions (how to fill type with a texture, how to insert a copyright symbol, when to update type layers, etc.) and should be worth printing out for future reference.

CreativePro has also launched TypeTalk, a monthly Q&A on typography. If you wonder things like which direction the apostrophe should face before "’70’s," for example–and yes, I do–the column should be a good read.

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]

August 21, 2006

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

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.

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.

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]

June 21, 2006

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

January 22, 2006

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.