News: Tutorials

What Can Layer FontFonts Do?

Type is typically one-color. Of course, after it’s set, a user can manipulate letters with a texture or a gradient; but out of the box, a font is usually capable of a single color. This is where layer fonts change the game. With glyphs that are designed to be overlaid on top of each other, layer fonts make it easy to apply multiple colors and other effects without extra steps or leaving the comfort of your typesetting or layout app.


Layer_Hero_FF_Identification

 

Multi-layered type is not a new concept. “Chromatic” wood fonts for printing large headlines in two or more colors were common way back in the mid-1800s. Polychromatic type continued to be readily available in the photocompositing era when graphic designers sent their text to specialized typesetters to do the precision work required to line up the layers. When digital type took over, there was a noticeable lull in layered type. There were few chromatic fonts available, and making them work was now the complicated and tedious task of the designer who was suddenly given the additional role of typesetter.

But now, thanks to new typefaces (and rediscovering some old ones), better software, and time-saving tricks made possible by OpenType, chromatic type is back! Just a casual glance at graphic design blogs or Pinterest boards is enough to see that layer fonts are in fashion again.

There are plenty of interesting and useful multi-layer typefaces in the FontFont library — it may surprise you to learn we have more than 50 families with layering capabilities (even some Free FontFonts like FF Pullman and FF Koko) — but they are often overlooked because online samplers are optimized for standard, single-layer type. So let’s take a closer, multicolor look at a few and see what they can do.

What Can Layer FontFonts Do?
Make things pretty.

The most obvious use of type layers is to add decorative elements in multiple hues. A variety of FontFonts take advantage of layers to enhance their display qualities, from playful to grungy. Here are a few:

Layer FontFonts 
FF Beadmap, FF Minimum, FF Letterine, and FF Flava demonstrate the coloring possibilities of FontFonts with layers.

What Can Layer FontFonts Do?
Add depth and dimension.

FF Profile Layers 

One of the more powerful benefits of layers is transforming type from an element that simply sits on a surface to one that has a three-dimensional shape of its own. A single layer font with built-in shadows or faceting can only go so far in simulating depth. With a layer FontFont like FF Primary you can use color to give each surface an appropriate shade, making the type pop off the page or recede into stone. Over at the FontShop blog, David Sudweeks wrote a good tutorial on using FF Primary (and most other layer fonts).

What Can Layer FontFonts Do?
Add realism. 

FF Kipp Layers

FF Kipp, inspired by a worn set of wood type, is one of the most popular typefaces with a rough, weathered contour. Still, users often overlook its layer variations which can make it an even more convincing emulation of imperfectly printed or painted letters. The extra fonts in the set offer a variety of degradation when overlaid over the base fonts. These extras can also be colored slightly different than the bottom layer resulting in an uneven, painterly effect.

What Can Layer FontFonts Do?
Give text meaning.

FF MisterK Features

Layers aren’t only useful for visual appeal. Among the many smart tricks in FF Mister K are scribble, strikeout, and underline features that can enhance the meaning of text all while staying true to the informal handwritten aesthetic of the typeface. The OpenType-powered annotations are easy to apply, work with words of various lengths, and of course offer the ability to easily adjust coloring. Read more about how to use FF Mister K’s special effects in this info guide.

What Can Layer FontFonts Do?
Clarify text.

FF Jigger Overlays

One of the graphic designer’s often encountered but seldom discussed challenges is overlaying readable type on a photograph or video. This is particularly tricky when the background has varying values of light and dark. Common hacks include drop shadows and strips of color, but it’s often more engaging when the element backing the type is in harmony with the typeface. This is where FF Jigger shines. Because there are separate fonts for front and back, each can be colored independently. And because it’s type, changes to content or color are easy to make.

What Can Layer FontFonts Do?
Simplify iconography. 

FF Dingbats2 layering

Maps, infographics, UI design, and wayfinding systems ask a lot of iconography. To get the work done efficiently, icons must be easy to apply, easy to edit, and easy to change. That’s why working with symbol fonts makes so much sense. FF Netto Icons and FF Dingbats 2.0 offer frames and backgrounds to enable icon customization. Because these icon and border elements are separate characters they can each be colored separately. In FF Netto, key in the desired frame, apply its color, then key in an icon to align it perfectly inside the frame. FF Dingbats 2.0 uses an OpenType-powered layering feature to allow coloring of multiple elements in each pictogram without switching fonts (see above). Read more about this and the packages other features at the official FF Dingbats 2.0 site.

Using Layer FontFonts on the Web

You don’t need to limit your layer typography to print and images. Our friends at Typekit have written a simple CSS tutorial on using layer fonts in web design. For his article, Tim Brown demonstrates a chromatic typeface revived from the wood type era, but the technique will work with Web FontFonts like FF Prater Block, FF Advert Rough and parts of FF ThreeSix too.

permalink

You’re my favorite!

Whether you want to create a wish list of FontFonts, share a selection with a client or simply want to save some font-tastic favorites for viewing later; our faving function makes it exceptionally easy for you to compile and curate your own lists. 

You’re my favourite

Not only can you select single weights but you can also ‘favorite’ whole families. 

Want to find out what we’ve got on our wish lists? We asked some of our team to share theirs …

Fabian’s club promo list is great for anyone with an ear for music and an eye for design, and includes the graffiti-like FF Marker and the hardcore FF Imperial Long Spike.

Lucy’s selection consists of lovely and legible fonts – she uses the word lovely lots and is an avid reader (much to the detriment of her eyesight), so her list is all about FontFonts that are both of those things.

