Category Archives: Typography

Dylan Roscover's typographical "calligrams"

The Adobe Design Center features an interesting profile of Dylan Roscover, creator of beautiful typographic illustrations called 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.

Calligram

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]

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.

#progress

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.

[Via]

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.

Update: Here’s an in-depth overview & demo video.

Typography: Neat new alphabets

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.

[Via]

Adobe's enriching CSS, WebKit

HTML is great, but its text-layout limitations have always been a drag for print designers–particularly those now wanting to create tablet-based magazines. That’s why Adobe has been proposing to enhance the CSS spec & contributing to the WebKit browser project.
Now you can download a build & learn more about CSS Regions. According to the project page, key highlights of CSS Regions include:

  • 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?)
Update: To answer some questions I’ve seen, here’s some clarification I pulled from CNET’s coverage of the news:

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

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.

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.


[Via]

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

(rt) Type: Signs to Restore Sanity, citys as letters, & more

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:

Let me agree in advance that one shouldn’t need tips & that these things should Just Work™.

Adobe's enhancing WebKit for better typography

I’m excited to say that Adobe’s working with Google to enable better HTML-based typography, contributing the work to the open-source WebKit project.

Why not just say “Web typography”? Because HTML goes beyond the Web, supporting apps like Adobe’s new tablet publishing solution.  Trouble is, for all its strengths (e.g. separating content from layout), HTML’s type handling has been pretty limited–especially for creating print-quality layouts.

Adobe wants to help solve the problem, making HTML better suited to more demanding applications.  Check out this demo from engineering VP Paul Gubbay:

Paul writes,

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.