OpenType Simplified

In two words, it’s confusing. FontLab has good, professional tools for developing OpenType fonts—but it is certainly not simple or easy. Fontographer really does not deal well with OpenType at all. Having said that, if you have a feature file, you can use it in Fontographer 5.1. You link to it in the font info dialog box on the Encoding page. Fontographer will use that feature file to build your OpenType font when you generate it.

No way to edit that feature file in Fontographer

However, Fontographer does not provide any way to edit the file. You must have one already written and use it. There is no interface within Fontographer to do that. However, it is raw text so you can do your feature file in TextEdit, NotePad, or whatever app you have to edit text only files or do it in FontLab. The main thing is that you need to save it with the .fea extension instead of .txt—yes, this is writing code and it is a pain.

No easy way to add the characters in FOG

As you will see, we will be adding several hundred characters to make even a modest OpenType font. Fontographer has two problems here. First, there is no interface to control where characters are added. It is very important that glyphs are added in a consistent order for substitution lists like small caps and so on. We should be able to compile our feature file and have the new glyphs added automatically. We’ll talk about that more at the end of this booklet. I have also built several free sample files for you (at the end of this posting).

Secondly, unless there is a Unicode listing for your new character, Fontographer will show it as ** in the Font Window because there is no way to View By Name. You need to bug FontLab on the forums to add View By Name in the Font Window. It is really a big deal when we start working with OpenType and all the glyphs which are considered variants of the original characters.

Here’s the real problem

 

I still remember the first time I took a look at a feature file. It was overwhelming. At that time, Adobe fonts were the only OpenType fonts to which I had access. As I recall I opened Jenson first and about fell on the floor. I was in FontLab, so it was a little easier as it has a panel that lists the features on top in a separate window from the classes. But if you open a feature file in your text editor, it will probably look quite a bit like what you see above.

It’s not nearly as bad as it looks!

OpenType is for the Creative Suite

It also works to some degree in Apple’s publishing suite, like Pages and Keynote. In addition, it is beginning to work on the Web. I took a brief overview course online a few weeks ago from Thomas Phinney showing how FireFox 4+ supported OpenType. Hopefully, it will be showing up in more and more places as people become more sophisticated typographically and its advantages become obvious to the masses.

The fun part of the new OpenType capabilities

Here’s my version of a disclaimer. Adding OpenType features is very easy in some ways and very difficult in others. For me, there is the fact that I have a fairly severe coding challenge. It’s not that I can’t do it if I have to. The problem is that coding is so boring I make stupid mistakes and the documentation for coding is so boring I have great difficulty reading it and the font simply will not work if there is a single typo in the file. So, this will not be an exercise in coding efficiently.

I will give you some basics and I will provide several features files, with which you can start as you begin adding features. I have four free templates posted on the Fontographer page. My hope is that Fontographer will make this all easy one day. But until that happens I will just bumble along trying to make features files that work.

The good news? Once you have a file, you can use it regularly

Your feature file and feature set will just naturally grow as you add features to your OpenType fonts. Virtually every font works better if it has oldstyle figures, for example. Small caps is also a real need. Add other features as needed.

There are two different areas of a feature file

• Classes: these are lists of characters which are swapped for other lists. For example, I have a class listing Proportional Lining numbers. I have an identical list with the same characters and the same order of listing plus a .oldstyle extension for my oldstyle figures. I have an identical list with the same characters and the same order of listing plus a .lining extension for my tabular lining figures. I have an identical list with the same characters and the same order of listing plus a .sc extension for my small cap figures. The wall of characters seen on page two are a list of classes. More on that in a bit.
• Features: These have a rigid coding style which tells the software to substitute one class for another or letter combinations for a ligature, or a regular letter for an ending form, and so on.

We’ll start with features, but you should know that they are listed after the classes in your text file with the .fea extension.

What is an OpenType feature?

