So if you now want to know how a Swiss Army Knife is like our favorite font format, check out the new OpenType page on our support section. Last year we spoke to attendees of the PINC Show about OpenType, so if you prefer to learn in a more visual way, have a look at the slides from that presentation.

• What is OpenType?
• OpenType presentation slideshow
• OpenType presentation slides as a Flickr set

Full-featured text fonts include all four figure styles. Click the image above to see figures from
FF Scala Sans Pro, Adobe Caslon Pro and PMN Caecilia™ Std.

Oldstyle Figures

Oldstyle figures are Arabic numerals varying in height and position. Some sit on the baseline while others descend beneath the baseline. The 6 and 8 are commonly the tallest figures and the 3,4,5,7, and 9 descend below the baseline, while the 0, 1, and 2 are roughly the same height of the lowercase letters. This feature allows them to harmonize with other words on a page of text without becoming a distraction to the reader. So oldstyle figures are most appropriate in books or any running text. Oldstyle figures are also known as non-aligning figures, text figures or oldstyle numerals.

Lining Figures

Lining figures are derived from oldstyle figures. They are a modern style with all figures at a common size and position and even height as the uppercase letters (but sometimes smaller and lighter than the capitals). Today, most fonts use these as default. Lining figures sit on the baseline as opposed to oldstyle figures that appear at different heights and positions. They optically align along a height line and the baseline. The best applications are business reports, forms, tables or any place where alignment is crucial. Lining figures are also known as regular numerals or titling figures.

Tabular Figures

Tabular figures are mono-width, they align vertically and thus appear in documents that compare numerical data in columns. Each figure shares the same width and space on both sides.

Proportional Figures

Proportional figures are different in their total character width. They are spaced to fit together more like letters. For instance, the figure 1 is very narrow like the letter l and takes up less width than the number 6. Because their spacing appears more even, these figures are best in texts and headings where columnar alignment is not necessary.

Now that you know the differences between the two figures styles and their two widths, you know what to buy for your particular needs. Fortunately, some foundries (like FontFont) make it simple: every figure style that has been designed for a particular typeface is included in each purchasable package. OpenType, though, makes it even simpler. Most OpenType fonts include all available figure styles within a single font. So there’s no switching between fonts to get to the right figures. Read more about the conveniences of the format on our new OpenType page.

The OpenType format offers typographers more glyphs, and (sometimes) more confusion. As the FontFont library is converted to OpenType, premium fonts are continually released with advanced typographic features and language support built-in. With so many new releases we don’t expect you to keep up on which FontFonts can speak which languages. Just keep an eye on this post for the latest updates.

Learn more about OpenType in the FontFont OpenType User Guide (700KB PDF). More information, along with a list of FontFonts in OpenType format, can be found in this lovely leaflet (506KB PDF), including the lowdown on Std (“OT”) vs. Pro:

OpenType Pro FontFonts support a broader range of languages than OpenType Standard FontFonts. Supported language encodings include Central European, Greek, and Cyrillic. OpenType Min FontFonts support the same languages as OpenType Standard FontFonts, though some non-essential glyphs (such as mathematical operators and mathematical Greek characters) may have been omitted.

Here’s the OpenType FontFont language support table from the PDF leaflet for your handy reference (updated on July 7, 2008):

Sometimes, flat just doesn’t cut it, and we need to find other, more attractive ways to present designs to our customers. One technique I’ve been using recently works remarkably well for text, logos and other vector artwork. It consists of taking a virtual photograph of the work by combining Adobe Illustrator and Photoshop filters. The dramatic end result can’t be distinguished from a real photograph.

Create a type composition, logo or other vector artwork in Adobe Illustrator, or open an existing vector file. Make a selection of all the elements that need to be included in the perspective and group them (Edit > Group). For this example I used Gábor Kóthay’s Incognito, a gorgeous interpretation of calligraphy as found on ancient maps. The large “Perspective” is composed with capitals from the four variants Occidens, Septentrio, Oriens and Meridies.

Apply a 3D effect (Effect > 3D > Rotate…) and look for the desired perspective. I ended up with the following settings:

Rotation around the X-axis: 45°

Rotation around the Y-axis: -60°

Rotation around the Z-axis: 30°

Perspective: 120°

To achieve an even more convincing end result, we will simulate light depth. Create a background and apply a Radial Gradient (Gradient > Radial). Pick a light colour for the centre and a slightly darker tint for the outsides. Shift the 50% point outwards to 75% or even beyond, to ensure the background only slightly darkens near the edges.

Save the file as a PDF and open it at high resolution in Adobe Photoshop. Even if the image is intended for screen use, creating the image at high resolution and downsampling it to screen resolution at the very end will give far better results.

