About Face: JAF Lapture

October 16, 2012

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

Lapture Heading

I have a confession to make. I’ve had my eye on Lapture for quite some time. Whenever it appeared in my Typekit searches, its stark and distinguished letterforms stood out to me. I was intrigued, and secretly hoped I would find a good excuse to give it a try.

If you’ve been intrigued by Lapture as well, wait no longer. This humanist serif from Typekit’s own Tim Ahrens, working under the Just Another Foundry moniker, is modeled after a cut of a face from a long-defunct East German foundry. And amazingly, this digitization retains the charm, texture, and roughness of old metal type.

Lapture’s letterforms exhibit an unmistakably historical tone, due in large part to their calligraphic leanings. Their unique blend of linear and carefully curved lines suggest a cut and carved aesthetic, but reference the pen slightly more than the counterpunch. Particularly notable is their gothic proportions, which call to mind a foreboding European cathedral.

Lapture detail

Up close, Lapture shows off its curves and angles. Also note the negative space of the counters.

Such a lineage and peculiarity would typically prescribe an extremely narrow range of use cases. Yet Lapture is remarkably versatile, given its range of styles: display, subhead, caption, and text, all with a generous helping of weights and matching italics. The humanist details are clear at large sizes, but when used as a text face, its eccentricities are more felt than seen, making it surprisingly suitable for use in setting paragraphs.

The Lapture Family

Lapture Display, Subhead, Text, and Caption. (source text)

In pairings, Lapture shows a strong preference for two types of fonts: humanist sans serifs, and blackletter typefaces. A moderately low contrast sans like Cora suits Lapture well: Cora politely yields to Lapture’s details that, when used as a headline font, beg to be noticed.

Lapture paired with Cora

Cora is neutral with just a hint of warmth, and supports Lapture well.

Cronos, like Lapture, exhibits a markedly human touch, and brings out Lapture’s visceral characteristics. In this duo, Lapture Display and Subhead set the historical tone, while Cronos upholds the medieval mood.

Lapture paired with Cronos

All too human: Cronos and Lapture are a personable pair. (source text)

The ever-popular FF Meta works extremely well alongside Lapture when used as a text face. The letterforms of both fonts are strikingly similar in spite of their differing genres. Meta’s slightly condensed width evokes Lapture’s analogous proportions.


Lapture demonstrates its rational side when used in conjunction with FF Meta. (source text)

For more historic applications, consider Lapture alongside a blackletter face. Though it can often be difficult to find a suitable companion for these flamboyantly Germanic fonts, Lapture shines in these pairings, and makes blackletter faces seem unusually practical.

Type Together’s Givry is one of the more lovely and readable of the blackletter fonts available today, but suitable complements are not readily apparent. However, Lapture deftly encourages Givry’s gothic flair, and shows its sturdy side as a text face.

Lapture paired with Givry

Lapture Subhead and Givry evoke notably medieval sensibilities.

Another of Just Another Foundry’s offerings on Typekit, Herb, technically falls into the blackletter category, but it has a more colloquial tone than some the other fonts in this genre. With it, Lapture shows that it, too, has a lighter side, and can offer a touch of humanity without evoking the baggage of 16th century Europe.

Lapture paired with Herb

Fun with the Middle Ages: Lapture Display and Herb show their lighter sides.

With its vast array of offerings in weights and styles, Lapture can handle any aspect of typesetting. So if you just need an extra hint of antiquity, try a decorated initial cap set in a blackletter face like Veer’s Baroque Text, and let Lapture cover both headline and text duties. It might be visually overwhelming to set even a few words in the ornate Baroque, but a decorative cap here and there can support Lapture’s already historical leanings.

Lapture paired with Baroque Text

A decorative initial cap extends Lapture’s historical feel. (source text) (image source)

At first glance, Lapture may look a touch too pronounced for everyday use, but we’ve seen here that it is actually quite a usable font that can convey a number of tones when set with the right companion. Curious? Start a new kit and add Lapture. You’ll be surprised at the range of typographic responsibilities it handles with finesse and old-world flair.

Nick Cox's portrait

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.

About Face: psType

July 23, 2012

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

psType set in Quatro Slab

