Theresa dela Cruz

I’m a big fan of Ingela P Arrhenius’s illustration work, so I was excited to see that she’s recently developed a 2D puzzle featuring a cast of characters drawn in her signature style.

Yea! It’s a piñata day! We miss Mexican food here in Paris since it isn’t as readily available as back home so we started having Taco Tuesdays where my friend Rubi makes amazing homemade tacos. Last night we got together and I made everyone their own personalized mini piñatas. There was one at each person’s plate filled with treats and surprises. You just open the flap on the bottom to remove the treats. So fun!

Materials Needed: Cereal boxes, scissors, exacto knife, crepe paper in folds, tape, glue

Step One: Draw a picture of the donkey on a cereal box and cut it out with scissors. You need one for the front and one for the back of each pinata. Then cut out long strips from the cereal box about 1.5″ thick. Tape the front and the back together with the strip. (See more detailed instructions here.)

Step Two: Once your armature is built its time to decorate. Cut off the end of the crepe paper fold and cut on one side to create the fringe. Add lines of glue starting at the bottom. Then glue on the fringe, wrapping it around the pinata until its all covered.

Step Three: When you are done cut a trap door at the bottom to fill with treats like small candies, gifts, party poppers, and confetti. Guests can choose to use the little door or can take it apart anyway they like to get the goods.

I loved making these! They were ridiculously fun to work on. Next time I’ll make the ears separate but I started making them late at night so I didn’t think of it until the next day when they were close to done. I also experimented with tails but I thought it looked better sans tail so I left it as is.

You can find the other piñatas in my piñata series right here.

All photos by Oh Happy Day

This American Life USB Drive
• $29.00
• This American Life

