About Face: Urbana

February 1, 2012

Today’s About Face was written by Nick Cox, a front-end developer and designer from Seattle, Washington.

spacer

In type, as in wine, there is some beautiful and industry-changing work coming out of Latin America today. Foundries such as Sudtipos and Emtype have been springing up and drawing attention to themselves with some of the more interesting and beautiful serifs, sans serifs, and script faces of the year last year.

Colombian designer César Puertas is adding to the designers that have put Latin America on the map with Urbana, a font inspired by the city of Bogotá. Designed primarily as a display face, Urbana doubles as a readable and practical font for short to medium length texts. While many of the recent releases from South America in particular have demonstrated the famed passion and flair of the culture, Urbana remains a sturdy and sensible family, while retaining a good bit of personality.

spacer

The cut and carved style of Urbana.

Most notable among Urbana’s features is the cut and carved style of its glyphs. This is an aesthetic nod to the days of letterpress printing, in which a counterpunch was made to create the negative space (or counters) of the letters into a punch. The punch, in turn, created the copper matrix into which molten metal was poured to create the lines of type that would eventually be inked and printed. In Urbana, the counters of many of the glyphs reference this era, exhibiting a tension between, for example, the curve of the outside of the bowl of the lowercase b, and the sharp corner inside the counter. This technique is carried over into other aspects of the letter anatomy, such as the ascender, also illustrated by the lowercase b.

spacer

Urbana’s lowercase b demonstrates the interplay of corner and curve in Urbana’s glyphs.

Also noteworthy is Urbana’s versatility. Though Urbana was designed for use at titling sizes, it performs admirably as a text face. Further, the family is quite large, with four weights ranging from light to bold with matching italics. Provided you’re not setting type for extended reading, Urbana is an all-around sound choice.

Urbana’s rendering capability is another trait that makes it a solid bet for a vast array of typographic needs. If you’ve been following type on the web for the past two years or so, you know the heartbreak of finding a beautiful font, only to realize that it is mangled by Internet Explorer. Urbana is an excellent antidote to this problem. As you can see in the screenshot below, Urbana looks good even less forgiving rendering environments, like IE6 for Windows XP.

spacer

Urbana holds its own in IE6 (right), rendering close to as well as it does in Safari (left).

And again as in wine, a typeface’s qualities can be paired with that of its companions to create a sensually rich experience. Take, for example, Urbana and Abril Text. Type Together’s Abril, like Urbana, boasts several details that are honed into beautiful subtleties when used at text sizes. In this pair, the slabs of Abril Text evoke the sharp eges of Urbana’s clean cut side, and Abril’s lovely curves (on the terminal of the r, for example) bring out Urbana’s voluptuousness.

spacer

Abril Text’s slabs and curves echo the sharp and round aspects of Urbana. (source text)

Urbana’s inherent contrast works well when specific aspects of the overall appearance are teased out by other typefaces. Take, for example, Le Monde Courrier’s generous counters. These glyphs (note the lowercase e, in particular) have an open air about them that distinguishes them from Urbana’s tight counters. When brought together, the tension between Le Monde Courrier’s loose spacing and Urbana’s relatively condensed width create a serious tone that is not without its playful side.

spacer

Counter contrast: Urbana paired with Le Monde Courrier. (source text)

But it is with similarly curvy faces that Urbana really lets its hair down. In the 900 weight, Urbana’s curves and corners are at their most prominent, and when set with a rounded sans like Proxima Nova Soft, the carefree lightness is evident, and both faces bounce off one another in childlike, romper room delight.

spacer

Playful delight: a children’s poem in Urbana and Proxima Nova Soft. (source text)

Similar fun can be had when Urbana calls Bello out to play. When softened by a large size and subtle CSS3 text effects, Urbana is all the more curvy, and Bello’s lively script and moderate stroke contrast bring even more motion to the table.

spacer

Curves in motion: Urbana paired with Bello Script.

But Urbana isn’t all fun and games. Consider using it as a text face with a smart and bookish titling face like Chaparral. This classic serif can whip Urbana into shape, and it suddenly behaves itself, showing its functionality via solid readability and compact efficiency.

spacer

Urbana, when paired with Chaparral, shows its serious side (source text)