In this installment of About Face, we’re going to take a closer look not at a single font, but rather at the offerings of a foundry. Southern California’s psType Foundry contributes a number of solid and versatile fonts (two superfamilies and an additional face) to the Typekit library. We’ll get an overview of the work, and offer a few starting places to get the creative juices flowing using psType’s fonts.

Designer Mark Caneso began psType to supplement his graphic design work at Pprwrk Studio with a typographic lab. His oeuvre contains nearly a dozen typefaces in several genres, of which five are found on Typekit’s shelves: Runda, Ratio and Ratio Display, and Quatro and its slab.

All of the psType typefaces

The psType fonts available on Typekit.

Runda

Runda exhibits an interesting mix of two diverse worlds: the geometric sans and the grotesk. In the light weight, Runda seems to draw a slight influence from the work of Adrian Frutiger; yet as the weights progress, Runda differentiates itself creatively. The result is a readable and flexible sans serif with a broad range of weights from light to black. One of the notable features of the face is its true italic, which offers a greater difference from the regular style than is typical.

Runda specimen

The Runda specimen shows a wide repertoire.

Paring Runda is an enjoyable task, given its generous number of weights and styles. As a titling face, Runda is loud and bold, especially when set in vivid colors. Yet it doesn’t steal the limelight: Runda is yielding enough to allow a pairing with a font with a strong personality (such as Bree Serif, below) to increase the emotional range.

Runda paired with Bree serif

Neutrality is an asset: Runda makes room for a unique serif like Bree.

As a text face, Runda lends a subtle, Swiss-inspired sophistication to a paragraph. When set with a titling face with a strong stroke contrast like Abril Display, Runda’s light weight and uniform stroke widths add distinction to any text.

Runda paired with Abril Display

Runda calls Frutiger’s Univers to mind, but maintains its own personality as a text face.

Ratio and Ratio Display

Runda’s more humanist cousin, Ratio, has a subtle flair that is more felt than seen at text sizes. Close up, however, the top of the stems of many glyphs reveal an angle of about 12°, lending an angular, modern feel to the font.



A closer examination of Ratio’s angular stems. Hover to view without annotations.

Try Ratio with a solid slab serif like Adelle. The latter’s sharp terminals but overall round letterforms accentuate and play off of Ratio’s angularity, making it appear at once rational and refined.

Ratio paired with Adelle

Ratio’s open counters look elegant in the light weight.

Ratio’s companion display font is slightly condensed, giving it a greater spatial economy. This allows you to bump up its size without sacrificing horizontal rhythm. It looks particularly strong, yet neutral when set in all caps, accepting a broad range of pairings. It can easily set the stage for a slab like FF Tisa Web Pro to shine.

Ratio Display paired with Tisa

Condensed, but not overly so, Ratio Display sits well at large sizes.

Quatro and Quatro Slab

psType’s final family, Quatro and Quatro Slab, are a bouncy and jubilant pair. Quatro comes only in an ultra black weight. Use 50px as a minimum size when setting this headline-only font, and it provides a much more well-proportioned and cohesive alternative to Gill’s eponymous sans at the same weight.

Words set in Quatro

Move over Gill Sans Ultra Black; Quatro’s more coherent and more fun.

Large and in charge, Quatro adds fun and flair to headlines. Throw restraint to the wind and set it huge as can be alongside a rounded sans like Museo’s, and Quatro shows its boisterous and bouncy side with a great sense of humor.

Quatro paired with Museo Sans Rounded

Quatro: you simply can’t get more fun than this without sacrificing readability.

Add slabs to Quatro, though, and the result is a surprisingly subtle font with many uses. Quatro Slab boasts a larger weight variety than its sister sans, and its uses are much more discursive.

Quatro Slab specimen

Angles, curves, and styles, oh my! Quatro Slab excels in a variety of situations.

Where Quatro is flamboyant, Quatro Slab is expressive, particularly in the italic. Set it with a geometric sans with uniform lettershapes like Faricy New Web, and savor the remarkable range of curves and angles on the terminals.

Quatro Slab paired with Faricy

Quatro Slab sports its eye for detail.