Looking for a great gift for the NPR nerd in your life? How about a 2GB flash drive shaped in semblance of the This American Life logo and filled up to the digital brim with 35 hours of what we personally consider the best show on the radio waves today. Handpicked by our favorite radio waves storyteller, Ira Glass, the drive also includes a hour and a half of video from the 2009 radio show (but sadly, does not include the *wink* Ira Glass sex tape episode, Ain't Too Proud to Craig).

by Ludwig Übele

A line of text is like a silhouette on the horizon. Closer inspection reveals the detail, the trees, bushes, rocks; details that, though only vaguely perceivable from afar, create both rhythm and variation. The beauty of this landscape is born of both regularity and variety.

I chose Tundra as the name for my new serif typeface not during the design process, but from the outset. I had in mind this idea of a wide and flat landscape. This was the initial idea: Tundra should lead the eye effortlessly along the line, thus emphasizing the horizontal. This would have been rather easy, since a typeface with comparatively wide proportions would achieve this quite naturally. But I also wanted to create a useable, legible typeface: somewhat compact or condensed so that it might also serve well for narrow columns and space-starved headlines.

In the first sketches Tundra had asymmetrical serifs to accent the reading direction. Somehow it looked cropped (mutilated), especially for the capitals.

A typeface has two principle directions: The horizontal, the line, which the eye moves along; and the vertical of the individual characters, defined predominantly by the stems. The stems are responsible for the rhythm of a typeface, while the curves (bowls, instrokes, outstrokes, etc) determine its character. In general, the narrower a typeface becomes, the less distinctive it is. A narrow typeface creates a picket fence or staccato effect, a line dominated by closely spaced stems. This is tiring and dull, and does not make for easy reading. The same occurs when the distances between the stems is too generous. So my main question was: How could I create a rather narrow typeface that best emphasizes the round parts and the horizontal line? How could I optimally adjust these two directions?

Warm and open

The most important parts of a typeface are the zone at the base line and even more at the x-height. Here reside the more complex forms (in contrast to the middle parts, which are usually only the vertical stems).

As a counter movement to the stems, which are more dominant the more narrow the typeface becomes, I tried to emphasize these two lines: the base line and the x-height. I made the general contrast rather moderate. The serifs are strong and flat. I also drew the shoulders (n, b) flat and strong.

Some characteristics of Tundra: moderate contrast between thick and thin parts, flat and strong serifs, diagonal stress, open and heavy terminals, flat and strong shoulders.

The diagonal stress moves the thick parts more to the horizontal. The terminals (a, c, e) are heavy and the apertures open. The letters c and e — owing to their contrast — could almost be part of a sans serif typeface. Open forms also permit more interaction between the letters. All these elements help to create even lines that make reading easy and comfortable.

Above: Comparison of narrow type: closed and open letterforms.

The italics have no curved head and terminals, but serifs, to emphasize the baseline and x-height.

Of course reading is much more complex than these very simple considerations. Why a typeface is legible, why it appears fresh or lively is much more complicated and difficult to specify. Rhythm can’t be reduced to a fence pattern. And to create harmonious letterforms it’s much better to follow your own feeling for forms rather than follow rules. Very often I’m unable to point out why I like a typeface and why it creates an enjoyable image of text; or, conversely, why it fails. Therefore, I try to track my own eye, and how it describes a path through the text, across the line, and through the words. Is it a pleasing and fluid movement, or does it stutter and stall? But still I can’t precisely describe why a typeface works. Usually I try make forms clear and distinct. I was never much interested in playful details (which you can’t see at small sizes anyway). I think a good typeface must be more than a selection of interesting (and more or less pushy) details. It needs a design vocabulary of its own. A good text typeface should be concerned with producing interesting and lively texts, rather than interesting and lively characters.

When I designed my typeface Marat, I also drew a super black version, and – unusual for a classic serif typeface – it works very well. For Tundra the opposite is true. It appears that this particular construction prefers lighter weights.

The lighter a typeface the more linear its stroke. The Extra Light weight has much less contrast between thick and thin than the Bold. The thin parts of the Extra Light and Regular are almost equal.

The reason might lie in the moderate contrast of the letterforms. So I drew Light and Extra Light weights and reduced the contrast yet further. In my opinion, many thin contemporary Old Face types contain too much contrast. Maybe its caused by extrapolation, I don’t know.

I’m not a friend of fonts with thousands of (interpolated) weights flooding the font menu. I try to graduate the weights very carefully and appropriately for the particular design.

Tundra comes in six weights from Extra Light to Bold, accompanied by italics and small caps. The Pro character set contains letters for all major languages using the latin alphabet.

Different numerals and various other OpenType features provide advanced typographic performance. There is one thing I want to point out, a composition problem often occurs for certain character combinations, mainly f and y.

For problematic combinations Tundra contains alternate characters or ligatures (blue).

For this reason Tundra contains ligatures and alternate letters. A common problem is f followed by an accented character. In this specific case a narrower f applies automatically via OpenType’s contextual alternates feature. For g y there also exists a ligature. For more details check out FF Tundra on the FontFont web site.

Tundra has been selected by the Type Directors Club of New York to receive the 2011 Certificate of Excellence in Type Design.

FF Tundra full character set.

You can find more of Ludwig’s work at ludwigtype.de and follow him on twitter. Back in 2008, I interviewed Ludwig for ILT.

If you’d like to read this article set in FF Tundra web fonts, thanks to FontFonter you can. Hat tip @TimAhrens

Sponsored by H&FJ.

The making of FF Tundra

Type study is an ongoing series of guest posts about typography on the web. In this article, we hear from Russ Maschmeyer on a nifty trick for creating a responsive 3D text effect.

While perusing the Lettering.js website, I saw this example post by Trent Walton. When I saw that dynamically-generated graphic and the words “My site is responsive,” I assumed those letters would fold and unfold like an accordion to accommodate any browser width. Suddenly all seemed right and good in the world.

Trent Walton’s inspiring blog post.

Alas! As I pushed and pulled on my browser’s window pane, the graphic folded not. But what a great idea! Why hadn’t it been done? My life had new purpose. The result was foldup.js.

Foldup.js works with jQuery and Paravel’s Lettering.js to create an adaptive folding and unfolding effect for headlines, body copy, or any other text deemed worthy. Let’s walk through how to use it.

Example

Before we begin, let’s see it in action; the demo works in Safari, Chrome, Firefox, and Opera, but not Internet Explorer. (Think of it as an experiment.) Be sure to stretch and squish your browser’s window pane to really get the full effect.

The demo, at a wide browser width.

The demo again, but at a narrow width; the letters fold like an accordion.

Getting started

The goal is to get this working with as little HTML as possible, so, we’ll start very simply:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div id="page">
      <p class="stranger foldup">Hello World!</p>
    </div>
  </body>
</html>

We’ve created an <html> document, added a generic style sheet called style.css, and created a <div> element which will become our page within the browser window. Finally, we’ve included some paragraph content that we’d like to fold up, and added a class of foldup to that paragraph. This will allow us to identify which elements on the page we actually want to fold up.

Adding style

We’ve got our content marked up, so it’s time to add some CSS so that our letters and words look and behave properly.

First, we’ll set the body background to orange (#ffa500) and declare our font stack — featuring Brevia, plus some appropriate fallback fonts. Next up, we want to set up a responsive, centered page to put our text in. We’ll give our #page element a width of 80% and center it with margin: 0 auto.

body {
  background-color: #ffa500;
  font-family: brevia, helvetica, verdana, sans-serif;
}

#page {
  width: 80%;
  margin: 0 auto;
}

Next, we’ll style the element to be folded up. In this case, we’re going for large, uppercase, and center-aligned for our folded letters.

.foldup {
  text-transform: uppercase;
  font-size: 3em;
  text-align: center;
  color: #FFF;
}

Now for the fun part. Lettering.js will dynamically wrap each word in its own span and label them sequentially (e.g. .word1, .word2, .word3, etc.). We can then use the child selector (.foldup > span) to style every span element within .foldup without having to know how many there are going to be. We’ll also set a display property of inline-block to keep long words from breaking into two lines and use margin: 20px 10px to set both the line height (20px) and the word spacing (10px).

.foldup > span {
  display: inline-block;
  margin: 20px 10px;
  border-radius: 12px;
}

Lettering.js will also wrap each letter of each word in its own sequential span element. We can reference these new child letters using another child selector: .foldup span > span. We’ll again set display to inline-block; next, we’ll set the width for each letter to 1.5em to make sure they have a consistent width which adjusts appropriately to the font size. We’ll also set the top and bottom padding to .2em and set position: relative; the latter allows us to adjust the vertical position of the letters with our JavaScript for the accordion effect. If you also wanted to add a background texture to each letter, this would be the place to do it!

.foldup span > span {
  display: inline-block;
  width: 1.5em;
  padding: .2em 0;
  position: relative;
}

The last three lines of CSS combine child selectors and pseudo selectors to round the corners of the first and last letters in each word; if there’s only one letter in the word, it rounds both the left and right side of the single letter.

.foldup span > span:first-child {
  border-radius: 10px 0 0 10px;
}

.foldup span > span:last-child {
  border-radius: 0 10px 10px 0;
}

.foldup span > span:only-child {
  border-radius: 10px;
}

Making it happen

Now that we’ve got our content and style prepped, it’s time to make it dynamic. First, let’s add our script files to our HTML document, like so:

<!-- Add Typekit Fonts -->
<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!-- Add jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Apply our foldup plugin to our text -->
(function(){
  var foldEverything = function(){
    $('.stranger').foldup();
  }
  $(document).ready(foldEverything);
  $(window).resize(foldEverything);
})();

<!-- Add our foldup plugin to this page -->
<script src="js/foldup.js"></script>

The first two <script> elements enable our Typekit fonts (where the “xxxxxxx” is your kit ID). The third <script> element adds jQuery. The fourth <script> element applies the foldup effect to our .stranger element. The final script element adds our foldup.js.

Now let’s dive into the foldup function. Thanks to the help of Typekit’s David Demaree, the plugin is set up with some default parameters that you can change when initializing the function:

(function(){
  var foldEverything = function(){
    $('.stranger').foldup({
      containerWidth: 0.8,  // Width at which the effect begins working
      startColor: [255, 165, 0],  // Card starting background-color
      lowlightColor: [172, 111, 0],  // Card will dark to become this color
      highlightColor: [255, 194, 83],  // Card will lighten to become this color
      minShadow: 0.3,  // Lightest shadow, 1= darkest, 0 = no shadow
      maxShadow: 0.4  // Darkest shadow, 1= darkest, 0 = no shadow
    });
  }

  $(document).ready(foldEverything);
  $(window).resize(foldEverything);
})();

You can use all of these or just a few to customize how your foldup looks.

So, how does the foldup plugin actually work? Well, we start by figuring out how much the browser window is currently squished by comparing the current window width against our threshold for beginning the effect; then we determine how far past that threshold we are. Based on that, we dynamically adjust the values for the CSS3 translation properties, skewY and scaleX.

To change the color, we determine how far past our threshold we are and set our current color values for the highlight and lowlight based on how much we’ve squished our window. The more you squish, the closer the starting color gets to the highlight and lowlight colors.

For the shadow, we’re grabbing the span which wraps the whole word, setting the background to black, and then varying the shadow from sharp to blurry by adding a black CSS3 box-shadow which increases in size the more we squish.

When you put it all together it creates the rather convincing foldup effect!

Get the source

Well, that was fun, wasn’t it? If you’re not in the mood to recode this from scratch, I’ve put it all up on github (thanks again to David Demaree for his helpful suggestions). I hope this has thoroughly inspired you to try your hand at creating your own dynamic lettering work using Typekit, CSS, jQuery, and Lettering.js.

Faster than a Hollywood blockbuster, here’s the sequel already. ; ) In this addendum, we look at some special cases in the wondrous world of numbers. Because I didn’t want people who already read Figuring Out Numerals to miss out on this information, and also because I don’t like tinkering too much in an already published post, I am compiling these additional tidbits on figures in this separate post. Please keep in mind this post is meant to provide useful basic information; I won’t go too much into (historical) details.