At its simplest, it is a substitution list. It basically tells your software that when this feature is activated all the glyphs in the first side are to be swapped out with all the characters in the second group. The simplest, in concept, is the swap from lining figures to oldstyle figures—or capital numbers to lowercase numbers. But we have to develop classes to do that. So, let’s begin with a standalone feature.

Feature names

There is a huge list on Wikipedia, but it does not show you how to write OpenType features. Obviously, this is not of much help. However, Adobe has complete instructions on their developer Website. I just Googled OpenType Feature grammar and this page came up as the first link. It is a huge page that will give you all the rules, whys, and wherefores. As always, I started reading through the instructions. I’m not a stupid man, but within a couple of entries they were making statements that included a huge set of assumptions—basically the assumption that you were a professional programmer and that all of this stuff is part of some type of language you speak fluently. I don’t. So, very quickly, I came to things that could not be figured out without a lot of research. After the research I find out that I would never use that feature anyway. There is a lot of good and necessary information here, but it is not easy to simply read and add to your repertoire.

You can make all of this very complex, and there is a lot of control. You can deal with different languages. For languages like Arabic, for example, you can set up the different forms used if a letter is in the beginning, middle, or end of a word. You can set up diacritical marks for Eastern European languages, and much more. But that is not necessary. You can make it work simply with a few features.

How a feature works

A feature description has a specific structure, which you can see below—stripped to the bare essentials.

feature <feature tag> {¶
# lookups go here¶
sub <this> by <that>¶
} <feature tag>;¶

Essential code

feature Because I am defining a feature, the code starts with the word feature.

<feature tag> Then the four letter name of the feature (without the angle brackets)

{ The left brace begins the listing of the lookups

# A number sign indicates the start of a comment which continues until the next paragraph return. Comments do not affect the feature.

sub This is the acceptable abbreviation for substitute. This normally has spaces to the left but they are not required

<this> by <that> <this> is the characters typed or a class. <that> is the character or class that is substituted.

} The right brace ends the lookups

<feature tag> Then the four letter name of the feature (without the angle brackets) finishes the feature

As you can see, the structure is very simple. The complexity only comes from the sheer amount of things that must be looked up and substituted. Next I’ll show you a portion of the dlig feature I use. In its entirety, I commonly have twenty lookups or more. I’ll talk more about how to set up a feature like this in a few pages. For now just look at the construction of the feature conceptually.

A discretionary ligature feature

Below you see a feature (actually part of one) that I used in my OpenType feature set for 2010. I make a new one every year adding features and classes as I go to make it as comprehensive as I think it needs to be. Lately I’ve been pulling back a bit unless it is a font I will be using personally. Then I really like a lot of ligatures.

 

feature dlig {¶
# Discretionary Ligatures¶
  sub c h by c_h;¶
  sub c k by c_k;¶
  sub c t by c_t;¶
  sub g g by g_g;¶
  sub b b by b_b;¶
  sub t t by t_t;¶
  sub s p by s_p;¶
  sub s t by s_t;¶
  sub s h by s_h;¶
} dlig;¶

feature dlig The dlig tag tells your software that this font has the Discretionary Ligatures feature. It is followed by a braceleft character that opens the definition block that this feature will use.

# Discretionary Ligatures The numbersign character tells the software that the rest of the line is just a comment. Adding a numbersign always means that the rest of the line has nothing to do with the feature. It is just a comment to help you remember what the feature is doing.

sub c h by c_h; In the definition block the sub keyword tells the software to substitute the characters before the by with the characters after the by. In the dlig feature above, I have shown you nine substitutions. In the feature I actually used for 2010 I had 22 substitutions.

} dlig This closes out the feature

In the dlig feature above, I have shown you nine substitutions. In the feature I actually used for 2010 I had 22 substitutions. I really like discretionary ligatures so I continue to add them to my standard list. The problem is that very few have Unicode numbers. Only ff, fi, fl, ffi, ffl, ft, & st are included in the official ligature list—the ampersand, æ and œ are also listed there.

Naming the ligatures