If you’re looking for a fresh new foundry to enliven your designs, start a new kit and experiment with psType’s offerings. Their variety, details, and range of personalities are sure to make a creative splash in your next design.

Nick Cox's portrait

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.

About Face: Prenton

May 29, 2012

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

Prenton

Spend enough time obsessed with type, and you begin to yawn halfway through the marketing blurb of new font releases. You’ll often hear a sensational new type family referred to as a “workhorse family,” suggesting that it can be used in myriad contexts, express a wide range of emotional tones, and perform reliably in text settings as well as headlines. You start to wonder if a font can really deliver on everything the copy seems to promise.

Prenton is one family that makes good on all these claims. Designed by British designer Roy Preston, Prenton offers four widths from normal to ultra condensed. Further, normal, condensed, and ultra condensed each contain five weights, normal with matching italics. As if that weren’t enough, add to this a lovely and elegant display variant, perfect for large and expressive headlines.

The weights of Prenton from light to black

The weights of Prenton from light to black.

Though Gill Sans is one of the most widely used and recognizable typefaces in use today, not everyone agrees that it is necessarily deserving of that honor. Under close scrutiny, the idiosyncracies of Gill’s eponymous face reveal some potentially curious aspects of the letterforms you may have taken for granted. Preston offers another take on one of Britain’s most celebrated faces; compared with Gill Sans, Prenton’s glyphs feel much more consistent in their details, giving the font a more harmonious feel.

Gill Sans (top) compared with Prenton (bottom).

Gill Sans (top) compared with Prenton (bottom). Compare the consistency of Prenton’s lowercase a and u exit strokes with the same glyphs in Gill Sans.

To round out Prenton’s already impressive resume, the humanist sans recently saw a vast improvement in its rendering quality, thanks to a hefty dose of manual hinting. Now, Prenton is safe to use virtually everywhere, from subtle paragraphs to loud headlines.

Now let’s take a look at some diverse text settings to demonstrate Prenton’s impressive versatility. Prenton Display Light looks elegant paired with LTC Bodoni 175. Bodoni’s extreme stroke contrast offers a stunning counterpoint to Prenton Display’s light and consistent weight. And because it is so light, Prenton Display offers the added benefit of allowing you to set it extremely large without overpowering the reader with boldness.

Prenton Display and Bodoni

Prenton Display and Bodoni are a sophisticated duo.

But Prenton isn’t exclusively about refinement and charm. Prenton Regular, for instance, boasts a weight range from light to black, allowing a surprisingly informal tone in the right context. Set with Prenton Condensed and Schoolbook Web, Prenton retains a conversational tone while communicating with ease and comfort.

Prenton and Schoolbook Web

Prenton and Schoolbook Web: a friendly twosome.

While Prenton is comfortable in the limelight, this unselfish sans doesn’t demand center stage. Combined with a couple of Veer’s retro fonts, Hellenic Wide and Corner Store, Prenton Condensed plays an excellent supporting role, even reinforcing the vintage feel of its partners.

And the award for best typeface in a supporting role goes to… (source text)

It’s hard to decide whether Prenton is more compelling in headlines or in body. Paired with an angular slab serif like Jubilat, Prenton’s understated roundness becomes more apparent, and it adds a substantial measure of personality to the mix. In this setting, the unique details of the glyph terminals like the exit strokes of the lowercase a and d really shine.

Prenton and Jubilat

Pairing with an angular slab serif allows Prenton’s curvaceous character to shine. (source text)

As a text face alongside Renaissance serifs like Adobe Garamond Premier Pro Display, Prenton keeps the tone from getting too stodgy. Its rhythm and generous counters, particularly in the lowercase a and the bowl of the lowercase g, keep the aesthetic fresh and dynamic without sacrificing professionalism.

Prenton and Adobe Garamond Premier Pro Display

It takes a special sans to feel as at home in the 16th century as in the 21st. (source text)

Adobe’s Caslon Pro is another excellent companion to Prenton. In this pairing, Prenton’s solid x-height keep the text readable and fluid, while highlighting Caslon’s historical and calligraphic details.

Prenton and Caslon

Prenton’s humanist qualities work beautifully alongside Caslon’s handwritten feel. (source text)