Three-quarter Figures

Examples of three-quarter figures in vintage (top) and contemporary (bottom) type designs.
Typefaces: Berlin Sans / FF Berlinsans (top) and Lexia (bottom)

Sometimes designers feel that oldstyle figures stylistically don’t fit with specific type models, like certain sans serifs. To prevent the lining figures from standing out too much in the surrounding text they use an in-between type of numerals – three-quarter figures. These are taller than the x-height but not as tall as the cap height. Three-quarter figures can either be the default lining figures – with no full-height lining figures available – or replace the oldstyle figures. In the latter case activating oldstyle figures will produce three-quarter figures.

If no true full-height lining figures are included in the character set three-quarter figures will produce “local depressions” in all caps setting.

Hybrid Figures

Up till now we have approached the aspect of numerals in typography from a designer’s point of view. Yet thanks to the home computer a whole new category of users has been exposed to and made aware of typefaces for the past two decades or so. For the sake of simplicity they are commonly called office users. Their primary concern is not aesthetics but efficient business-like communication. Whereas graphic designers and typographers obsess over minute typographic details, office users understandably just want fonts that work, period. This doesn’t mean they are insensitive to typography. Office users often actively select specific fonts; they know what they like and occasionally seek out new typefaces, and many have a fairly good grasp on the basics of typesetting. However most of them don’t really care for umpteen styles and weights, small caps, extended ligature sets and alternates and whatnot, and certainly not six or more figure sets.

Hybrid figures are halfway between oldstyle and lining figures – three-quarter figures that have slight ascenders and descenders.
Typeface: TheSans; the hybrid numerals can be found in TheSans Office, and as tabular oldstyle figures in the OpenType version (available offline from FontShop).

Historically there exists a special kind of three-quarter figures shaped to look as good as possible in mixed case and in all caps setting. As their name implies hybrid figures are an in-between style that incorporates characteristics from both their oldstyle and lining cousins. They rest on the baseline, and their height is roughly three-quarter of the cap height. They are almost lining with ascenders and descenders that extend slightly. Because of their specific qualities some type designers and foundries choose to incorporate them in typefaces that are either designed with office use in mind, or in special office versions of their type families. Because of their convenience they are also sometimes included in news faces. Again they can either be the default figure style or replace the (tabular) oldstyle figures.

Dotted / Slashed Zero

An even more specialised group of type users are people who write code. Code is typically set monospaced. In many faces the uppercase “O” and the lining zero are distinguishable from each other by their width amongst others. If however they are designed to a fixed width it is difficult to make them different enough. The peculiar syntax of code often provides insufficient context to unambiguously determine which is which. This also applies by extension to any situation where capitals and lining figures are arbitrarily mixed.