Create a new Alpha Channel (Channel > New Channel…) Fill this channel with a gradient from black to white. The orientation of this gradient is important as it will define the orientation of the depth effect.

Apply a Lens Blur (Filter > Blur > Lens Blur…) Activate the Preview option so you can see which effects the different settings resort.

Depth map sets the focal distance, that is which area in the image will be in focus. Select the new alpha channel as the depth map source: Source > Alpha 1. The Blur Focal Distance allows you to ‘slide’ the focal point along the black to white gradient in the channel – a low value means the focal point will be situated in the dark area; conversely a high value will have the focal point situated in the light area. I set the slider to:

Blur Focal Distance: 40

Iris lets you adapt the shape, radius, blade curvature and rotation of the iris. The radius is the value that determines to what extent the image is blurred as you move away from the focal point. My settings are:

Shape: Hexagon (6)

I don’t really know what Specular Highlights does and frankly I don’t really care, as I notice no change in the image when manipulating either Brightness or Treshold slider.

Noise restores the grain that is lost in the areas of the image where Blur is applied. You can determine the amount of noise and which kind. This is mostly useful when starting with a photographic image. As there was no grain in our original test image, don’t apply any Noise, lest you want to have noise in the blurred areas and perfectly smooth sharp areas, which looks very unnatural.

After applying Lens blur, add a smidgen of Gaussian Noise to simulate film grain and paper texture for authenticity, and you’re done.

The main advantage of this technique is that it allows you to take “photographs” of productions which are still under development, before even the first copy has been printed. Furthermore you have much more control over the end result compared to (digital) photography, as you are able to determine perspective and image depth accurately.

FF Headz is the first typeface by designer and illustrator Florian Zietz. The concept for FF Headz is similar to the effect found in some children’s books, where pages are split into sections that can be grouped in unusual and humorous combinations. For example, a crocodile head from one page might be paired with an elephant body from another page to form a new creature, the “crocophant.”


During a rainy afternoon in Denmark, Zietz began to design rough drafts of heads with his eleven-year-old niece, Sophie, and his nephew Jakob (age nine). The creative team used a Euro coin as a template. With just a circle as the basic shape, they created hundreds of heads in a couple of days. These heads were later used as a basis for digitizing the font.

Every “complete” head in FF Headz is made up of four individual characters (upper part of the head, eyes and nose, mouth, and chin). The number of combinations that can be created is “ten to the fourth power (ten thousand),” says Zietz. A few of these variations can be seen below.

All variants of each of the four components can be found on the four keyboard rows: the upper parts of a head are placed on the number keys: 1, 2, 3, 4, 5, 6, 7, 8, 9 and 0; eyes and noses can be found on e, r, t, u, i, E, R, T, U, I; mouths are on s, d, f, g, h, S, D, F, G and H; and chins lay on x, c, v, b, n, X, C, V, B and N. Have fun!

Robert Bringhurst’s “The Elements of Typographic Style” is the undisputed bible of typography, but its instructions are limited to print design. Richard Rutter is filling that need with “The Elements of Typographic Style Applied to the Web”. The new site will present Bringhurt’s principles one nugget at a time in a manner relevant to web designers. We can’t think of a better way to improve the way type looks and reads on the screen.

With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips from Erik Spiekermann, designer of FF Meta®, Meta Design founder, co-author of “Stop Stealing Sheep”, and a FontShop founder, which will prevent some of the more obvious blunders.

1. A CAPITAL MISTAKE
NEVER use CAPITAL letters to accentuate words in running copy. They STICK OUT far too much spoiling the LOOK of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals.

2. Connections
There are three different ways to connect or separate words: the hyphen -, the en dash –, a little wider than the hyphen, and the em dash —, wider still. The regular hyphen is easily accessible on any Mac or PC keyboard, whereas the en dash needs the combination option-hyphen on the Mac. The em dash is accessed by pressing option-shift-hyphen on the Mac. The use of these dashes depends on house styles and tradition. The em dash with no space around it is traditionally used to separate thoughts—like this one—but I think its length is a distraction in running text. Try using the en dash to separate thoughts – like this one – with a character space on either side. En dashes without space on either side are also used between numbers and compound words as in: the shop is open 10–7, while you can take the New York–Kansas City train or the New York–Baltimore train only 8am–3pm.

3. “ & ”
A dead giveaway for unprofessional “desktop typography” are wrong quotes and apostrophes. Quotes can have different shapes. They generally look like “this”, and can be remembered as beginning and ending quotes by thinking of “66” and “99”. Beginning quotes are found on the Mac by pressing option-[; closing quotes, option-shift-]. The apostrophe is simply a raised comma, the shape of a ’9 in most typefaces. It is identical to the closing single quote, while the open single quote looks like a ‘6. Beginning single quotes are found on the Mac by pressing option-[; the apostrophe and closing single quote, option-shift-].

