A flipper font as body text to simulate handwriting.

Maarten Renckens's picture

EDIT: because there is not a lot of information about how to create a flipper font, below is a step-to-step guide for FontLab. I hope people with no background knowledge, and with the same questions as me can find some answers. My original message and questions about a flipper font are shown below.

A flipper font is a font that has multiple variations of every character. These variations are alternately called upon to bring more variations inside the font. Example:

this is the default behaviour, on the keyboard the ‘n’ is ticked, and the same 'n' is used again and again.

On a flipper font however, when the key ‘n’ is pressed, there are variations on every glyph used, in this case, there are 10 variations on each character. When the 10th variation is used, it starts again with variation 1 etc.

———
How to create this in FontLab? The steps below are guidelines, as I find them the most easy way to do it. There are other possibilities and an other order is possible.

First, in FontLab, design every character that is already there, and set its width etc.

Next steps are creating the variations on every character. Do so by going to menu Glyph -> Generate glyphs. Type there: ‘n.alt2 n.alt3 n.alt4 n.alt5 n.alt6 n.alt7 n.alt8 n.alt9 n.alt10’. This will create nine other versions of the character ‘n’. For creating variations for the other characters, replace the n with the other character name; example ‘A.alt2 A.alt3 A.alt4 A.alt5 A.alt6 A.alt7 A.alt8 A.alt9 A.alt10’ do so with every character.

Note that the already designed basic-character is copied. I myself find that easy to work further on. Design each glyph as preferred. Make enough differences between every version of a character, otherwise a flipper font has no meaning.

For the coding part, open the panel in menu -> panels -> OpenType. There happens the OpenType code. The most basic code that can be used is:

press the ‘+’ button left below, and replace the appearing code by
feature aalt{
feature calt;
} aalt;

Aalt does mean ‘Access All Alternates’, and the list of features that follows are the special features that are used in this font. Here it is only calt (Contextual Alternates), which is used to get a flipper font working. A list of OpenType features can be found here: http://en.wikipedia.org/wiki/OpenType_feature_tag_list#OpenType_Typograp...
Press the ‘+’ again, and replace the new code with:
feature calt { # contextual Alternates
sub n n' by n.alt2;
sub n.alt2 n' by n.alt3;
sub n.alt3 n' by n.alt4;
sub n.alt4 n' by n.alt5;
sub n.alt5 n' by n.alt6;
sub n.alt6 n' by n.alt7;
sub n.alt7 n' by n.alt8;
sub n.alt8 n' by n.alt9;
sub n.alt9 n' by n.alt10;
sub n.alt10 n' by n;
} calt;

With this code, the ‘n’ starts to vary according to its position. Never there will be two times the same ‘n’ after each other, as in image 2. Note: everything after a ‘#’ is a reminder; it does nothing with the code, but it makes it easier to ad a note, and to understand what the code is doing.
This is the start of a flipper font. But doing this code for every character again is a lot of work. For making that easier there are classes.

The classes panel can be found at menu Window->Panels->Classes.
Classes are used to group glyphs of the same sort. The basic-characters are one class, the first variations (alternate 2 as I called them) are the next class, the second variation is class 3, etc.

Create 10 classes on the left side of the panel.
I myself prefer to give long names to classes. That way, in an comprehensive OpenType Font, with a lot of features and a long list of different names, it is easy to see what a class is, and what it does. My names are build as Class_calt, Class_alt2, Class_alt3,… means: it is a class, and it contains alternates version X of the characters. And I let the numbering start with the first class, to have a structure.
Drag and drop the glyphs in the right class; the result should be as next:

Class_calt -all the normal glyphs
Class_alt2 -all the glyphs with suffix .alt2
Class_alt3 -all the glyphs with suffix .alt3
Class_alt4 -all the glyphs with suffix .alt4
Class_alt5 -all the glyphs with suffix .alt5
Class_alt6 -all the glyphs with suffix .alt6
Class_alt7 -all the glyphs with suffix .alt7
Class_alt8 -all the glyphs with suffix .alt8
Class_alt9 -all the glyphs with suffix .alt9
Class_alt10 -all the glyphs with suffix .alt10

Now this work is done, the code in the OpenType panel has to be changed.