The Prenton family offers one of the broadest range of weights and styles in the Typekit library. And with its manual hinting, you can set type at virtually any size and in most any context in any member of the Prenton family without worrying about its rendering across platforms. As an alternative to Gill Sans and in its own right, Prenton shows a unique flexibility, handling any typographic challenge comfortably and reliably.

Nick Cox's portrait

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.

About Face: Ambroise

March 27, 2012

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

Ambroise Title in Black

This week’s installment shines the spotlight on Ambroise, an elegant serif titling face from Paris’s Jean-François Porchez. Porchez is a national instituion at this point in his career, having designed the faces for France’s leading news source, as well as the Paris Métro.

With Ambroise, Porchez continues the national tradition, developing the much loved style championed by the Didot family across 19th century France. This face has created an eponymous type classification (Didone), characterized by extreme contrast in the stroke widths; straight, bracketed serifs; and a natural elegance in the letterforms. Whereas many versions of Didot’s work could be seen in both headings and text, Ambroise’s vivacious qualities can only come alive when set large. As such, it is designed for use solely as a titling face.

Rather than a mere redrawing of Didot’s classic face, however, Porchez puts a distinctly modern twist on the romantic masterpiece. Five particular glyphs stand out as dramatic departures from the original: Q, K, y, k, and g. These glyphs are flamboyant and stark in comparison to the letters that are more faithful renditions of Didot’s own face, and though they create a new direction for the font, they still retain something of the original; Porchez’s Didot bridges the gap between traditional and unorthodox, understated and boisterous, classic and modern.

The word Quick set in Ambroise

The uppercase Q and K are uniquely Porchez.

Ambroise's y, k, and g

The lowercase y, k, and g are provocative reimaginings of Didot’s face.

If these features didn’t make it a provocative enough choice for any setting, it comes in a wide range of weights, each of which have their own distinct character. From light to black, Ambroise masters several aesthetics.

Ambroise, light to black

Each one unique: Ambroise’s five weights each have a distinct personality.

It is difficult to pair Ambroise with most serif faces — this creates a visually jarring sensation. Likewise, the often substantial contrast of humanist sans serifs is likely to compete with Ambroise’s thicks and thins. However, many slab serifs and geometric sans serifs complement it quite nicely.

Take Kulturista, for example. As a slab serif, its ovular counters create a geometrical contrast with Ambroise’s angular or rounded sides, while its blocky serifs reference its Didone partner’s straighter sides.

Ambroise and Kulturista

Ambroise and Kulturista are a shapely pair.

Adelle, a perennial favorite, is another lovely choice when coupled with Ambroise. Adelle elegantly covers the subheading or brief text duties, allowing Ambroise to radiate is charm. And Adelle’s subtle roundness references Ambroise’s voluptuousness and sensuality.

Ambroise and Adelle

For heading-subheading pairs, Ambroise and Adelle are a stylish duo. (source text)

A dependable workhorse like Chaparral works well with a wide variety of faces, but it can really accentuate Ambroise’s elegance, supporting the French classic’s tone of sophistication and formality.

Ambroise and Chaparral

Chaparral allows Ambroise to be its cosmopolitan self.

The rounded quality of geometric sans serifs’ letterforms, on the other hand, plays an excellent counterpart to Ambroise’s hints at a subtly rectangular form. The distinct roundness of Proxima Nova creates this contrast while its cleanliness and readability amplify Ambroise’s modernity.

Ambroise and Proxima Nova

Around and around: Proxima Nova demonstrates how well geometric faces work with Ambroise. (source text)

The geometric shape of Museo Sans is much more understated than that of Proxima Nova, and, when set with its Didone companion, Museo Sans makes a great deal of room for Ambroise to take center stage. Museo Sans’s unassuming accompaniment allows Ambroise to truly sing as the French face is designed to.

Ambroise and Museo Sans

Museo Sans supports Ambroise in its lead role.

Finally, one of the joys of working with a typeface with such a sense of whimsy and personality is discovering the unexpected pairings it encourages. Calluna Sans has proportions reminiscent of the great Renaissance serifs, which should clash with Ambroise’s romantic sensibility. And yet there is a beauty that the pair create that has a certain je ne sais quoi.