4. Figuring It Out
Good text typefaces have “old style”, “text”, or “lowercase” figures – 1234567890 – instead of “lining” ones – 1234567890. Lining figures were originally designed to be used with setting of all capital letters. Lowercase figures blend in better with the text settings, as the figures behave like lowercase letters with ascenders (6 and 8) and descenders (3, 4, 5, 7, 9) and x-height-only characters (1, 2, 0). While they fit in text very nicely, the good looks have one disadvantage: each of the figures have individual widths, meaning they won’t sit directly underneath each other in columns. Their descenders may also clash with ascenders when the columns sit closely on top of one another, as happens quite often in tabular settings. Lining figures are, however, all the same width, making for a somewhat uneven appearance, as the 1 takes up the same space as the 8, but in tables, they are much easier to add up. Some fonts offer “tabular oldstyle figures”, which will allow table setting.
Read more about figure styles.

5. Joining Forces
A ligature is defined as the visual or formal combination of two or three letters into a single character. They consist of letter combinations such as ff, fi, fl, ffi. Ligatures keep letters from overlapping and improve legibility. For example: affluence, configure, deflate, affinity.

6. Not Justified
Avoid flush settings! Most applications create justified text by hideously stretching and squishing words and spaces. Note that it takes many hours of tedious work to typeset justified text that is truly well-proportioned and legible. For this reason, professionals prefer to use ragged-right composition, either with or without hyphenation, depending on how much line-length variation they wish to allow. This gives the text a more harmonious appearance and makes it easier to read, since all wordspaces have the same width.

7. Bite the Bullet
Use bullets or centered points instead of hyphens (-) when you list items. Bullets are part of the standard character set and are located in the following positions:
• option-8 (Mac), ALT+0149 (Windows)
· option-shift-9 (Mac), ALT+0183 (Windows)

There are quite a few quality “stamp” fonts available — Frankie and Frankie Dos, Despatxada, FF Stamp Gothic, FF Confidential, FF Bull to name but a few. Unfortunately ready-made stamp fonts present a number of drawbacks: repeating characters are identical, and the amount of detail is limited due to restrictions in the possible number of Bézier anchor points per glyph. To remedy this I developed a trick in Adobe Photoshop for distressing type. This technique allows you to apply a convincing stamped or weathered look to any typeface.

Create whatever type composition you need in Adobe Illustrator or directly in Photoshop. Just remember to keep the resolution fairly low, because we’re going to need pixel texture halfway through. I created this example in Illustrator using Tasse Black Extended at 96pt/72pt and opened it in Photoshop as a grayscale image at 72 ppi.

Select the black type areas with the magic wand or by using an alpha channel based on your composition. (Duplicate channel…: Black: invert -> Select…: Load selection: Black copy: new selection) This prevents you from mucking up the white background.

Apply a High Pass to “eat away” the insides of the characters (Filter: Other: High Pass…) Play a bit with the slider: for the example I set the Radius to 10 pixels and applied it twice.

Apply a fair amount of Gaussian noise to achieve the “grainy” texture. (Filter: Noise: Add Noise…: Gaussian) For the example the slider was set to an amount of 15.

Deselect.

Increase the resolution by resampling. (Image: Image size…: resample image) I doubled the resolution from 72ppi to 144ppi.

Diffuse the image to mask remaining bitmapping of the character shapes (Filter: Stylize: Diffuse…).

Increase to the desired resolution by resampling. (Image: Image size…: resample image) I doubled the resolution from 144ppi to 288ppi.

Apply a Gaussian blur of 1 pixel to remove the tiny pixels created by the Diffuse filter. (Filter: Blur: Gaussian Blur…)

Increase the Brightness and Contrast until you reach the desired amount of “inking”. (Image: Adjustments: Brightness/Contrast…) I set both sliders to +50. As the High Pass filter we applied at the very beginning primarily affects areas with substantial volume, I did a partial selection of the border and applied a higher amount of contrast (+75) to bring out more noise.

Threshold the image to prepare for conversion to a bitmap image. Here you can also play a bit with the slider until you reach the desired amount of “inking”. (Image: Adjustments: Treshold…) I set the slider at 96.

Here’s what it looks like from up close: the effect is perfectly random.

Convert to a bitmap image (Image: Mode: Bitmap…: 50% treshold), save as TIFF and import in your lay-out software of choice. You now have a compact sized graphic with transparent background that can be coloured and overlaid on any element in your design. Et voilà, you’ve just used $3,000 worth of computer equipment to emulate the look of a $3 rubber stamp.