Comparing (from left to right) the capital O, and the lowercase o with and without stroke (left), with the oldstyle dotted and slashed zero, and the lining dotted zero (right) in FF Nuvo Mono.

When the distinction between the uppercase “O” and the lining zero is crucial fonts offer a dotted and / or a slashed zero – the latter not to be confused with the Latin capital letter O with stroke (Ø) used in Norwegian and Danish. In very rare cases an oldstyle dotted and / or slashed zero guarantees that the numeral can’t be mistaken with the lowercase “o”.

Monoline Oldstyle Zero / Zero with Rotated Stress

Monoline oldstyle figure zero (top) and zero with rotated stress (bottom).
Typefaces: FF Clifford (Eighteen) (top) and FF Spinoza (bottom)

The distinction between the lowercase “o” and the oldstyle zero is a much older concern. I can’t really go into historical details because this would take us beyond the scope of this post, but early type cutters designed typefaces with a perfectly circular, monoline zero. Another solution was to rotate the axis and have the thick parts of the zero at the top and bottom. These two particular zero shapes can mostly be found in revivals of classic faces, yet some modern serif typefaces also use them.

Raised Figure Three / Five

Example of a Didone typeface with raised figure three and five.
Typeface: FF Acanthus

Another quirk found in certain typefaces – more specifically Didones – are the oldstyle numerals three and / or five designed with their tail resting on the baseline instead of hanging below it. It looks rather unusual to us now, but during the heydays of Romantic faces in the late 18th, early 19th century the raised three and / or five was common.

Weight Duplexing

Switching weights in a typeface where weight duplexing is applied to the figures ensures they line up in vertical columns.
Typeface: FF Sero

Sometimes specific numbers need to be noticed in tabular material. However switching to a bolder weight in a non-monospaced type family can produce wider numbers, even when tabular figures are selected. This prevents them from lining up in vertical columns. With this problem in mind certain type designers and foundries produce typefaces that apply weight duplexing in their figures. Switching weights does not influence the alignment in vertical columns in any way – although the weight of the strokes making up the figures grows bolder, their set width remains the same.

This is everything about figures I could think of, apart from Roman numerals and figures in other scripts like Arabic. Is any aspect still missing? Let me know and I will consider adding it.

Header image: Wood type figures at the Hamilton Wood Type & Printing Museum. Photo by Nick Sherman

Every week we round up our favorite posts from our friends at Serious Eats. This week: What beer to drink with fried chicken? Serious Eats guides the way. Plus, sandwich cookies with lingonberry jam, a new way to brew coffee, and more!

A support request made me realize that we don’t really have an all-encompassing post to forward to users requesting information about figures. Figuring It Out: OSF, LF, and TF Explained, the very handy overview FontFont Marketing Director Ivo Gabrowitsch published here on The FontFeed is already three years old. How the different figures can be accessed is only briefly touched upon in my overview of basic OpenType features OpenType in Adobe Creative Suite – The Raiders of The Lost Glyphs Pt. 1. Still, there are gaps that warrant compiling and updating the information from these two posts. I want to make this as comprehensive as possible, so don’t hesitate to point out any aspect that may be missing.

Back in the days when the character sets of digital fonts were still limited to 256 glyphs, there was only room for one numeral set per font. The most common were tabular lining figures, and one had to use separate fonts – Expert sets and / or Small Caps & Oldstyle Figures fonts – to have access to proportional oldstyle figures. However since the advent of OpenType and the implementation of Unicode, professional fonts now include up to six sets of numerals, and sometimes even more.

Vertical measurements in the anatomy of a typeface.
Typeface: Tiina Professional

Because the different types of numerals are defined by their dimensions, I would like to start with a brief refresher course. The illustration above shows the vertical measurements in the anatomy of a typeface, which will be used in all the illustrations in this post. The baseline is the imaginary line upon which the letters in a font appear to rest. Please take note that ascenders often extend above the cap height, and small caps are typically a little larger than the x-height.

For a complete overview of terminology related to digital type, please refer to the Typographer’s Glossary.

Overview of the different figure styles

In professional OpenType fonts both lining figures (top row) and the oldstyle figures (bottom row) are available in tabular versions (left column) and proportional versions (right column).
Typeface: Tiina Professional

The two basic styles of numerals are the lining figures (top row) and the oldstyle figures (bottom row).
Lining figures rest on the baseline and all have the same height, usually as high as the capital letters. Numbers in selected text are switched automatically to their lining forms when applying the All Caps feature.
Oldstyle figures – sometimes called hanging figures – have different heights. Their “body” corresponds to the x-height of the lowercase letters (0,1,2), with certain numbers descending below the baseline (3,4,5,7,9), and others extending above the x-height (6,8). The design of oldstyle figures sometimes differs from their lining counterparts.

In professional OpenType fonts both lining and oldstyle figures are available in tabular versions (left column) and proportional versions (right column).
Tabular figures share identical character widths, as shown by the red divider lines in the left column. Because they all take up the exact same amount of space, numerals in subsequent lines of numbers neatly line up in vertical columns. This is especially useful for tables, thus “tabular” figures. To compensate for its narrow shape, sometimes foot serifs are added to the figure 1 (see illustration below).
Proportional figures are spaced according to their design; the spacing of the red divider lines varies. For instance, the space taken up by the figure 1 is narrow, and less wide than the space taken up by number 6. The design of proportional figures sometimes differs from their tabular counterparts.

The difference in spacing and design between proportional figures (left column) and tabular figures (right column).
Typeface: FF Sero

Beyond these two basic styles, each spaced in two different ways, there are two additional styles of smaller figures, primarily for use in mathematical and scientific applications.