Replace our previous code:
feature calt { # contextual Alternates
sub n n' by n.alt2;
sub n.alt2 n' by n.alt3;
sub n.alt3 n' by n.alt4;
sub n.alt4 n' by n.alt5;
sub n.alt5 n' by n.alt6;
sub n.alt6 n' by n.alt7;
sub n.alt7 n' by n.alt8;
sub n.alt8 n' by n.alt9;
sub n.alt9 n' by n.alt10;
sub n.alt10 n' by n;
} calt;

with next code:
feature calt { # contextual Alternates
sub @class_calt @class_calt' by @class_alt2;
sub @class_alt2 @class_calt' by @class_alt3;
sub @class_alt3 @class_calt' by @class_alt4;
sub @class_alt4 @class_calt' by @class_alt5;
sub @class_alt5 @class_calt' by @class_alt6;
sub @class_alt6 @class_calt' by @class_alt7;
sub @class_alt7 @class_calt' by @class_alt8;
sub @class_alt8 @class_calt' by @class_alt9;
sub @class_alt9 @class_calt' by @class_alt10;
sub @class_alt10 @class_calt' by @class_calt;
} calt;

So in stead of working with each individual character, the code is looking into the classes. That saves writing some thousand lines of code. This new code with the classes makes the flipping character-independent. Not only if two times the same character follows at each other, as in the example with the 'n', but with every new character the font will take a contextual alternate.

Generate the font as OpenType, so the code is also exported.
Currently most professional programs are compatible with this sort of type.
Test it. It is easy to overlook a mistake.

Sources:
http://typophile.com/node/19625
http://typophile.com/node/43634
http://typophile.com/node/13315
http://blog.theleagueofmoveabletype.com/post/238296379/how-to-add-openty...
Typophile
And with many thanks for others who provided information, or reviewed this text
Friendly regards,
Maarten Renckens

--------------------------------------------------------------------------------------------------------

ORIGINAL MESSAGE:
The context of this question is one of my experiments
to create a good legible font (NOT such a comic font) that is very readable on little formats.
To simulate a sense of handwriting, it has to be a flipper font.
I want to look if it is possible to combine, and how far it is possible to go with.

I thought I was smart enough to figure out how it had to be done in FontLab
but thanks to my limited knowledge of the English language, I'm not.
Also I have only a limited knowledge of FontLab, my previous fonts were without programming Python.
(I actually know FontLab only one year now, and on school the specialization Typography is in its childhood,
not a lot of people know FontLab in detail)

I'm very interested in this part of fonts, but it would be stupid having to learn Python for one exercise,
I can better learn it later when I have more time.
So my question is; can someone link to, or provide a step by step way how to create flipper fonts in FontLab?
Starting with how to create multiple versions of one glyph (and the correct name it has to be given)
over how to write and insert the Python code,
and if needed, how to export it the correct way.

I have found the code, but don't know how to implement it.

feature salt {
lookup rotate {
sub @set_1 @set_1' by @set_2;
sub @set_2 @set_1' by @set_3;
sub @set_3 @set_1' by @set_4;
sub @set_4 @set_1' by @set_5;
sub @set_5 @set_1' by @set_1;
} rotate;
lookup rotate;
} salt;

I have done a search around, but couldn't find something easy;
http://www.typophile.com/node/19625
http://typophile.com/node/43634
http://typophile.com/node/13315
Even Google didn't give an easy answer.

I'm sorry my first post has to be such an stupid easy thing, but so it be.
I think Typophile is the best place to ask this,
here I have found already a lot of information about font designing problems in the past.
I'm glad if someone could tell me.
Maarten

Nick Shinn's picture

The best way would be for you to dissect a “flipper” font in FontLab.
The OpenType version of Fontesque, for instance.
Then you could could look at the glyph names, classes, and “calt” code, and see how it works in the OpenType Preview panel.

JamesM's picture

I'm not familiar with that term; what is a "flipper" font?

Maarten Renckens's picture

@ JamesM: A flipper font is a font with every character multiple times, with in every version of that character (little) differences. This is done so there is more variation in the text.
The program is detecting that a character is used, and then uses the next version, and then the version thereafter till they are all used. Then it starts again.