The ones in the Unicode list have no spaces or special characters. I’ve seen some people say that you must have an _ (underscore) between the parts of the ligature as in f_f_j, but ffj seems to work fine. Because they are not part of Unicode it really does not matter on a practical level. (However, on typophile I saw a posting that Acrobat requires the underscores between all letters of a ligature for some reason in some sort of printing situation. So—I guess I better recommend the underscore for ligatures if you are going to sell your fonts;-) Let me know if you need this and I’ll modify the free templates.

This is code so typos break the function

There is no doubt that this is tedious stuff. In addition, unless you like code your results will be limited. Over the years I have added many features. I think I have gotten to the place where I can do this stuff without too many bugs. But for me, this is always Neverland—a strange place where I am not sure enough of the rules to predict the outcome.

However, if you are careful and build slowly, you can develop a very good feature set for your OpenType fonts. The good news is that the Fontographer manual has good documentation for building OpenType feature files.

Writing an OpenType feature

This is straight forward, but again it needs to be perfect. I am only going to show you features that work in the Latin group—which as far as I know includes all of the European languages based on Latin. As I look at features for sophisticated fonts I find many entries for Cyrillic (think Russian), Greek, Turkish, and so on. I do not speak those languages. If I ever had a request for a feature like this I would hire someone to do it.

My features are characterized by several personal aspects. First of all, I try to make things in English as much as possible. Feature sets written by programmers are commonly filled with classes that are mere numbers and very difficult to figure out (open an Adobe font and check out its features).

Writing classes

A class enables you to substitute a very large set of characters with another very large set. Classes are a method of applying a feature to a long list of characters.

1. You make a class by starting the paragraph with the at (@) glyph
2. This is followed by up to 30 characters with no spaces.
3. The name cannot start with a period or a number.
4. Then you type a space equal space bracketleft
5. Then list all the glyphs you want to use in that class. You can use letters, numbers, period, and underscore— nothing else.
6. You finish the class description with a bracketright semicolon. Here’s an example:

@normalnumbers = [slash zero one two three four five six seven eight nine comma
period parenleft parenright dollar numbersign cent yen sterling Euro];¶

The characters are written with the name shown when the character is selected in the Font Window in Fontographer. If you do not have Names showing, add them by clicking on the little plus (+) with a circle around it in the top bar of the Font Window. That’s why we use five instead of 5, for example.

These names must be spelled exactly—and they are case-sensitive.

I strongly suggest that you name the class something that makes easy and obvious sense so you remember what it is next year or the year after that.

Class warnings: Boy that sounds bigoted, doesn’t it? Make sure that class substitutions have exactly the same number of glyphs in each, in the same order with no extra or missing spaces. For example, in the lowercase class is the agrave glyph and the agrave.sc glyph is in the lowercasesmcaps class. Tedious does not begin to describe the writing needed.

Make a copy and Find & Replace

The easiest way to make a new class (which is a modification of the original class) is to find and replace the new extensions for all the characters in the class. That way everything stays in the same order and you do not miss any of the glyphs. Just search for space and replace with extension space. If you already have an extension, search for dot extension and replace with the new dot extension.

I find that I need four versions of my numbers classes:

@normalnumbers

These are the 8-bit numbers plus the parentheses, period, comma, & the currency characters.

@liningnumbers

This is a copy of normalnumbers with .lining after every glyph.

@oldstylenumbers

This is a copy of normalnumbers with .oldstyle after every glyph.

@smcapnumbers

This is a copy of normalnumbers with .sc after every glyph.

Adding OpenType number features

As I have already mentioned in passing, OpenType offers several numbering choices. These are the four choices you have in InDesign. You should pick one fo these for every paragraph style. Oldstyle numbers for styles using Caps & lowercase (C&lc). Lining for styles that are in all caps. In addition we need a class for small caps figures to go with small caps copy.