Numerators and denominators (left) have a different vertical position than subscript and superscript figures (right).
Typeface: Tiina Professional

Although they may look identical, superscript & subscript figures (right) have a different vertical position than numerators & denominators (left). Because they are designed to be used in mathematics amongst others, these figure styles are usually tabular.
Superscript & subscript figures are centred against respectively the top of the lining figures (the cap height) and the baseline.
Numerators & denominators are vertically positioned in relation to the solidus. The top of the numerator aligns with the top of the lining figures (the cap height), while the denominator rests on the baseline.

Small caps figures are lining figures exactly as tall as the small caps in a typeface.
Typeface: Tiina Professional

Small caps figures, the last figure style, are lining figures exactly as tall as the small caps in a typeface (a little taller than the x-height).

The figure style you choose ought to be appropriate for the type of setting, with readability in mind. But which style is best for which purpose?

Tabular Lining Figures

Tabular lining figures line up neatly both horizontally and in vertical columns.
Typeface: Panno Text

Tabular lining figures are as tall as the capitals and have fixed widths. This makes them line up neatly both horizontally and in vertical columns. They are ideal for any tabular numeral material, ranging from simple number work and ordered lists over forms and prices in menus to complex financial tables in business reports – any situation where alignment is crucial.

Avoid using tabular lining figures in mixed case or lowercase setting as they stand out too much and distract the reader, or in uppercase display setting or headlines as the fixed widths produce irregular spacing.

Proportional Oldstyle Figures

The shapes and spacing of proportional oldstyle figures makes them perfectly harmonise with the surrounding text, preventing the numbers from standing out too much and distracting the reader. In this illustration superscript figures were used for the footnote indications.
Typeface: FF Spinoza

The “body” of proportional oldstyle figures corresponds with the x-height of the lowercase, with the upwards and downwards extenders mimicking the ascenders and descenders of the lowercase letters respectively. The proportional spacing gives the numbers an even colour which matches the text colour. These two characteristics makes proportional oldstyle figures perfectly harmonise with the surrounding text, preventing the numbers from standing out too much and distracting the reader. They are ideal for use in body copy in magazines, newspapers, books, and more generally for any type of running text in mixed case setting.

Avoid using proportional oldstyle figures in uppercase setting as they look too small, or in tables as the numbers won’t align horizontally nor line up in vertical columns.

Proportional Lining Figures

Proportional lining figures are to be used in uppercase setting, for example in headlines.
Body copy from Scott Creney’s terrific Nirvana’s Nevermind, 20 Years Later on Collapse Board.
Typeface: ARS Maquette

Proportional lining figures are also as tall as the capitals, but the proportional spacing produces an even colour which matches the text colour. They are ideal for use in uppercase display setting and headlines, as well as in abbreviations that mix capitals and numerals, like model numbers and so on.

Avoid using proportional lining figures in mixed case or lowercase setting as they stand out too much and distract the reader, or in tables as the numbers won’t line up in vertical columns.

Tabular Oldstyle Figures

Because they are monospaced, tabular oldstyle figures are ideal for setting phone and fax numbers on stationery, page numbers in tables of contents, and so on.
Typeface: FF Tundra

Tabular oldstyle figures also mimic the x-height, ascenders and descenders of the lowercase letters, but their fixed widths make them line up neatly in vertical columns. They are ideal for phone numbers on business cards and letterheads, numbered lists and tables of contents in books and catalogues, and in any situation where tabular material needs a little more refinement, a little more class.

Avoid using tabular oldstyle figures in uppercase setting as they look too small, or in running text as the fixed widths produce irregular spacing.

Small Cap Figures

Comparing oldstyle figures for mixed case setting, lining figures for all caps setting, and small cap figures for small caps setting.
Typeface: Fayon

Small cap figures are less common, yet are very useful in sophisticated typography and even indispensable in specific cases. Because they are exactly as tall as the small caps – which typically are a little taller than the x-height – numbers will nicely blend in in text set in small caps. Any numbers in selected text will be automatically converted to their small cap forms when applying the Small Caps or All Small Caps OpenType features.

If small cap figures are missing, always use oldstyle figures instead. Avoid using lining figures as they are too tall, which makes them stand out too much and distract the reader.

Superscript & Subscript

Examples of superscript and subscript: from left to right the formula for glucose, the atomic isotope uranium, and y raised to the fourth power.
Typeface: Fayon

Superscript and subscript are smaller in size and centred on respectively the cap line and the baseline. Perhaps the most familiar example of subscript figures is in chemical formulas, but they can also be used in other scientific settings and mathematics, as do superscript figures. Superscript figures are commonly used to indicate numbered footnotes.

Numerator & Denominator

Examples of numerators and denominators in fractions in a mathematical equation.
Typeface: Fayon

Numerators and denominators are a special kind of superscript and subscript figures. They are sized and positioned to be used in fractions. The top of the numerators align with the top of the solidus –  which corresponds with the cap height and the top of the lining figures –, while the denominators align with the bottom of the solidus which rests on the baseline. Applying the Numerator / Denominator OpenType feature on numbers separated by a slash will not only automatically convert the figure(s) before the slash into numerators and the figure(s) after the slash into denominators, but also the slash into a solidus.

How to access the specific figure sets

As the different figure sets are built-in as OpenType features, certain (older) operating systems and applications that don’t support these features will only be able to access the default figures. These default figures differ from foundry to foundry, from type designer to type designer. Some stick to the tabular lining figures that were the original default in the early PostScript days, others prefer the typographically sound proportional oldstyle variants. But you’re stuck with their choice.