The beauty of this technique is that at every step you can vary the settings, thus achieving different textures, and different amounts of wearing and inking. Remember that the initial resolution of the Photoshop type composition is crucial in relation to the crudeness of the end result, so experiment a lot until you get the desired result. Have fun.

When we see the expansive superfamily that FF Meta has become, it’s hard to believe its beginnings were so humble. As the family has known three different incarnations, there tends to be some confusion about which version is which. So let’s clear the air and explore the history of the most successful humanist sans of the previous decade, “the Helvetica of the nineties”.

Originally, back in 1991 when the second batch of FontFonts was released, there was FF Meta (Normal, Bold, Small Caps). One of the defining characteristics of FF Meta — and FontFonts in general — was the presence of hanging (or oldstyle) figures and additional ff-ligatures in the “regular” Normal and Bold weights, while lining figures were found in the Small Caps weight. The distinctive Meta arrow occupied the slots for the lesser-than and greater-than symbols.

The first expansion came in 1992 with FF Meta 2, adding three more weights (Italic, Italic Small Caps, Bold Small Caps).

FF MetaPlus (not “Meta Plus” as it’s often mistyped), released in 1993, was the big leap forward. It introduced three new weights — which effectively tripled the number of fonts to 18 — and included a fine-tuning of some characters (most notably a correction of the crossbar on the lc ‘t’) and revisions of spacing and kerning. The family at that point featured Normal, Book, Medium, Bold and Black weights, all in Roman, Italic, Small Caps and Italic Small Caps (except for the Black weight which didn’t include Small Caps). Still hanging figures in the ‘regular’ weights and lining figures in the Small Caps. The latter featured the Meta arrow, while lesser-than and greater-than symbols were added to the “regular” fonts.

Eventually, in 1998 it was back to FF Meta. This saw a reorganisation of the family into subfamilies: FF Meta Normal, FF Meta Book, FF Meta Medium, FF Meta Bold and FF Meta Black, all in Roman, Italic, Small Caps and Italic Small Caps, which all got coupled with their respective Expert and Lining Figures weights: yep, a whopping 60 fonts indeed. Biggest change this time was the addition of the Black Small Caps, and moving of the extra ligatures (ff, ffi, ffl which were previously in the “regular” fonts) to the new Expert fonts. And of course the Lining figures weights meant that you don’t have to switch between “regular” fonts and Small Caps fonts anymore to get the desired type of numerals.

Of course the story doesn’t end there, as the latest — and definitive — incarnation of FF Meta got subsequently expanded with foreign language versions, a Condensed family, additional light weights (Light, Hairline, and Thin) and just recently a group of Headline cuts.

So, to conclude — never mix the original six weight FF Meta with FF MetaPlus nor the new FF Meta family, as it has different spacing and kerning, and some redesigned characters. Substituting FF Meta for FF MetaPlus is recommended, but keep in mind that ff-ligatures will disappear and types of numerals might differ.

[ Editor’s note: If you’re stuck with old FF MetaPlus, there is a free upgrade path (minus a small handling charge) to FF Meta. Just have your proof-of-purchase handy and give us a ring. If you are involved in any sort of document collaboration we highly advise upgrading for two big reasons: 1. Using the most current font data consistently across your workflow is always best. 2. FontShop cannot guarantee the availability of FF MetaPlus in the future. — Stephen ]

It would be great if we could use any font we wanted in designs for the web. But since we’re limited to what’s installed on everyone else’s machines, creating an image is the only way to make non-standard fonts viewable online. Here are a few tips for creating a web graphic in which type is the main subject:

• When setting antialiased type in PhotoShop, experiment with the antialiasing settings. The best technique is dependent on the font, size, and colors involved, but I find “Crisp” or “Sharp” usually work best. “Strong” is bad news — it usually fattens the character shapes and you lose definition.
• Save as GIF or PNG. For images with flat colors, the JPEG format can create unsightly halos and noise, all at the cost of a larger file size.
• Use Flash only when necessary. Yeah, you can do some crazy wack animation in Flash, but save it for those jobs that really require intense motion and scripting. Type almost always looks better as a GIF. (Though I hear the latest version of Flash (8) has improved antialiasing.)

Ok, what about sIFR? Now that I’ve finished railing on Flash, I better mention that there’s a new technology that allows you to replace text elements with custom-styled Flash elements on the fly. It’s a pretty exciting concept with just a couple of caveats: the user must have JavaScript enabled and the Flash plugin installed. Also, I feel like sites that use sIFR take just a tad longer to load — but I’ll let you be the judge of that.

Update: Rudy of FontShop Benelux reminds me that Flash can be an excellent medium for displaying type — if it’s done right. His proof: the incredible OurType.com by Flash masters group94.