Ambroise and Calluna Sans

Hard to say exactly how, but Calluna Sans looks gorgeous with Ambroise.

Its beauty, flair, and panache make Ambroise a charming and classy choice in many applications. Again, keep in mind that it is designed for use exclusively in titling applications; its thin strokes vanish at smaller sizes. But use it large and sparingly for short texts, and Ambroise will evoke all the romance, refinement, and posh qualities we’ve come to love and associate with France.

Nick Cox's portrait

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.

About Face: Urbana

February 1, 2012

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

Urbana

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.

Urbana

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.

Urbana

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.

Urbana rendering on Safari vs IE6

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.

Urbana paired with Abril Text

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.

Urbana paired with Le Monde Courrier

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.

Urbana paired with Proxima Nova Soft

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.

Urbana paired with Bello

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.

Urbana paired with Chaparral

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.

Urbana paired with Athelas

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.

Nick Cox's portrait

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.

About Face: Gesta

December 14, 2011

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

Gesta

In this installment of About Face, we’ll consider a versatile, low contrast humanist sans serif by Portuguese type designer Rui Abreu. If his recent win at Letter.2 for the lyrical serif Aria is any indication, Abreu knows type. And Gesta is no exception.

With its generous x-height, Gesta is remarkably legible. And thanks to its manual hinting, it renders well across platforms and browsers, which makes setting it at small sizes a sure bet.

Gesta has a generous x-height

Gesta’s x-height extends to about 70% of the cap height.

Also notable is the large range of weights and styles in Gesta’s repertoire. Four weights with matching italics promise to tackle most any situation facing the modern web designer. What’s more, Gesta is designed with a feature called weight duplexing. The same glyph in two weights of the Gesta family are exactly the same width, which gives it a balanced sense of proportion. This allows for the mixing of, say, regular and bold in the same sentence for adding emphasis without detracting from the text.

Gesta's proportional goodness

All four weights of Gesta take up exactly the same horizontal space. (source text)

If you’ve been looking for a face with excellent language support, Gesta is a solid option. We likely have Abreu’s Portuguese heritage to thank for the way Gesta handles diacritics. Given a touch extra lead, Gesta performs beautifully with most any European text, and, relying on its manual hinting, accents strewn below the baseline and above cap height simply refuse to be marred by even the harshest rendering conditions.

Side-by-side French and English texts set in Gesta

Gesta, ever the polyglot, reads well in any language. (source text: French, source text: English)

Yet even in light of all this attention to detail, perhaps the most subtle aspect of Gesta’s design is its slightly curved strokes. Reading about these strokes in Gesta’s description, I was intrigued, but even after a good bit of experimentation, I found the curvature to be more implied than overtly visible. My curiosity got the better of me: as seen below, a closeup of the Bézier curve of the uppercase W of the bold weight shows just how understated these curves are. It is this characteristic that gives Gesta its warm, friendly feel without sacrificing its modernity.

A closeup of the curve in Gesta's uppercase W

The extremely slight arc in Gesta’s W. The control point (the bold +, top center) meeting the stroke would render a straight line. Here, the slight angle of the bézier curve control line away from the glyph stroke creates a gentle curve.

In pairing considerations, Gesta brings this affable character to the table, particularly when placed alongside an equally warm face like Jan Fromm’s Rooney Web. In this duo, the two fonts play off each other and exude a childlike liveliness.

Gesta paired with Rooney

Gesta and Rooney romp together with downright exuberant consequences. (source text)

Gesta truly shines as a text face, as its pairing with Museo Slab demonstrates. In this couple, the roundness and angular serifs of Exljbris Font Foundry’s Museo Slab lend both similarity and difference to Gesta’s curvy letterforms, and the result is a balanced, casual feel.

Gesta paired with Museo Slab

Dinstinct, yet similar: Gesta paired with Museo Slab. (source text)

A bouncy, jovial serif like Darden Studio’s new-to-Typekit Jubilat rounds out the slab pairings for Gesta. Here, Gesta’s round qualities egg on Jubilat’s cheerful whimsy, expressed in its ball terminals and stroke contrast. But Gesta keeps Jubilat in check with its mature, modern sensibility.