The OpenType window in Adobe Illustrator CS4.

The OpenType fold-out menu in the Character window in Adobe InDesign CS4.

In OpenType fonts the different figure sets can be accessed in different ways.

The first one is to activate the corresponding OpenType features in the OpenType window in Adobe Illustrator, or in the OpenType fold-out menu in the Character window in Adobe InDesign. For the four basic styles – lining and oldstyle figures, both in tabular and proportional variants – this can be done by applying the desired style to whole blocks of text, because it doesn’t influence the appearance of any of the other characters. There is no need to select individual numbers and apply the styles to them separately. An even better approach is to include the appropriate figure styles in style sheets, also known as the Paragraph Styles and Character Styles in Adobe InDesign and Illustrator.

As they could affect other characters it is not a good idea to apply the Superscript / Subscript and Numerator / Denominator OpenType features to whole blocks of text or style sheets on a paragraph level, only on a character level. Remember to never use the Superscript and Subscript functions in the Character window, as these produce artificially scaled and repositioned figures. See OpenType in Adobe Creative Suite – The Raiders of The Lost Glyphs Pt. 1 for more information.

Small cap figures are a special case. Because they are specifically designed to only be used with small caps, they should always be applied in context, together with the surrounding text or incorporated in a style sheet.

The Character window with fold-out menu in Adobe Illustrator CS4.

The Character window with fold-out menu in Adobe InDesign CS4.

A different way to influence the appearance of the figures is by applying letter-oriented OpenType features to text. Selecting All Caps will override the formatting of any numbers and convert them to their lining variants. The tabular or proportional qualities of the figures are respected. Similarly, applying Small Caps or All Small Caps will override the formatting of any numbers and convert them to their small cap variants.

Selecting alternate glyphs for the numeral five in the Glyphs window.
Typeface: Fayon

The final option to select different figures sets is through the Glyphs window. Any glyph with alternates has a little fly-out arrow at the bottom right; clicking the glyph area and holding down the mouse button reveals alternates present in a one-to-one substitution feature. Thus clicking a figure will offer all the alternate forms for selection. As this needs to be done one figure at the time, this is a time-consuming procedure and thus not advisable.

Why tabular figures sometimes won’t line up in vertical columns

Applications like Adobe InDesign, Illustrator and Photoshop allow you to override the spacing and kerning of fonts. The default setting Metrics (Auto in Adobe Illustrator) in the Character menu uses the spacing and kerning as specified by the type designer or font engineer. This makes tabular figures all occupy the exact same width, as they are intended to do.

Another setting called Optical analyses the actual shapes of the characters and modifies the kerning accordingly, overriding both the spacing and the built-in kerning tables of the fonts in the process. Although Optical kerning is advertised to improve the setting of headlines and display type, the result can be quite arbitrary at times. The mathematical analysis of character shapes seldom measures up to the judgement of a trained eye. However it can be useful when combining letters of different fonts, or when the built-in kerning of the font is to be desired.

When tabular figures don’t line up in vertical columns, check if Kerning is set to Metrics (Auto in Adobe Illustrator) and not Optical.

Optical kerning will prevent tabular figures from lining up in vertical columns, as both spacing and (lack of) kerning are ignored, and the figures are spaced according to their character shapes. Always make sure to check if Kerning is set to Metrics (Auto in Adobe Illustrator). When in doubt and as a measure of last resort, set kerning to 0 for tabular figures.

Header image: Woodtype numerals by Youri Penders, DING Creative Studio

By Dan Reynolds

Founded in 1957, the Association Typographique Internationale (ATypI) is a worldwide organization dedicated to type design and typographic-related themes. Reykjavík/Iceland hosted this year’s annual ATypI conference. From 14–18 September, about 250 local and international guests gathered to hear presentations on writing systems, design history, and font production. I attended with the Linotype/Monotype Imaging company contingent, and was fortunate enough to give a presentation on the final day of conference. While this write-up doesn’t cover every lecture or activity, I hope that it lends readers a good feeling of the event’s flavor.

This year’s conference was held in the brand new Harpa building on Reykjavík’s harbor. Photo by Frank Grießhammer.

Reykjavík is a beautiful city, and the conference location was outstanding. All regular activities took place inside the recently completed Harpa Reykjavík Conference Hall and Conference Center. Harpa has a contemporary, nebulous appearance. Although the building is without a specific profile, it still features a prominent façade, created by the Danish artist Olafur Eliasson. While Reykjavík may be a small town, as far as European capitals are concerned, Iceland seems immensely large upon arrival. Many conference attendees took advantage of the easy opportunity to drive out into the landscape and experience more of the island’s natural wonders.

Font editors & a book steal the show

The five-day conference began rather informally on Wednesday, 14 September. Attendees could sign-up for optional workshops; the most interesting of these may have been Indra Kupferschmid and Nick Sherman’s Define: type matters round-table discussion on typeface classification, or Mike Duggan’s ClearType hinting for webfonts workshop. Indra and Nick are hoping to publish proceedings from their workshop on the ATypI website soon; this will give the wider community the benefit of their work at the conference. As for hinting, Mike works for Microsoft, and I think that it would be great to see more workshops with him at future design conferences.

Over the past few years, I have experienced several design events where the new, star products were all typeface releases. As far as I recall, no new typefaces were released at this year’s ATypI. Instead, talk of four new font editors filled the air. Days before the conference began, FontLab issued the long-awaited public beta version of FontLab Studio 5.1, a re-write of FontLab Studio that enables the application to run under MacOS X Lion.

