Typesetting with DrawBot

From Characters to Glyphs

The ques­tion we still need to an­swer con­cern­ing text is how to draw it. Let’s ob­serve the process of typ­ing on a key­board:

• a key is pressed (usually with a finger, sometimes by your cat)
• a number mapped to that key is sent to the Operating System
• the OS converts the number to a character using an encoding – most of the times the reference is Unicode
• the character is drawn on the screen with a custom or standard font

The draw­ing of the char­ac­ter ap­pear­ing on the screen does not come from the Uni­code en­cod­ing it­self. It is stored in a dif­fer­ent con­tainer: a font. The Uni­code en­cod­ing is only an in­ter­me­di­ate dic­tio­nary used to pick the right draw­ing from the font. In fact the Uni­code en­cod­ing con­tains only char­ac­ters de­scrip­tions and their or­ga­ni­za­tion. A font file is the trans­la­tion of the ty­pog­ra­pher’s case to dig­i­tal data. The term com­monly used for the pre­fab­ri­cated rep­re­sen­ta­tion of a char­ac­ter is ‘glyph’. Think of the char­ac­ter as an ab­stract idea, a col­lec­tion of com­mon fea­tures that make a sign rec­og­niz­able as such. For ex­am­ple, let’s de­scribe the no­tion of a cap­i­tal A we mu­tu­ally share: two di­ag­o­nal lines con­nect­ing on top and di­verg­ing at the bot­tom plus a hor­i­zon­tal bar in­ter­sect­ing with both di­ag­o­nal lines, usu­ally placed halfway be­tween top and bot­tom. It is a rather generic de­scrip­tion. Many dif­fer­ent draw­ings can fall into that. They can have ser­ifs or not, they could be sten­ciled, they could be fat or thin, wide or nar­row, and so on. Take also into ac­count that many rep­re­sen­ta­tions could be rec­og­nized as cap­i­tal A and fall out­side that de­scrip­tion. It’s hard, or maybe im­pos­si­ble, to put to­gether the right de­scrip­tion.

Dur­ing the era of metal type, lead glyphs were stored into spe­cial draw­ers with a stan­dard or­ga­ni­za­tion. Did you know that terms uppercase and lowercase de­rive by such or­ga­ni­za­tion?

These draw­ers were then stored into cab­i­nets. Usu­ally, a cab­i­net would con­tain dif­fer­ent re­lated sizes or styles. Re­lated how? Well, they would share some for­mal fea­tures that would make them look re­lated, as the dif­fer­ent faces of peo­ple who are part of the same fam­ily.

In fact, this kind of col­lec­tion forms a font fam­ily. Note that the term typeface is in­stead used to re­fer to the com­mon fea­tures shared across a col­lec­tion; it is a way more ab­stract ter­mi­nol­ogy.

As you may have in­ferred, at that time, each font (think about the cab­i­net’s drawer filled with metal type) was size-spe­cific. Things changed af­ter the in­tro­duc­tion of cu­bic and qua­dratic out­lines, when a font was not tied any­more to a spe­cific size. Nev­er­the­less, read­ing dis­tance and body size are still cru­cial as­pects in the read­ing ex­pe­ri­ence. Our eyes did not change with the dig­i­tal trans­for­ma­tion of ty­pog­ra­phy. So, when us­ing a font, check if the de­signer made it with a spe­cific range of sizes in mind; even if you are al­lowed to scale it to any size with­out los­ing de­tail.

Setting One Line of Text

The min­i­mum set­ting ac­tion in Draw­Bot re­lated to type is the com­po­si­tion of sin­gle lines of glyphs. In or­der to do so we have to make a num­ber of de­ci­sions up­front:

• which characters have to be drawn, the content
• the position of the text line on the canvas
• the font from which the glyphs should be picked up
• body size
• fill and stroke color

Draw­Bot has some fall­back op­tions if we are too lazy to spec­ify all of them. But con­tent and po­si­tion are manda­tory. They are, in fact, the ar­gu­ments of the text() func­tion:

The ori­gin of the po­si­tion co­or­di­nates is the lower left point of the com­po­si­tion. Take into ac­count that the first glyph might have some left mar­gin, mean­ing that the black shapes will not touch the co­or­di­nate point. You can sim­ply test the be­hav­iour:

The other choices have to be set with spe­cific func­tions and must be de­fined be­fore the text() func­tion is in­voked.

font() de­fines the font used to draw the char­ac­ters. It ac­cepts a string ar­gu­ment. It should be the name of a Post­Script font al­ready in­stalled on your com­puter.

Draw­Bot pro­vides a func­tion able to make a list of the Post­Script fonts in­stalled on your com­puter. installedFonts() ac­cepts an op­tional string ar­gu­ment with char­ac­ters which should be sup­ported by the listed fonts.

For ex­am­ple, you could use it in the fol­low­ing way:

for eachFontName in installedFonts(supportsCharacters='ЉДЖ'):
    print(eachFontName)

The names printed in the con­sole are the fonts that sup­port the 'ЉДЖ' cyril­lic char­ac­ters.

The body size is han­dled by the func­tion fontSize(). It ac­cepts a nu­mer­i­cal value ei­ther an in­te­ger or float. The func­tion sets the size in Post­Script points, the de­fault be­ing 10pt.

Color and stroke are de­fined by fill() and stroke().

Once de­fined, these set­tings will be ap­plied to all shapes drawn af­ter­wards. To change these op­tions. just call the func­tions again.

Setting Multiple Lines of Text

Type­set­ting is a dis­ci­pline whose goal is to arrange lan­guage within a set of phys­i­cal con­straints. These lim­its are usu­ally the bor­ders of the can­vas. This is why a long se­quence of char­ac­ters can­not be dis­played in just one line. The se­quence has to be bro­ken in mul­ti­ple lines.

We are used to se­quences of bro­ken lines of text. These en­ti­ties are the build­ing blocks of type­set­ting, they are called para­graphs. When ap­proach­ing the type­set­ting of a para­graph we should take into con­sid­er­a­tion a few ex­tra op­tions com­pared to a sin­gle line.

First of all, we should use a dif­fer­ent func­tion than text(). It would be pos­si­ble to deal with line break­ing our­selves, but Draw­Bot is gen­er­ous enough to pro­vide a func­tion which will take care of it au­to­mat­i­cally: textBox(). Un­like text(), the glyph se­quence fits into a rec­tan­gle. The func­tion ac­cepts a string as first ar­gu­ment, fol­lowed by what’s nec­es­sary to de­fine the rec­tan­gle (x, y, width, height) and, as op­tional ar­gu­ment, the align­ment of the text.

If you want to see the box which con­tains the text, just use a rect() func­tion with the same ar­gu­ments:

If some text does not fit the pro­vided rec­tan­gle, textBox() will re­turn it. This fea­ture, com­bined with a while loop, can be used to add new pages un­til the text is all set on can­vas.

Most of the de­ci­sions we have to make when set­ting mul­ti­ple lines of type have to do with the space sur­round­ing the glyphs. Of course, fonts al­ready pro­vide some stan­dard con­cern­ing pro­por­tions be­tween glyphs, but a ty­pog­ra­pher has a few tools to en­hance the com­po­si­tion ac­cord­ing to a spe­cific con­text.

The ver­ti­cal dis­tri­b­u­tion of space in a para­graph is han­dled by the lineHeight() func­tion. It is com­monly called lead­ing, a term which comes from the metal days of type. It refers to the stripes of non-print­ing metal which would be in­serted be­tween lines of type. In a dig­i­tal en­vi­ron­ment the lead­ing value de­fines the dis­tance be­tween one base­line and the next.

Take also into ac­count that the are no phys­i­cal re­stric­tions on a dig­i­tal can­vas, mean­ing that the lead­ing value can be in­fe­rior to the body size or even neg­a­tive.

The Draw­Bot de­fault is point­Size * 1.2.