Gesta paired with Jubilat

A Jubilant mixture: Gesta paired with Jubilat. (source text)

At the risk of asking the obvious, why not pair Gesta with Gesta? Though its strongest qualities shine most when used for text settings, Gesta speaks loud and clear as a headline font. In this context, the flexible sans makes evident its ability to play every role in the text setting. Headline, body, bold, italicized. Gesta wears many hats, and does so comfortably.

Gesta paired with Gesta

A natural match: Gesta used for both headlines and body copy. (source text)

When setting headlines in Gesta, consider a text face that will accentuate its qualities. A rounded serif like FontFont‘s iconic FF Meta Serif echoes Gesta’s rotund shape while asserting its own reputation and legibility to offer Gesta a surprisingly straightforward and direct quality.

Gesta paired with FF Meta Serif

Who says Gesta can’t be serious? Paired with FF Meta Serif, Gesta shows its mature side. (source text)

A number of other serious faces can tease out Gesta’s maturity in this way. When paired with a Renaissance typeface like Adobe’s revival face Minion Pro, Gesta finds a frank and classy companion. Minion’s stroke modulation contrasts with Gesta’s comparatively unvaried widths. Both fonts have a distinctly human feel: Minion in its reference to scribal writing, and Gesta in its engaging and bright demeanor. Together, the pair communicate a uniquely sophistocated and personable atmosphere.

Gesta paired with Minion Pro

Two takes on humanity: Headlines set in Minion Pro and body copy set in Gesta. (source text)

Gesta is a delight to work with under any condition. And given how well it reads, renders, and pairs with a wide range of typefaces, it is sure to get more and more attention as setting text on the web becomes more and more demanding. Fire up a new kit, add Gesta, and find out how this excellent sans can add life, freshness, and versatility to your designs.

Nick Cox's portrait

Nick Cox is a front-end developer and designer from Seattle, WA. He writes about web fonts and web typography at Everyday Type and continues the conversation on Twitter at @everydaytype.

About face: Caflisch Script

November 2, 2011

Today’s About Face was written by Tiffany Wardle, a typographer and graphic designer currently living and working in San Jose, California.

In today’s installment for About Face I hope you will join me in admiring the much underused Caflisch Script. Caflisch is a casual chancery originally designed in 1993 by Robert Slimbach and based upon the handwriting of Swiss typographer Max Caflisch.

Four weights, from light to bold.

A well-designed sans or a serif typeface can usually fulfill all kinds of basic typographic tasks. On the other hand, Caflisch — a contemporary take on a calligraphic writing style — must be used more sparingly and with practiced restraint. This means not using Caflisch in long paragraphs of running text like you might find in a book. However, because of its large x-height and low contrast — used in tandem with the right line length and line-height — you can get away with shorter paragraphs to add some varied typographic color to your design. And besides, why would you want to use it at small sizes? You’d lose all of the beautiful detail!

Notice how the a leads into the r, or the d to the s.

Caflisch is a script designed by someone who practices calligraphy and understands the natural flow of the hand. The connections are all natural and properly articulated. There are no sudden switches in direction or unnecessary and conflicting swashes.

Even the exit strokes in such letters as the y and p fade as if the pen were lifted off of the paper.

Using a script it is not unlike using spices: you just need to know when to put the shaker down. The key is to choose companion typefaces that don’t compete for attention.

Caflisch Semibold and Cronos Caption Regular and Italic

For instance, I could easily see Caflisch paired with Cronos and used for effect as the jaunty, devil-may-care handwriting style of an online journal for someone who is well-travelled and knows a thing or two about packing light.

Caflisch Light and Regular and Arno Regular

Or perhaps paired with Arno Pro for an online daily menu of a punctilious, un-pretentious chef de cuisine at the corner bistro with that amazing plateau de fromage and melt-in-your-mouth pâte brisée.

Caflisch Bold and Kepler Bold, Regular, and Italic

Even paired with Kepler to add a bit of approachable, descriptive character to a business’s online annual report, monthly newsletter, or portfolio review.