This slide from Frederik Berlaen’s presentation shows node manipulation on a glyph in the new RoboFont application. Photo by Frank Grießhammer.

Before the conference, much of the online buzz around this year’s ATypI revolved around RoboFont. So, many attendees must have felt relieved when Frederik Berlaen took to the stage on Thursday to demonstrate RoboFont publicly for the first time. RoboFont – already used by some of the world’s best typeface designers – is a Mac-only, UFO-based glyph drawing application, originally commissioned from Frederik by the Font Bureau. RoboFont was officially released during the conference. Later on during the conference, I saw several designers in the audience with their laptops open, already designing in RoboFont. For professional type designers, the €400 price is really a steal, especially if they have already purchased other UFO-workflow applications, like Metrics Machine and Superpolator. A 15-day trial version of RoboFont is also available.

Drawing in RoboFont.

There were other font editors shown during the conference: Georg Seifert presented his Glyphs font editor, which he had demonstrated in beta at last year’s ATypI conference. Google’s Raph Levien previewed a new, spiral outline font editor he is developing; this cloud-based application is apparently not yet ready for release, however. Will it help make 2012 be ‘year of the font editors’?

Fred Smeijers discussing a close-up photo of a sixteenth-century matrix from the collection of the Museum Plantin–Moreutus in Antwerp. Photo by Frank Grießhammer.

Another release was Hyphen Press’s announcement of the second edition of Fred Smeijers’s Counterpunch, and a few advance copies of the book sold out quickly in Harpa’s bookstore. Fred had a lecture of his own on Friday morning, in which he showed incredible close-up photos of sixteenth-century matrices from the Museum Plantin–Moretus collections; some of these matrices were struck with punches cut by Claude Garamond, Robert Granjon, or Hendrik van den Keere. Counterpunch itself was originally published in 1996, and Fred’s lecture focused on his research into punchcutting since that time. According to Fred, Counterpunch’s second edition is primarily a reprint, not a sequel, although he then teased the audience, remarking that his additional findings may some day be published in a follow-up volume, which he jokingly referred to as Counterpunch Two. I know that this is a text that I would eagerly read.

Iceland’s special letters

This year’s conference theme was ‘eth’ – or ‘œŧħ’, as the conference designers wittingly spelled it. The ‘eth’ name represents the Ð/ð letter of the Icelandic alphabet. The lowercase ð form seems to have come to Iceland via Anglo Saxon texts, while a ‘barred D’ type of uppercase form is used in the diacritics of other contemporary languages as well. Today’s Icelandic alphabet has 32 letters, including the Þ and the Ð, an Æ, six letters with an acute accent, and an Ö. The letters C, Q, W, and Z are not used. The Þ and the Ð share a similar th sound, at least to non-Icelanders; but the Þ only appears at the beginning of a word, while Ð is an inter-word letter only. In keeping with the special-letter theme, several papers on diacritics from various European languages were presented during this year’s conference, particularly on Friday.

This street sign in Reykjavík illustrates how common the diacritics are in written Icelandic. Unfortunately, Icelandic presenters during the conference mentioned that including flat-stroked bar on the letter ð is not the best way to draw the character. Photo by Frank Grießhammer.

One of my fondest memories of the conference will surely be the panel discussion on the design of the lowercase ð, which was the penultimate Friday afternoon presentation; it is a pity that this was not filmed for later release to the general public. Panel participants included Anton Kaldal Ágústsson, Gunnlaugur SE Briem, Veronika Burian, Steinar Farestveit, Gerry Leonidas, Gerard Unger, Gunnar Vilhjálmsson, and Ian Watson. Albert-Jan Pool lent a hand, too. Early on in the discussion, Gerard Unger remarked that, ‘it can be tricky to design an ð for a typeface. If you don’t want to design an ð that matches your typeface, you can design a nice ð and then design a typeface around it!’ This comment set a light-hearted tone; yet, despite all of the laughs during the 30-minute time-slot, I think that there was a lot to be learned during this part of the programme.

After the presentation had ended, Adobe’s Frank Grießhammer told me that the problem type designers had about not knowing how to properly design the ð is now over. By convening in Iceland, the ATypI ensured that more than enough photos of Icelandic signs will make their way onto Flickr.

Ólafur Ragnar Grímsson, the president of Iceland, addressed the ATypI during the conference’s official opening on Thursday, 15 September. Photo by Frank Grießhammer.

This year’s ATypI conference included a new element: a ceremonial opening on Thursday evening by Ólafur Ragnar Grímsson, Iceland’s president. Although there have now been 55 ATypI gatherings, this is the first time a head of state has addressed the organization.

President Ólafur Ragnar Grímsson’s talk was a treat. With great humor and insight, he explained the role that he saw for languages with smaller numbers of speakers, both in Iceland and abroad. For instance, Microsoft once had a policy of only supporting languages with over one million speakers. Although Icelandic is the national language of Iceland, only some 318,000 people are estimated to live on the island. However, Windows does now support Icelandic, thanks to a personal letter the president sent to Bill Gates. This was only one of several anecdotes he used to captivate his audience.

The presidential address was followed by a keynote lecture from Gunnlaugur SE Briem, author of the English-language instruction guide for type designers eager to learn how to properly design the Icelandic characters thorn (Þ/þ) and eth (Ð/ð), and likely the most well-known Icelandic type designer.

One of five short videos put together by Iceland’s ATypI volunteers. This one, from the conference’s last day, is my favourite. Aside from shots of many aspects of the conference, it also features short interviews with several attendees.

World scripts