• Proportional Oldstyle: This is what we would call lowercase numbers.
• Proportional Lining: These are the uppercase numbers, with proportional widths.
• Tabular Oldstyle: These would be lowercase figures with the same width. The thought makes me nauseous.
• Tabular Lining: These are capital figures with the same width. [I haven‘t added these to any of the free templates yet. Let me know if you need them.]
• Small caps figures: These are numbers to use with small caps.

 

 

 

 

The feature tags used

I usually put the default choice first. I used to have trouble with the order, but now they seem to work no matter what.

Proportional Lining: The feature tag for this is pnum These are usually the “normal” numbers. For this I use the class @normalnumbers.

feature pnum { # proportional oldstyle figures¶
  sub @oldstylenumbers by @normalnumbers;¶
  sub @liningnumbers by @normalnumbers;¶
} pnum;¶

Oldstyle figures (Proportional Oldstyle): The feature tag for this is onum I use the class @oldstylenumbers for this. But I have to include all possibilities.

feature onum { # proportional oldstyle figures¶
  sub @normalnumbers by @oldstylenumbers;¶
  sub @liningnumbers by @oldstylenumbers;¶
} onum;¶

Tabular Lining: The feature tag for this is tnum I use the class @liningnumbers for this.

feature tnum { # proportional oldstyle figures¶
  sub @normalnumbers by @liningnumbers;¶
  sub @oldstylenumbers by @liningnumbers;¶
} tnum;¶

Tabular Oldstyle: What kind of abomination is this? I don’t use it.

The small cap figures: These are added as part of the smcp and c2sc features covered briefly next. You can see that feature below. This class works really well—you simply must kern it cleanly.

I also have a class called @lowercase which includes a-z, æ, œ, ø, Ð, Ł, Þ and all the accented lowercase glyphs. (I include the Eth, Lslash, and Thorn characters because I’ll need small cap versions of them for the small cap lowercase.) I have a copy of @lowercase named @lowercasesmcaps with the .sc extension after all the characters. If we take these classes and use them in a small caps feature, it looks like this:

The small caps feature

feature smcp { # Small Capitals¶
  sub @normalnumbers by @smcapnumbers;¶
  sub @oldstylenumbers by @smcapnumbers;¶
  sub @liningnumbers by @smcapnumbers;¶
  sub @lowercase by @lowercasesmcaps;¶
} smcp;¶

In this example above, you can see that I have four substitutions going on.

• One that substitutes normal numbers (caps) with small cap numbers
• Another that substitutes oldstyle numbers (lowercase) with small cap numbers.
• Another one that substitutes lining numbers with small cap numbers.
• And yet another that substitutes a class of lowercase letters with a small cap version of that class.

You need to cover all the bases carefully, and test it to see that it works.

The All Small Caps feature

Here we have the OpenType All Small Caps choice in Case for paragraph or character styles. The feature tag for this one is c2sc and requires a caps version of the lowercase class. So you must add an additional lookup added to the copy for the small caps feature.

  sub @caps by @lowercasesmcaps;¶

@caps has all the same glyphs in the same order as @lowercase, but it uses the uppercase letters.

Adding ligatures

I know I’ve already shown you a smaller dlig feature as our first example of code. But I wanted to talk about ligatures a bit more. The first thing about ligatures is to separate in your mind “normal” ligatures and discretionary ligatures. The fact of the matter is that ligatures are not accepted by the general public (i.e. your clients and readers) when used in body copy. However, they can be a great addition to a display font.

Normal ligatures are fi, fl, ffi, and ffl. I would also include fj, and ffj. Plus Æ, æ, Œ, and œ began as ligatures in Latin but have developed into individual letters in various languages. So, they are not listed in the liga feature set.

So, basically we are dealing with two features: liga and dlig. The liga feature is straight forward and prescribed.

feature liga { # Standard Ligatures¶
  sub f f i by f_f_i;¶
  sub f f l by f_f_l;¶
  sub f f j by f_f_j;¶
  sub f f by f_f;¶
  sub f i by fi;¶
  sub f l by fl;¶
  sub f j by f_j;¶
} liga;¶