Fonts al­ready con­tain a lot of in­for­ma­tion con­cern­ing the hor­i­zon­tal dis­tri­b­u­tion of space. As we saw in the pre­vi­ous chap­ters, white is as im­por­tant as black. A type de­signer will pro­vide the font with all the nec­es­sary data to com­pose a good para­graph of text. Think twice about over­rid­ing this in­for­ma­tion. It is a dis­tor­tion of type as much as a non-pro­por­tional scal­ing. Well, maybe a bit more sub­tle, but a trained eye will rec­og­nize it im­me­di­ately.

But, there are a few cases where it makes sense to al­ter the com­po­si­tion with some in­ner-char­ac­ter ex­tra space. The tracking() func­tion is here for this. Track­ing –not to be con­fused with kern­ing– is the in­jec­tion or sub­trac­tion of a fixed amount of white space be­tween the glyphs. Text com­posed at small size, like 8pt, could ben­e­fit from some ex­tra spac­ing.

Break­ing the lines of text could be painful for the vi­sual qual­ity of a para­graph. But, let’s face it, we have no other op­tion: ei­ther we break the lines or we com­pose only po­etry. Min­i­miz­ing the neg­a­tive ef­fects of line break­ing is part of a ty­pog­ra­pher’s job. There are de­ci­sions that in­flu­ence the qual­ity of the right side of a para­graph more than oth­ers: av­er­age font width in re­la­tion to box width, jus­ti­fied align­ment ver­sus ragged align­ment and hy­phen­ation, etc.

Hy­phen­ation is a fea­ture which al­lows the dig­i­tal com­poser to break a line us­ing word syl­la­bles, not only spaces be­tween words. This op­tion adds many break­ing op­tions mak­ing the process of break­ing a line less harm­ful for the para­graph of text. Hav­ing said that, read­ing a word split on two lines could be not that com­fort­able, es­pe­cially if we are not very used to it or if the word is very short.

Take into ac­count that syl­la­bles have dif­fer­ent de­f­i­n­i­tions across dif­fer­ent lan­guages, so re­mem­ber to set the right lan­guage us­ing the language() func­tion. The de­fault is Eng­lish.

Hy­phen­ation set­tings res­onate enor­mously with the jus­ti­fied align­ment. This method of com­po­si­tion cre­ates an even right edge by in­ject­ing ex­tra space be­tween words. Too much ex­tra space makes the para­graph very un­com­fort­able to read, so the abil­ity to break the line within a word is crit­i­cal.

In other words, if a para­graph has a nar­row width, jus­ti­fied align­ment and no hy­phen­ation, it is very likely that the word space will start to ap­pear across con­se­quent lines emerg­ing from the para­graph tex­ture. These are the so-called rivers.

someText = """Considerare l’esistenza di un insieme di strumenti convenzionali di organizzazione e interpretazione dello spazio concatenati, il quale in qualche modo interagisca con la lingua parlata, è utile perché conviene dal punto di vista progettuale: porre il testo in contrapposizione all’immagine è utile solamente a replicare un modello di editoria libraria affermatosi alla fine del XV secolo, vincolato dalle tecniche produttive esistenti all’epoca (stampa a caratteri mobili e xilografia) e applicabile in buona sostanza principalmente all’editoria libraria legata alla narrativa, che è solo una piccola parte della produzione scritta."""

myBox = (10, 30, 180, 150)

# justified alignment with no hyphenation makes no sense
newPage(200, 200)
hyphenation(False)
textBox(someText, myBox, align='justified')

# hyphenation helps, but it’s still far from optimal
newPage(200, 200)
hyphenation(True)
textBox(someText, myBox, align='justified')

# choosing the right language improves the composition
newPage(200, 200)
hyphenation(True)
language('Italian')
textBox(someText, myBox, align='justified')

# in this case I would just align to the left
# I see no problems in a slightly uneven right edge
# designers complaining about it only consider
# the frame and not the content
newPage(200, 200)
hyphenation(True)
textBox(someText, myBox, align='left')