If Saturday’s daytime activities had their own theme, it would have had something to do with non-Latin design. This year’s conference programme included talks on – at the very least – Arabic, Devanagari, Khmer, Korean, Latin, Meeti Mayek, Mongolian, and Tamil scripts. Aside from the annual TDC and TDC² exhibitions that have long been part of the ATypI conferences, this year saw the first World Scripts Exhibition from the collections of the Typography and Graphic Communication department of the University of Reading. Fiona Ross and Alice Savoie curated this fascinating glimpse into the resources available to students and researchers at Reading; many of the items included traveled outside of the archives for the first time in order to be part of this exhibition.

Above: Two issues of the Malayalam newspaper Malayala Manorama, from Kerala in southern India. The single color issue is from 1983, while the other issue is more contemporary.

Drawing for a Tamil letterform, made at Mergenthaler Linotype. This image, and the one before it, is part of the collection of the Department of Typography and Graphic Communication at the University of Reading. Several collection artifacts traveled to the ATypI conference for the World Scripts exhibition. Photos by Frank Grießhammer.

Saturday’s final presentation was from Hanif Kureshi, entitled Painter Kureshi, last street painters of India. I first saw Hanif’s HandpaintedType project during the Typography Day 2011 conference in Ahmedabad, India. His project has come a long way since then. Some time back, a free font named Painter Umesh was released via the website. Now, the first commercial font family is available for sale: Painter Kafeel.

This was one of two videos Hanif showed during his presentation. The second was produced especially for the ATypI conference, and is not yet available online.

Although the Painter Kafeel fonts cost $50, they are a tour de force worthy of consideration in a broad scope of headline and other display typography applications. A full half of each purchase will go directly to Kafeel, the sign painter in Delhi who made the artwork on which the fonts are based. The remaining $25 will be invested in the HandpaintedType project itself. Mumbai-based design studio WhiteCrow digitized the Painter Kafeel fonts. This studio’s bespoke typefaces can already be seen all over India, so seeing their support for HandpaintedType is a good sign. Hanif Kureshi mentioned in the Q&A after his talk that, thus far, very few copies of the Hanif font have sold. However, I have a feeling that this might be about to change.

Two of the fonts in the Painter Kafeel family, overlapping each other to create effects similar to those common in vernacular lettering styles the world over.

Not all work and no fun

Celebrating and socializing are important parts of any conference. Reykjavík’s intimate size made it easy for groups of conference attendees to meet-up in the evenings for pub-crawls or clubbing. There were also organized after-hours activities, including an exhibition opening at Reykjavík’s Spark Design Space, and a large Gala Dinner on Saturday night for all of the conference attendees, followed by an after party with drinks and dancing at the Iceland Design Centre.

TypeTogether’s Veronika Burian travels with several other ATypI delegates in a balloon-filled bus to Saturday evening’s Gala Dinner. Photo by Frank Grießhammer.

Everything ATypI related wound down quickly on Sunday, 18 September, as attendees began to leave for home. For those who remained through the end, the first order of business for the final day was the organization’s Annual General Meeting, which only about twenty percent of conference registrants attended. Several additional talks took place after the meeting concluded, including my own. Fortunately, these were much better attended that the General Meeting itself.

The highlight of this year’s Annual General Meeting was a series of presentations on possible locations for future ATypI conferences. The Board of Directors determines exact locations, but it seems very likely that next year’s conference will meet either in Yerevan, Armenia or in Hong Kong. ATypI conferences might be organized in any one of a long list of cities that presently includes Amsterdam, Antwerp, Reading/UK, Toronto, and Weimar/Germany. A proposal for a future ATypI conference in India is also being prepared.

Before we start planning for ATypI 2012, I would like to heartily thank Hörður Lárusson, Gunnar Vilhjálmsson, and all of the other volunteers in Iceland who made this year’s great conference possible. Thanks must also go to ATypI’s Barbara Jarzyna, whose organization throughout the year ensures that conferences like this one run smoothly. Birna Geirfinnsdóttir designed the conference logo, color scheme, and other collateral. The white/blue/orange combination was excellent, and the design in general was exemplary.

Links:
ATypI 2011 Flickr pool – http://www.flickr.com/groups/atypi11.
ATypI 2011 round-up videos on Vimeo.
ILT’s review of the first edition of Fred Smeijers’s Counterpunch.
Vikki Quick on Google webfonts presentation early on at the ATypI conference.
Yves Peters FontFeed on this year’s ATypI conference.

About the author:
Dan Reynolds is a type designer and typographic researcher in Berlin.

Sponsored by H&FJ.

ATypI 2011 Reykjavík

This simple-but-genius butter was one of the most talked-about components of my wedding meal. When I asked our caterer for the recipe, she said they didn't have one — it's that easy. So I came up with my own version of the butter that turns even a humble dinner roll into an irresistible piece of cinnamon toast.

Tad Carpenter’s new branding for Yeah! Burger is just plain fun. The Atlanta-based (and expanding) chain wanted a fresh approach to reflect their commitment to local and organic food, and that was certainly achieved with this playful, colorful and interactive brand. Here’s hoping that they work their way up the East Coast as they expand! In the meantime, you can check out lots more images to see on Tad’s Flickr.

I am absolutely loving Chris Ballasiotes’s expressive, hand-lettering style.

I have incredibly vivid memories of watching The Muppet Show as a kid, so there’s really no way I couldn’t love this project by Michael De Pippo. In anticipation of the upcoming film, The Muppets, Michael decided to create a series of vintage concert posters for the house band, Dr. Teeth and the Electric Mayhem. So. Much. Fun!