Urbana is also quite handy alongside an elegant and more calligraphic serif like Athelas. In this duet, Urbana can cover short sprints of utilitarian text like lists, subheads, and short paragraphs, and Athelas beautifully expresses longer texts and titles. When set small, Urbana has a much more rounded look, which contrasts with Athelas’s more angular features, but finds a companion in the serifed beauty’s more curvaceous italic.

spacer

Who says Urbana can’t do text? Athelas helps Urbana demonstrate its utility

In all, Urbana is a solid bet for charming headlines, boisterous pairings, or sensible bits of shorter text. Its excellent rendering and wide range of weights and styles make it a strong contender in the hunt for practical all-around faces. And while it can be talked into behaving well, there are faces that can bring out its lively side. With all these qualities, Urbana is one of the region’s most useful and respectable typefaces.

spacer

Nick Cox is a front-end developer and designer from Seattle, WA. He writes about web fonts and web typography at Everyday Type and @everydaytype. He is currently developing Archtype, a typographic reference for the iPhone.

Posted by Mandy Brown
Filed in About face
3 Comments »

Leitura News from DSType

January 31, 2012

spacer

Today we’re pleased to welcome DSType’s Leitura News to the Typekit library. Designed for editorial use, it comes in eight styles (four weights with matching italics), four of which have been manually TrueType hinted to render well at text sizes.

spacer
Top to bottom: Acta Display Black Italic, Leitura News Roman 3 (with italic ampersand), Roman 4, and Roman 2. (source text)

At larger text sizes Leitura News feels studious and bright. Its bold (Roman 4), with a bit of letterspacing, can be successful in short bursts at these sizes.

spacer
Velino Poster with Leitura News Roman 4 (subhead, sidebar) and Roman 2 (text). (source text)

At smaller text sizes Leitura News feels crisp and active, but also quiet. Even its more outgoing letterforms buckle down and do their jobs for the sake of the text.

Upgrade to a Personal Plan or higher to use Leitura News. If you’re already a paying Typekit customer, enjoy the new fonts! If you’ve never given Typekit a try, sign up (it’s free) and upgrade whenever you’re ready.

Posted by Tim Brown
Filed in New fonts
Leave a Comment »

Sites we like: from Warby Parker, Two Paper Dolls, and more

January 27, 2012

An extra large sites we like to get your weekend off to a good start.

spacer

Warby Parker’s 2011 Annual Report pairs Robert Slimbach’s Utopia with Mark Simonson’s Proxima Nova Condensed, and some nice CSS transitions.

spacer

The American Alliance of Unpaid Public Servants celebrates the First Ladies of the United States with Alternate Gothic No. 2 D and Garamond Premier Pro Display.

spacer

Contents — a new magazine at the intersection of content strategy, online publishing, and new-school editorial work — pairs Abril Display with FF Meta Serif. (Read why Typekit’s Tim Brown calls Abril one of his favorite typefaces of 2011.)

spacer

Love to knit showcases knit apparel made by hand in New Zealand, with the help of FF Tisa.

spacer

And last but not least, the United Pixelworkers are back with a new (stunning) design featuring their signature Hellenic Wide and Futura PT. Be sure to make your browser both small and large, as this responsive design performs especially well in the extremes.

That’s all for this week; share sites that you like in the comments.

Posted by Mandy Brown
Filed in Sites we like
1 Comment »

Screening for Linotype: The Film, Tuesday, February 21st

January 26, 2012

spacer

The Linotype’s unique 90-key keyboard.

Typekit is proud to be hosting the West coast premiere of Linotype: The Film, a feature-length documentary centered around the Linotype type casting machine. Called the “Eighth Wonder of the World” by Thomas Edison, the Linotype revolutionized printing and society. The film tells the surprisingly emotional story of the people connected to the Linotype and how it impacted the world.

Director Doug Wilson will be on hand to answer questions after the screening. Arrive early for drinks sponsored by Typekit. Tickets are on sale now, but space is limited, so act fast!

Posted by Mandy Brown
Filed in Events
Leave a Comment »

New from Typekit: Browse by list

January 25, 2012

Starting today, Typekit is rolling out a new way to browse fonts: lists. Lists have been curated by Typekit staff and feature an editorialized means of browsing. Each list features fonts organized by theme, intended use, or defining characteristic. Some of our favorite lists include a list of great rounded fonts, a list of fonts that are good for longform, and a list of condensed headline fonts.