As I mentioned fj and ffj are usually not included. If they are included, the glyph names are usually f_j and f_f_j but that is your decision to make. Make sure you put the three letter ligs on top—especially if your ff lig is different than the ff used in ffj. Obviously, you can add anything you want to your liga feature set. This is the set turned on in the Character panel of InDesign or the Basic Character Formats page of the Paragraph Style dialog box.  Be careful not to add ligatures here that would be offensive to the ignorant.

 

About fi & fl: the semi-official advice on typophile is to make two characters for the ligatures named fi and fl and another identical pair named f_i and f_l—because fi & fl have keystroke access from the Mac keyboard. I don’t bother with that, but you should be aware that these issues exist. The platform battles continue—sadly.

Discretionary ligatures:

On the other hand, dligs are completely up to you. Some fonts have hundreds of ligatures. This is especially true of scripts. However, making massive and overlapping numbers of ligatures work correctly and automatically is far beyond my capabilities as a coder. Take a look at all the options available in Zapfino, for example. This is not an OpenType font, and programming all the options would appear to be impossible to me.

The only warning that I have found is to put the longest ones at the top of the list. In other words, o_f_f_i would be above f_f_i which would be above f_i or f_f. In this way the ligature is already made before the shorter lookups can affect it.

feature dlig {¶
# Discretionary Ligatures¶
  sub u f f y by u_f_f_y;¶
  sub f f y by f_f_y;¶
  sub f y by f_y;¶
  sub M E by M_E;¶
  sub N E by N_E;¶
  sub c h by c_h;¶
  sub c k by c_k;¶
  sub t y by t_y;¶
  sub c t by c_t;¶
  sub g g by g_g;¶
  sub b b by b_b;¶
  sub t t by t_t;¶
  sub s p by s_p;¶
  sub s t by s_t;¶
  sub f t by f_t;¶
  sub T h by T_h;¶
  sub W h by W_h;¶
  sub M.sc E.sc by M_E.sc;¶
  sub N.sc E.sc by N_E.sc;¶
} dlig;¶

To make any feature file work in Fontographer: I had to add a special language line below the classes and above the features. Otherwise it wouldn’t work.

languagesystem latn dflt;¶

Saving your feature sets

OpenType feature files must be saved as text files with a .fea extension into a standard folder you can keep track of. A good place on your Mac might be: <user>> Library> Application Support> FontLab> Fontographer 5> Features. It is easy to find them there when you want to add one to your font.

I find that I am gradually adding specific feature files for different types of fonts. I have my normal file for text files that will be used for normal body copy work. I have a display set. I plan to build a set for scripts. You need to set up the features that are important to you.

Adding features to your new font

For FontLab 5

Over the years I have developed a system that adds the additional glyphs I want—simply. It also adds many of the components I’ll be using to help put these glyphs together.

• Open the OpenType panel: it is found under the Window menu. Once you have it open, choose the Open Features File… command as you see above. Navigate to your feature file (as mentioned, I store mine in the Features folder in the FontLab Studio folder in FontLab in Applications Support in Library in<User> [the default location for FontLab 5]). Click on that file and click Open. The app will ask you if you are sure you really want to do that because it will wipe out all existing features. You do. The features you have written will appear in the left column. The code for the selected feature in the top right window. The classes will be listed in the lower right window.
• Compile your features: Click the icon in the OpenType panel that looks like a short stack of paper with a down arrow on top of it. This will read the features and classes into your font. More importantly, it will open an alert that lets you add any glyphs used by the features that are not in your fonts already. This saves an incredible amount of time and energy on your part. Plus FontLab tries the best it can to add the components of those new glyphs to the new glyph slots.

 

 

You’ll need to decide how far you will go to prepare your font for compiling: For example, several of the new glyph windows will be blank. This is due to the fact that the original glyphs are composites. For example, there will be no components in the aacute.sc slot because aacute in the original 8-bit set is already a composite.

