This article is, like many others, a work in progress and is updated quite regularly… I will post updates on social networks.

A recurring problem for comic book letterers, or for artists who do their own lettering digitally with their typeface, is that these digital fonts are… too regular, that they lack the variety that is the hallmark of hand lettering.

Resources :

On the subject of the difference between computer lettering and hand lettering, an article at Comicalités takes up the whole difficulty of making natural what is not natural, with the problems that this brings… also talking about its corollary, the text translated into comics. I quote a passage from it:

 

I now understand what seems opaque, illegible, in the mechanical lettering of the translation of The Art of Flying. When I read the French version, i.e. the mechanical version, I have the impression that exogenous portions of space have been arbitrarily pasted onto the space of the vignette. The text floats, unaware of the drawing that it covers and clutters. Composed on a screen, more or less skilfully adapted to the format of the space that will accommodate it, it certainly no longer encounters the problem of « flipping » the old printed page: but, prepared on a computer, and then formatted, nowhere in this operation does it acquire the thickness of spatial inscription, nor the test of the temporality of the gesture that traces it. The regularity of its module is not the result of a manual effort: it is a simple fact of typographic composition, which has arranged one after the other identical and anonymous characters. In the vignette, the space that this neutralised text is about to occupy is stripped of its graphic nature and arbitrarily assigned a new identity, that of a « maquettable » surface, of a « blank » to be occupied, to be invested.

So for those who want to have their cake and eat it too, i.e. the speed of digital lettering and the randomness of handwriting, here is a study of the different aspects of this question, with simple or complex answers, depending on the paths taken.

It originally came from my colleague Jean-Paul Aussel who, during a conversation with Ségolène Ferté, who did the lettering for Black Sad, explained that she digitised the lettering and then introduced variations.

But how do you deal with these variations? One simple way is to put two different drawings of the same letter, one in the capital, the other in the lowercase.

Here is what Jean-Paul Aussel’s FontLab font looks like with its simple variations between caps and bdc:

 

aussel

If you are working on a Macintosh, you even have direct access to 4 possible variations, the base letter, its capital letter, then the same ones with the ALT key held down:

clavier mac

which can be reached with the following key combinations:

touches

Under Windows, this manipulation is less practical because you have to remember the code corresponding to the letter (alt-145 for æ for example).

And to introduce randomness in an automatic way in the repetition of letters, one can imagine a search-and-replace sequence which replaces for example the sequences mm by Mm, cc by c© or cC etc – which can be easily compiled into a script in InDesign.

More simply, if your font has upper and lower case letters, a site like Convertcase will allow you to alternate between upper and lower case letters:

 

convertcase

The « aLtErNaNt » and « InVeRsE CaSe » modes allow already useful combinations to quickly diversify your lettering, while waiting to do it with a script or a nested style in InDesign for example.

Through InDesign

It will be possible, for example, with character styles, applied consecutively via a nested style or a Grep style, to give an appearance of movement or life.

Here, to understand the logic of this, is an example of a nested character style applied consecutively:

 

ID-styles-imbriques

And one can logically apply character styles that slightly deform the letters, for example a 3° rotation, a 0.3 pt parangling, a slant, a 3% more or less deformation… Here is the effect, the first line has this nested style, the next one not. I regret the kerning problem…

Etant pas

Optical scaling of characters according to the body strength used is another way of compensating for the mechanical side of lettering.

Nigel French has explored this alternation of colours and letter positions in a tutorial on LinkedinLearning.

Vincent Rousseau (Les yeux fertiles) created a typeface for the translation of Crumb’s Genesis, and he explains in this article his working method…

 

Programming, variable fonts

A much more radical solution, but of a very different nature, is to program character variations, as in the Liza font. There is a feature article about this on the Underware site. This exchange on Graphic Design Stack as well.

Let’s remember that for many typographers, the Beowolf font is the one that pushes the notion of typeface variability the furthest and the best, as this article talks about. The authors of this font explain in an interview in the book « A Programming Handbook for Visual Designers and Artists » how they programmed it with almost prehistoric means… The variation was done, via a PostScript hack, at the print level. An OpenType version was then redone.

OpenType Functions

A simpler way is to use the OpenType functions aalt and calt. If you are not familiar with this area, here is an excellent explanation of what these functions are on the GlyphsApp site. Both acronyms should read alt for alternative. The OpenType Cookbook site explores these possibilities (from the « Manual Alternate Access » section).

A really detailed procedure is available on Brandon Buerkle’s incredible Society of Fonts site, which offers a series of tutorials in its blog, covering the creation of a typeface, Protest, through a series of articles, with great detail and total rigour. An invaluable resource…

Here is a partial manual, which will be expanded as time goes by. It concerns the FontLab software, whose versions VI (in Roman numerals) and following can handle these OpenType functions. However, the GlyphsApp software can also do it, and a tutorial is available in English and French on the GlyphsApp website for that.