@ Nick Shinn: thanks for the reply.
However, flipper fonts are not freeware (I didn't find one). Otherwise I had done it that way.
For this very little schoolproject, I'm not gona buy it (nor steal nor ask to give one illegal)

I'm hoping I have it in some days, with some help from somebody.
When we get the code to work, I will post the steps here.

kentlew's picture

Maarten — Did you do what Oldnick suggested in your first post on this topic?: http://typophile.com/node/92072#comment-505839

Also, you need to put this in {calt} not {salt}. So the first line of the code should be
feature calt {
(and the closing would match, of course)

James — The term “flipper font” was first coined by the Letterror boys (Erik van Blokland & Just van Rossum) for their Kosmik font, which originally did this in Postscript format, with some clever programming, before OpenType layout features.

Maarten Renckens's picture

@ Kentlew: No. I thought this was my first post. The post Oldnick replied on, I have never seen.
That topic was the first time I tried to post something, but I got an error, and never had found that topic again. I thought it was lost. A few days later I tried again to post something; and that has become this topic.

Thanks for the link & the correction: I will try in the next couple of days to get it to work.

kentlew's picture

Maarten — The initial post went into a moderation queue. That’s why it didn’t appear for several hours.

Maarten Renckens's picture

@ Kentlew: I don't mind about that, but I wasn't informed about that. I contacted the site moderator with the message I got returned:

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, itadmin@punchcut.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Apache Server at www.typophile.com Port 80

And because I tried posting 20+ times, the moderation queue shall have had a lot of spam from me… :)

Maarten Renckens's picture

Succes! :D

The glyps are flipping now.
The resulting code is shown in the image below, where I have made 10 versions of the character 'n'.
Many thanks to Nick Shinn, Kentlew, Oldnick and Shockomotive
A lot of little pieces of information made the whole.

The only question that remains is:
now glyphs only flip if they are next to each other.
It should also do so when they are not to each other; so that every alternate has passed before it takes the first again. Where should I search for that?

kentlew's picture

I don't mind about that, but I wasn't informed about that.

Yes, the system response is singularly unhelpful. I would be nice if Punchcut would fix this.

every alternate has passed before it takes the first again. Where should I search for that?

Look for information about Martin Wenzel’s work on his “letter carousel” code. You can start with this:

http://fontfeed.com/archives/new-fontfonts-ff-dupers-letter-carousel-tur...

Maarten Renckens's picture

As promised the results of the work.

For a ‘little’ exercise, it was a very good result, and it was quoted 36/40 :)
I have compared the results with my own handwriting, and might take it a lot further than this. That was the only remark.
Later I will create a new one based on the experience I have got with this experiment.

Many thanks to everyone who has helped, commented, or has given feedback in a way that makes the result better.

--------------------------------------------------------------
The last questions:
--
I got this message when I export an OpenType Font.
Contextual alternates don't have a unicode name, so does it matter? Are there any programs or something like that can't work if I work with names?

--
I have created an explanation of how to do a flipper font (for dummies like me) above this topic.
I hope a lot of people find it useful, but if there is something that has to change, let me know please.

dumpling's picture

Cool, a font that can count!
Is there a way to attach another "digit" so it can count even higher?

Could this be (ab)used for printing sequentially-numbered tickets, etc.?

Maarten Renckens's picture

Is there a way to attach another "digit" so it can count even higher?
of cource: example: insert next code for the calt to go to 15: just complement the numbers to go to the count you wish. You also need to make more versions of each character if you do this…

feature calt { # contextual Alternates
sub n n' by n.alt2;
sub n.alt2 n' by n.alt3;
sub n.alt3 n' by n.alt4;
sub n.alt4 n' by n.alt5;
sub n.alt5 n' by n.alt6;
sub n.alt6 n' by n.alt7;
sub n.alt7 n' by n.alt8;
sub n.alt8 n' by n.alt9;
sub n.alt9 n' by n.alt10;
sub n.alt10 n' by n.alt11;
sub n.alt11 n' by n.alt12;
sub n.alt12 n' by n.alt13;
sub n.alt13 n' by n.alt14;
sub n.alt14 n' by n.alt15;
sub n.alt15 n' by n;
} calt;

Could this be (ab)used for printing sequentially-numbered tickets, etc.?
Can you give an example? I don't know exactly what you have in mind…

moiz217's picture

Cool, great work there.

The concept is very interesting. I was wondering if this has any application in Arabic Fonts as well.

Thanks.

Syndicate content Syndicate content