spacer

New on Typekit: browse by list.

Lists are a great place to start when you aren’t quite sure what font you’re after. Need something casual, but aren’t sure what that means? Start with the this list of casual fonts and see where it takes you. Tired of Georgia, but don’t know what else to use? Check out this list of good Georgia alternatives. Looking for something with impact, but daunted by the number of choices? See which fat faces are our favorites.

spacer

A list of our favorite fat faces.

spacer

A list of great condensed headline fonts.

If you find a font you like, you can add it to your favorites or to a kit.

We’re starting with a small number of lists, with many more to come — take a look and let us know in the comments if there’s a list you’d love to see. Meanwhile, we’re continuing to work on a number of other projects, including improvements to search and more robust font detail pages — all of which will help you find and evaluate fonts quickly and expertly. Stay tuned!

Posted by Mandy Brown
Filed in Miscellany
5 Comments »

San Francisco Creative Mornings: Friday, January 27th, with Tae Kim

January 23, 2012

spacer

Typekit is proud to once again host the San Francisco chapter of Creative Mornings at our headquarters in the Mission. This week’s speaker is Anchorage native, Tae Kim, a former Design Director for The North Face and Timbuk2 and co-founder of Alite Designs — an outdoor company that makes it simple and fun for people to enjoy being outside.

The event is free, and breakfast is on us. But be sure to RSVP as space is limited. We hope to see you there!

Posted by Mandy Brown
Filed in Events
Leave a Comment »

Sites we like: Massive Health, Four Seasons, PandoDaily

January 20, 2012

Better healthcare, lodging, and tech news in this week’s sites we like.

spacer

Massive Health aims to make health tools that people love to use. Proxima Nova delivers both headlines and body text, its geometric shape and friendly air reinforcing the positive, accessible message.

spacer

Four Seasons combines Museo Sans, League Gothic, and Adobe Garamond for an upscale and chic look. Museo Sans’ wide, open letterforms contrast nicely with League Gothic’s condensed headlines, while Adobe Garamond lends a bit of sophistication.

spacer

And new tech site PandoDaily features ARS Maquette. We noted ARS Maquette last week as well; here it joins up with SuperClarendon (and a responsive layout) for a design that feels both smart and current.

That’s all for this week; share sites that you like in the comments.

Posted by Mandy Brown
Filed in Sites we like
4 Comments »

Freight Text from Phil’s Fonts

January 18, 2012

spacer

We’re thrilled to welcome another of Joshua Darden’s typefaces to Typekit: Freight Text Pro. Although it was designed for printed text, its calligraphic forms and tailored outlines translate beautifully to the web. It’s a smart, efficient serif for both short- and long-form reading.

spacer
Freight Text Book (source text)

Freight Text is available in six weights, each with a matching italic. Its four basic styles have been manually TrueType hinted to render well at text sizes, and the remaining eight styles are served with PostScript-based outlines for smooth rendering at larger sizes.

spacer
Freight Text Semibold Italic and Light

Upgrade to a Portfolio plan or higher for access to Freight Text Pro. If you’re already a Portfolio plan customer, enjoy the new fonts! If you’ve never given Typekit a try, sign up — it’s free! Upgrading is easy, whenever you’re ready.

Posted by Tim Brown
Filed in New fonts
2 Comments »

Sites we like: Michael James Milton, York Associates, DePauw University

January 13, 2012

Some lesser seen fonts and a classic pairing in this week’s sites we like.

spacer

Michael James Milton produces pocket squares handcrafted in San Francisco. The humanist sans serif, Open Sans, makes for warm body text, while the slab serif, Kulturista, provides a muscular counterpoint. (Oh, and the pocket squares are lovely, too.)

spacer

York Associates help their customers communicate professionally anywhere on the globe. ARS Maquette (available from ARS Type and transferrable to your Typekit account) is equally successful as very large headline text and small print. Paired with a monochromatic color palette, the effect is confident and impartial.

spacer

DePauw University opts for a classy look, with Adobe Caslon and Futura PT. Carol Twombly’s Caslon revival is traditional but not stuffy; in its company, the light weight of Futura PT is both elegant and academic.

That’s all for

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.