We are going to create variants in Illustrator (for example), here you see two superimposed variants of the letter A of my Selus Reboot font:
variantesA
Start in FontLab VI by duplicating glyphs and making alternatives: Menu Glyph > Duplicate Glyph and name them using the nomenclature of the stylistic sets (.ssO1 etc) that can be found for example in InDesign in the OpenType options:

duplicate glyph

Next, create the calt function in FontLab (with the Features workspace), click on the + at the bottom left which opens the function and inserts this straight away:

feature calt {

} calt;

and type this between the braces (the code is borrowed from the GlyphsApp manual)

sub A A' by A.ss01;

 

sub A.ss01 A' by A.ss02;

So :

features

The first line will ensure that when two A’s follow each other, the second (A’) is replaced by A.SS01, your variable. The second line replaces a 3rd A with the variation A.SS02. And so on.

The next step is to do this, not letter by letter but letter class by letter class, a class being a grouping of letters (consonants or lower case letters for example). And so we need to create logical letter classes. So, let’s open the classes window (Window > Panels > Classes) and click on the + that allows the creation, a choice must be made between the types of classes, I take an OpenType class:

creation-classe

I will gradually go through the whole alphabet, typing the letters followed by a space:

creation-classe-2And I will have to be complete, and keep the order in which the glyphs are put:

exclam quotedbl numbersign percent ampersand quotesingle parenleft parenright asterisk plus comma hyphen period slash colon semicolon equal question A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z Agrave Acircumflex Adieresis Ccedilla Egrave Eacute Ecircumflex Edieresis Icircumflex Idieresis Ograve Ocircumflex Odieresis Ugrave Ucircumflex Udieresis agrave acircumflex adieresis ccedilla egrave eacute ecircumflex edieresis icircumflex ograve ocircumflex odieresis ugrave udieresis

Of which variation 01 will be :

exclam.ss01 quotedbl.ss01 numbersign.ss01 percent.ss01 ampersand.ss01 quotesingle.ss01 parenleft.ss01 parenright.ss01 asterisk.ss01 plus.ss01 comma.ss01 hyphen.ss01 period.ss01 slash.ss01 colon.ss01 semicolon.ss01 equal.ss01 question.ss01 A.ss01 B.ss01 C.ss01 D.ss01 E.ss01 F.ss01 G.ss01 H.ss01 I.ss01 J.ss01 K.ss01 L.ss01 M.ss01 N.ss01 O.ss01 P.ss01 Q.ss01 R.ss01 S.ss01 T.ss01 U.ss01 V.ss01 W.ss01 X.ss01 Y.ss01 Z.ss01 a.ss01 b.ss01 c.ss01 d.ss01 e.ss01 f.ss01 g.ss01 h.ss01 i.ss01 j.ss01 k.ss01 l.ss01 m.ss01 n.ss01 o.ss01 p.ss01 q.ss01 r.ss01 s.ss01 t.ss01 u.ss01 v.ss01 w.ss01 x.ss01 y.ss01 z.ss01 Agrave.ss01 Acircumflex.ss01 Adieresis.ss01 Ccedilla.ss01 Egrave.ss01 Eacute.ss01 Ecircumflex.ss01 Edieresis.ss01 Icircumflex.ss01 Idieresis.ss01 Ograve.ss01 Ocircumflex.ss01 Odieresis.ss01 Ugrave.ss01 Ucircumflex.ss01 Udieresis.ss01 agrave.ss01 acircumflex.ss01 adieresis.ss01 ccedilla.ss01 egrave.ss01 eacute.ss01 ecircumflex.ss01 edieresis.ss01 icircumflex.ss01 ograve.ss01 ocircumflex.ss01 odieresis.ss01 ugrave.ss01 udieresis.ss01

Thank God we can export and import this type of class from another typeface :

import classe

To achieve this kind of result, with one class containing all the basic glyphs, then I created two other classes for the variations:

classes-completes

FontLab will then generate all the missing glyphs. And we will replace the basic calt function by a class-based calt function, which will have exactly the same structure, be careful to use @ before each class to identify it in the formula:

feature-calt

As you can see, each class is designated by @. You have to compile by clicking on the black triangle at the top left…

This is the simplest expression of the character variation we are talking about, using basic OpenType functions. It is of course possible to go further…

It remains of course to manage the character kerning, for which we have of course multiplied the occurrences. The FontLab VI (or 7) software will look for the variation of the character, which allows you not to go crazy:

 

variations-approches

By putting the letter u, I automatically have the u class with accents and the u.ss01 variation appearing in the top bar.

Here is the font in question in Adobe InDesign (thanks to Noémie Touly) – you will notice that I have to apply the OpenType function « Contextual Alternates » from the Character palette for the variations to work:

typo calt

 

See in the example of type designer Shiva Nallaperumal how the letters in his font Calcula change in relation to each other (from 7’17 »)

There is also an article on Typotheque.com which presents the Calcula font.

Mise à jour le 19/09/2022