Finally, with the trend for historic pastiche, I think Caflisch has been a missed opportunity to recall the days of yore when people cared about their handwriting. I see Caflisch located dead center in the sweet spot between school girl casual and uptight Spencerian — a friendly and informative script.

Type. Typography. Design. History. Travel. Music. Movies. Food. Friends. Family. Love. Not always in this order. @typegirl

In this latest installment of About Face we look at a sleeper sans serif, FF Basic Gothic, by Hannes von Döhren and Livius F. Dietzel. I’m calling this one a sleeper because it’s so simple that it’s easy to miss, but take a closer look and you will find the magic. As the name implies, FF Basic Gothic is a reductive sans serif that aims to include only the most necessary strokes. But despite that minimalism, FF Basic Gothic comes off with a playful wink.

FF Basic Gothic is pretty straightforward, but a few characters give it a nice bump in personality.

While seemingly simple and straightforward, there’s a touch of whimsy sitting just beneath the surface. Look at the little curled tail on the lowercase “a.” It comes up just a smudge too far, as if to say “you’re not the boss of me!” Similarly, the crossbar on the lowercase “t” sits high like an old man’s pants, and the descenders on the lowercase “j” and “y” hang lower than needed, like when you lazily dip your toes in the water from the edge of a pool.

FF Basic Gothic is well suited for body copy. (source text)

All of that character doesn’t overwhelm when FF Basic Gothic is used at text sizes, but it does add a small quality of delightful informality to the text.

FF Basic Gothic is a sturdy and legible sans serif, following comfortably in Verdana’s well worn footsteps. And like Verdana, it has a healthy x-height and is just a touch on the wide side, both of which add up to more body for each letter. That extra body really shines at text sizes.

When used large, those features come to the forefront. Basic Gothic works well as a nice headline choice too, with weights ranging from light and delicate to big and chunky.

And because FF Basic Gothic is versatile enough, you can easily combine different weights and styles for headlines and text.

FF Basic Gothic, paired with FF Basic Gothic!

If you’re looking for more variation, you’ll find FF Basic Gothic stands up to most anything you can throw at it. Try a script with some flourish like Bistro Script, or something slightly condensed, like FF Meta Serif.

Bistro Script for the headline and FF Basic Gothic for the text.

FF Basic Gothic for the headline and FF Meta Serif for the text.

FF Basic Gothic is a bit of an anomaly. While most sans serifs can feel forced in running copy, FF Basic Gothic holds its own, never feeling too obtrusive or subtle. It has a knack for just feeling good — no small feat for a humble sans serif.

About face: Ratio Display

September 7, 2011

For this installment of About Face, I chose a typeface that depends a bit more on situational use: Ratio Display by psType. The regular Ratio is a wonderfully warm sans serif with humanist leanings (meaning, it has a slightly more organic feeling, as though you can see the presence of the hand that made it), plus a touch of a geometric sans serif. The display end of the Ratio family is slightly more condensed, making for a space-saving headline font.

The non-display Ratio family on the left and Ratio Display on the right.

The regular Ratio is a robust family, great for providing a little touch of personality without overwhelming your content. But Ratio Display poses some interesting possibilities. It appears in five weights, from light to heavy, and, as the name implies, is intended for display use. “Display” is one of many terms sometimes used to communicate that a font should only be used big.

Why do we even need displays weights? Most typefaces that were designed for paragraph sizes work best at those sizes. But when you size these fonts up to use as a large headline, all of the design considerations that make it such a good text face become less appealing. Odd contrast in the strokes, larger spaces between letters, and more, can make a font readable and pleasant in running copy, but prove distracting when enlarged.

Compare Ratio Display as both headline and text on top, and normal Ratio as headline and text on the bottom. (source text)

On the other hand, display faces are intended for large use, so they can have more decorative features, higher contrast, tighter spacing, and shorter descenders (to pack those lines together for some nice density). As you can see above, normal Ratio looks good for body copy, but feels a bit horsey for headlines. Inversely, Ratio Display looks great large, but you’d never want to use it at text sizes.