Now, it is true that I can decompose all the 8-bit glyphs and all these other windows will have components in them. But I have found that if I do this, I loose the auto-updating ability of the composited characters in the 8-bit set as I continue to modify the original glyphs that are used as components. It’s your decision.

For Fontographer 5.1 & FontLab: free templates

I have set up several OpenType templates with feature files on the hackberry-fonts.com site. They are in zipped folders which contain the Fontographer file plus a feature file for the OpenType features used in the font.

The Fontographer page for the templates used in the Fontographer: Practical Font Design for Graphic Designers book.

• Decorative.fog The basic 8-bit (256-character) decorative font (Cutlass) used for the first project in the book
• The OpenType font used for the second project of the book. It has 370 characters and the OpenType features for oldstyle figures, small caps, small cap figures, and a few extra ligatures. The instructions to use it are found in the book.
• The basic 8-bit (256-character) serif font to help you build a serif design. It’s a stripped copy of Aramus.
• A full OpenType sample serif font. It has the caps, lowercase, and numbers with 557 characters plus and OpenType feature file. The font includes these features: pnum, onum, lnum, tnum, ordn, smcp, c2sc,, frac, dnom, numr, liga, dlig, fina, swsh (Remember, this is my own personal version of an OpenType feature set. It will work fine but portions will not conform to anyone else’s use.

Plus I have added two new templates on the OpenType page.

• One has a decent set of ligatures and discretionary ligatures. This is a cleaned up version for the 8-bit Display font with the addition of ligatures, discretionary ligatures, and swashes. The swashes are broken up into two features: swsh for the swashes, and cswh for the contextual swashes. These are actually swashes for letters at the end of a sentence. I do not know how to program cswh properly. Whatever the problem is, if you turn on swashes they will convert every letter affected. It is better to set up a character style to implement the swashes where you want them. The font has 297 characters. The zipped folder contains the FontLab file, the Fontographer file, and the OpenType feature file. In Fontographer, just link the feature file in the Encoding page of Font Info before you generate the OpenType font.

• The other is a serif font with oldstyle figures and small caps. This is a cleaned up version of my font Armus with the kerning stripped out and several of the confusing glyphs deleted. It has the liga feature for the basic ligatures including fj and ffj. Turn on ligatures in the character controls of the paragraph style dialog. It has oldstyle figures for lowercase numbers. Just choose proportional oldstyle to use them in InDesign. It has small caps and small cap figures. It supports both smcp and c2sc: smcp simply converts the lowercase. c2sc converts everything. The font has 367 characters. The zipped folder contains the FontLab file, the Fontographer file, and the OpenType feature file. In Fontographer, just link the feature file in the Encoding page of Font Info before you generate the OpenType font.

These downloads are zipped folders which include a FontLab version with the .vfb extension, the Fontographer version with the .fog extension, and the feature file with the .fea extension. You can use them however you like—except it would be gross thievery to try to sell them or claim they are yours. Use them to make your own fonts.

Doing it all in Fontographer 5.1

To add the additional OpenType glyphs within Fontographer 5.1, you are forced to make up your basic 8-bit (256-character) font then add the glyphs for the OpenType features one at a time.

1. You open Font Info
2. Change the number of slots available in the Glyph Repertoire field in the Encoding page to the number of slots needed.
3. Then you go to the first slot added
4. Select it, type Command+I to Get Info on that slot and change the name.
5. You will need to do that one by one until all the new glyphs are named and drawn.

With the templates I’m giving you, the slots are there and named. Plus, in some cases I have left you sample characters with composites to help you see what is needed so you can add the new glyphs required by the feature file as easily as possible. The spacing is not correct, but all the glyphs are there so you can see them, plus all the components are in place to make it easy for you.

 

 

 

 

 

 

 

Related articles

• Fontographer: Practical Font Design for Graphic Designers (bergsland.org)
• Fontographer or FontLab? (hackberry-fonts.com)