Ivo’s picks are perfect for logos. Spanning the whole spectrum of our library, with classics such as FF You Can Read Me to relative newbies such as FF Ernestine.

Last but not least, check out Christoph’s choices of Ampersands with attitude.

read more

IE10 unlocks CSS OpenType features for Webfonts

With Mozilla’s Firefox and Microsoft’s upcoming Internet Explorer 10, a significant step has been taken toward widespread OpenType feature support, which allows for things like discretionary ligatures in text and contextual alternates in display. Now with standards solidifying, a level of typographic sophistication previously unachievable anywhere will soon be realized. Ushering in the new browser, we share this demo page with live examples of OpenType features at work. (Note that unless viewed in IE10 or a recent version of Firefox or some other new-ish Mozilla browser, the demos won’t make much sense.)

We move ahead now to take a closer look into each of the examples, and discuss what’s required before we can get started taking full advantage of this new ability. Contextual Swashes: FF Nexus Serif

Contextual Swashes | FF Nexus Serif Italic is the most comprehensive font of the FF Nexus Superfamily, containing beautiful sets of swash letters for the beginnings and ends of words. Thanks to the Contextual Swashes feature, the swash variants of the letters appear automatically in the appropriate positions (as opposed to the “regular” Swashes feature, in which you would have to decide yourself which letters should be swashed).

 Stylistic Sets: FF Unit

Stylistic Sets | FF Unit holds the library’s record for Stylistic Sets: It has a whopping 14 sets to tailor the look of selected letters to your needs. (39 OT Features in total!)

Contextual Alternates: FF Mister K

Contextual Alternates | FF Mister K isn’t available as a Web FontFont yet, and if you switch off the Contextual Alternates feature on the demo site you’ll see why: It just makes no sense to use it without the connections and letter variants that give FF Mister K its special look.

Small Caps: FF Ernestine

Small Caps | FF Ernestine is one of the few FontFonts containing two sets of small caps: Small and Petite Caps (the only other Petite Cap FontFont being FF Atma Serif). While Small Caps are available as separate Web FontFonts now, Petite Caps only become accessible through browser OpenType feature support.

Discretionary Ligatures: FF Milo Serif

Discretionary Ligatures | FF Milo Serif is one of the FontFonts that go wild with extravagant ligatures.

Oldtyle Figures: FF DIN Round

Ligatures: FF Tartine Script

Oldstyle Figures and Ligatures | FF DIN Round and FF Tartine Script can actually look like this on your website right now! Unlike the other features shown above, Oldstyle Figures and Ligatures are included (if available in the design) in all WOFF Web FontFonts today. There’s one more feature we didn’t even mention on the demo page: The Kerning feature is activated for the whole demo page. It is most noticeable in combinations like “We” and “y.”, which just look more even with kerning. This feature is included in the current WOFF Web FontFonts and is applied automatically by some browsers.

read more

Swashin’ around with FF Nexus

When Martin Majoor designed FF Scala and FF Scala Sans between 1988 and 1994, the idea behind this was to design a serif, humanistic typeface from which a sans serif version would be derived. Martin called it: Two typefaces, one form principle. Ten years later, he expanded his idea of two typefaces, one form principle into four typefaces, one form principle, creating a new superfamily as a result. FF Nexus, today one of the most popular typefaces in the FontFont Library, borrows some of its structure from FF Scala, but adds the slab-like FF Nexus Mix and the monospaced FF Nexus Typewriter to the set.

FF Nexus and FF Scala

And as if FF Nexus itself wasn’t amazing enough, designer Martin Majoor made one of the styles stand out even more; FF Nexus Serif Italic comes with two additional swash alphabets:

Recently, while working on the Web FontFonts of FF Nexus, we decided to revisit the OpenType features of the OT versions as well. So our Type Department worked closely with Martin Majoor to achieve the optimum result from the revision.

“The happiest period in my type design life was when I worked on FF Nexus Serif Italic Swash. I found out that it is impossible to create one ideal series of swash capitals, so I decided to make two.”

“Even though my first typeface, FF Scala, is still more popular, FF Nexus is, in my opinion, the best typeface I have created so far. With FF Nexus Mix, I introduced a third family member in my type design philosophy, and I am happy that this slab version is not a stand-alone typeface; it feels best when accompanied by serif and sans.” says Martin Majoor.

A combination of the OpenType features Discretionary Ligatures and Contextual Swashes

FF Nexus Serif Italic: A combination of the OpenType features Discretionary Ligatures and Contextual Swashes.

It was a great challenge to translate Martin’s ideas into a well-performing OpenType font, but no matter if you prefer activating features or choosing from the glyph palette, in the end you'll see that we achieved maximum flexibility. This screencast shows you how it works:

permalink

The a|ɑ-Team

Every now and then we are asked for typefaces containing alternative characters – the first letter of the alphabet is especially interesting in this respect as the Latin script knows two forms of the lower case a: the double-storey a is one of the most distinctive letters in a typeface while the single-storey a is rather neutral and decent. So you can considerably change the character of a typeface by simply swapping just one letter.

a-Alternatives

Thanks to OpenType both forms can be contained in one font and the user can easily switch between the two forms (in applications that support OT layout features, like Adobe’s Creative Suite for instance). Many of the innovative FontFonts offer this opportunity:

permalink

Web FontFonts: Switch between numeral styles

FontFont Subsetter is a tool for optimizing and customizing Web FontFonts. The free service — found at www.subsetter.com— lets you significantly reduce the file size of your Web FontFonts in three easy steps to reduce bandwidth costs and make your websites faster. Our latest Web FontFont improvements allow you to use Subsetter to choose between proportional oldstyle figures and tabular lining figures. This tutorial explains how.

read more