Ratio Display is particularly lovely because we have several options for display use. The heavier weights are very thick and can create nice dense headlines to really grab attention, while the lighter weights can be used for a softer, more austere feeling. For my money, I think bold is a no-brainer for headlines, but soft can really make a design sing. I love the way a light headline used large can provide an alluring contrast to body text. And because it’s a little more condensed than the normal Ratio, we can make it a little larger for some added impact.

Ratio Display, livin’ large.

Since we’re looking to use this large, we have some leeway for text faces. It can be difficult to successfully pair two sans serifs together without creating something visually jarring, so let’s look at some serif parings.

Look at the wonderful contrast between the bulkiness of the heavy display weight and the jutting angles of Anatoletype’s Acuta.

Ratio Display Light and Acuta. (source text)

Playing off the softer association with the light display weight, we can pair Ratio with Jan Fromm’s friendly rounded serif, Rooney.

Ratio Display Heavy and Rooney.

There are many fonts that have display variants. Knowing the right kind of typeface to use for a given situation allows you to fit the content to the context — making your designs better as a result.

About face: Chaparral

August 15, 2011

In our latest installment of About Face we take a look at Carol Twombly’s masterful slab serif Chaparral. I call it a slab serif, but it’s actually more of a hybrid of a classic roman book serif and a slab. “Roman” generally means “upright” when it comes to type, the best of which (usually serif faces) we’ve read for centuries in books. You can identify a slab serif due to the widths of the serif strokes (generally, when serifs are equal or greater in thickness to the normal stroke weight, you’ve got a slab).

Notice how the serifs are about the same width as the main strokes.

Conventional wisdom says to avoid hybrids; often, in trying to do multiple things, a hybrid will miss the mark at everything. Unlike your old TV/VCR combo, however, Chaparral is a wonderful exception to this rule. It combines the legibility of a nice roman serif with the distinctive authority of a slab serif, and does so with a grace that most typefaces can’t touch.

The key to Chaparral’s beauty is in its combination of flowing curves and powerful angularity. While some slabs can feel a bit more beefy and boxy, Chaparral takes a cue from book types of yore by keeping the contrast low; as a result, it works exceptionally well in running text, by varying the stroke widths only when necessary.

Notice the way the curves taper and expand.

By combining those qualities, Chaparral makes for a great text face. But it comes in a variety of weights to keep things interesting. The lights are delicate and wispy (making for some really stunning headlines) and the heavier weights bulk up while still retaining a soft look (perfect for emphasis that doesn’t need to shout). When used large, some of the details really shine. Look at the subtle angularity of some of the letterforms.

From light to heavy, Chaparral has charm in spades.

Chaparral is a good meat and potatoes typeface, providing flexibility for use at most any size and subject matter. It really shines as a text face, but doesn’t knock you over the head. It’s professional, but more playful than stuffy, like a nice suit with a bright red tie and sneakers. And it really stands apart from the serifs most folks are used to seeing. You can see it used very well for running text over at Stories & Novels.

Compare Times New Roman (top) and Chaparral (bottom). (source text)

Plus the italics are really lovely, especially in the middle weights like the semibold. Even the heavy italics have a surprising charm to them.

Some of Chaparral’s italics.

And Chaparral comes in a variety of optical sizes including Subhead, Display, and Caption to help you really tailor your typography for the appropriate size. If you’ve never used optical sizes before, the names should give you a pretty good idea of their intended use. The designs of each optical size is adjusted for the best possible display at that size. For example, Chaparral Display has slightly more decorative lines and higher contrast, as is appropriate for shorter bursts of text at larger sizes.

Some of Chaparral’s optical weights.

Because Chaparral is a hybrid (roman book meets slab serif), some good options for pairings can be found by taking those siblings and finding typefaces that embody them fully. Play off of those slabs with something boxy and geometric like CamingoDos.

CamingoDos headline with Chaparral text (top), Chaparral headline with CamingoDos text (bottom).

Or contrast it more heavily with something very round and flowing like Bello or the bubbly Bree.

Bree headline with Chaparral text (top), Bello headline with Chaparral text (bottom).

Chaparral is one of those quiet typefaces that you could easily miss at first blush, but it will win you over with its beauty and high versatility. It’s quickly become one of my favorite typefaces.