Typography

Hello everyone,

Recently, I was discussing the particulars of typography in Nodebox with John. Because letter spacing can’t be controlled with the textpath node I’ve experimented with stacking the letter shapes. Attached are some solutions which adds a bit of control. These can be used in subnetworks. This does not result in perfect kerning however. Advice is appreciated.

Since I want to draw my designs with a penplotter I am usually only using single line fonts like [Relief Single Line] (https://github.com/isdat-type/Relief-SingleLine) and [AV Hersey] (https://github.com/scruss/AVHershey-OTF) fonts. Still, Nodebox interprets these as contours. John mentioned a solution of using svg’s. It would be nice to explore and expand on such a solution here on the forum.

In addition it might be useful to share some experiences with text and type here. The forum contains some interesting experiments and great applications. I am thinking of the [Font Table Node] (https://forum.nodebox.net/t/19625531/font-table-node) of John and the Morph Paths of Frederik. I’d like to know if there are more cool uses of typography in Nodebox.

Floris

Floris,

Thanks for starting this conversation. Great topic!

The file you attached could not be opened because it contains code library references to three python files even though your network does not need them. I removed the references and reposted your example (attached).

Your topic inspired me to make a kern node. It's pretty simple - good for one line titles or labels. You can adjust character spacing and word spacing independently. Do you think it would be useful enough to add to my library? Screenshot and demo file attached.

I have dabbled with Hershey and other SVG-based fonts. I'll talk more about that in a future post to this thread.

There has been much interest in this topic over the years. I hope others will join in!

John

Thanks John. Apologies for adding a faulty file. I must have copied an older one.

I expect to use a node like yours quite a lot. Especially since I usually add some metadata to the plots I make. I made a node for that, which I've attached to this post. I started with adding a seed number, but might change that for a frame number now that I am experimenting with making animations.

Also, I tried your suggestions for importing svg's to get truly single line typography. I did come up with a solution, but it isn't that elegant yet. I also doubt it works with svg files of other typeface overviews when the order of the letters and symbols are changed. In addition, I could not come up with something to make the aligment work. I will try to improve upon it. But if you have suggestions for directions, please let me know.

Floris

Hi Floris,

I finally had a chance to look back at the experiments I did with the Hershey and other SVG fonts a few years ago.

To fix the alignment problem it looks like I sliced the original Hershey Romans font character paths into four groups, adjusted the alignment of each group, then saved the modified paths as a new SVG file.

I combined some of that work with the kern node to produce a new kern_plot node. Demo and screenshot attached.

Kern_plot works just like Kern except that you can't select a font and you have to place a copy of my hersheyFont.svg file in the same folder as the Nodebox file using the node.

Please give it a try and verify that it works with your plotter and satisfies your needs.

The Hershey font is a bit crude (as you might expect given its humble origins in the early years of computers). I'm sure you could find a more elegant, modern font rendered as individual SVG paths. You are correct, though, that the order of paths in the file might be different or there might be a separate file for each character. This would be fairly easy to correct in Nodebox, however. You could just read them in, adjust and rearrange the paths as needed, and resave it all as a single SVG file.

If you do have a more elegant single line font you would prefer to use - and IF those font SVGs are in the public domain - I could help you form them into a file which would work with the kern_plot node. Let me know.

If you give these two nodes your blessing I will probably add them to the next rev of my library,

John

John,

Thanks for combining your experiment with the Hershey font and the Kern node. That is exactly what I was looking for: truly single line type in Nodebox.

I’ve made a slight change to your subnetwork to easily access the string that provides the input for the path of the svg file. Attached is the file.

I’ve found that Inkscape has an extension to generate font tables from single line fonts. The extension is licensed under a GNU General Public License. The typefaces under a SIL Open Font License. Which makes me assume they can be used in this way.

Using this I've generated font tables for the aforementioned Relief font and the Hersey Medium Serif font. The vertical alignment of each letter is still a bit wrong, because I just centered everything on the page. Also the vertical alignment of each text block is off. I haven't found what causes this (something in the network or in the svg file). But when manually fixed, I suppose this is the way to go, right?

I am really excited when you're willing to share an update of the library. The Kern Node would be a great addition. The Kern_Plot node still takes a bit of work to be able to choose different typefaces. But I am not sure whether that should be a part of it. In addition, does is provide a broad enough application or is it too specific? What do you think?

Floris

Hi Floris,

Thanks for adding a file port to the kern_plot node. You did exactly what I intended to do.

The process to repair the vertical misalignments of individual characters in the two fonts you included is to load the original font, adjust each character, then save the adjusted list as a new svg file. I did this for your two fonts and included the adjustment nodes in my updated Kern Node.ndbx file. See screenshot and attachments.

If you look inside the zipped folder, you will find my original hersheyFont.svg file, your two svg files, and my two replacement files. I replaced relief.svg with relief_font.svg and Hershey_serif_medium.svg with Hershey_serif_medium_font.svg. You should use my updated SVGs going forward, but keep the originals in case you need to make additional adjustments.

When you open the network you will see two tall node chains to the left of the demo nodes. These are the two node chains I used to repair your original SVG files. As you can see by examining them, they work like this:

• I read in the original file
• I ungroup and translate them to move them to the origin and the X axis
• I apply individual changes using a chain of adjust nodes
• I render the test node at the very bottom as I am adjusting to see what I'm doing
• When all is well I render the null node just above test and save that as the new SVG

Each adjust node simply isolates one character and moves it up or down. The test node allows you to see your progress by displaying the current characters from left to right with two red lines to serve as alignment guides. It also displays the same characters as a text path using Verdana as a reference.

There is some subjectivity required in the adjustments. For example some fonts place the asterisk near the top to serve as a footnote indicator while others place it in the center to serve as a casual multiplication symbol.

My adjustments are probably not perfect; I also didn't bother to adjust any special characters above ASCII 100. If you want to make further adjustments you can simply extend my process by rendering the test node and then either changing my adjustments (if I already have an adjust node for a given character) or copy pasting a new adjust node and adding it into the chain. When you are done just render the null node at the bottom and save as the updated SVG.

If you find any more fonts you want to clean up, just copy paste a new chain and repeat my process.

Let me know if that does the trick for you. If you do make additional improvements or create new cleaned up SVG font files, please post them here.

I am also unsure whether Kern_plot belongs in the next rev of the library, especially given that the library is already almost too big to easily use. Maybe I should start making more focused libraries - like a plotting library - instead of putting everything into one big circus tent. At the moment, though, I would favor including it because I can see uses for it that go beyond plotting. I could do some interesting gen art animations by morphing line paths into words for example.

Thanks again for starting this thread and prodding me to further improvements. Our teamwork has created new and better nodes for everyone else to use.

John

John,

You’re realignment workflow is terrific. I would expect to manually change every character in Inkscape or Illustrator, but you’ve more or less automated the process with checks for adjustments.

To have numerals, lowercase, capitals and punctuation symbols and maybe a few other characters available is more than sufficient in common use. So I wouldn’t bother much with anything above ASCII 100 either.

Is there a specific reason to use the translate node for centering the paths, and not a align node?

I’ve attached a picture of a test plot of the preview text of the plotnode. It's really nice and crisp (instead of the muddled shapes when contours are drawn). Right now I’m perfectly happy with just the use of the Relief font and the basic Hershey Sans. When I add typefaces for the use with this node, I’ll post them here.

Regarding the library: I am not sure either what would be the most useful direction to categorize the nodes. One might think of specific uses (ie animation), but indeed quite often its application goes beyond that. Are there more ways in providing metadata regarding some groups of nodes? Like changing the color? Or the symbol?

This topic has got me thinking about generative typography, in which one could choose specific generated shapes to resemble certain characters. Will try to demonstrate what I mean when I have time to make an example.

Floris

Hi Floris,

Glad you like it. I appreciate your references to me in your Instagram and Twitter posts.

And yes, there is a reason I used a translate node instead of an align node at the top of that adjustment chain. We want the characters to sit on the baseline. Characters with descenders (not just g's and j's but also parens, commas, etc.) need to protrude below that baseline.

Even though the SVG font files were full of misalignments, their descenders were generally placed to descend relative to their non-descenders. The align node knows nothing about baselines, so aligning to either top or bottom would remove this distinction and force us to redefine each and every descender.

I suppose I could have stacked horizontally, grouped, aligned, translated down a few pixels to restore the descenders, then ungrouped, and realigned horizontally only, but I just used a single translate node instead. Not having to adjust every single descender saved a lot of manual work.

I agree that both the Hershey and Relief fonts look pretty good. I think I was a little too hasty in my adjustments to the Hershey Serif Medium font, though; it still looks slightly off to me. The lower cases letters seems slightly misaligned from the upper case letters. If we ever want to use that font we should probably polish it a little further.

CATEGORIZING

Categorizing the library nodes is a vexing problem. Nodebox has a very limited defined set of node colors based on output data type, so there's not much I can do with that. It also doesn't provide much in the way of built-in metadata.

Each node does have a category property, preset to the output type in the standard nodes. As far as I can tell, Nodebox doesn't do much with that. Subnetworks are given a float output type by default (even though they often do not output floats); users are free to fix that by hand - which I now do with my library nodes. But subnetwork category properties are left blank by default.

I could start setting category properties in my subnetworks. I've thought about simply placing a "Cartan Node Library" value there to more easily distinguish my nodes; this could be useful in the network diagramming tools I am developing. Or maybe I could start putting comma separated tags in that field. But even if I did, I don't see what good it would do. As far I know, there is no way inside the Nodebox app to filter or highlight nodes by category.

I could arrange my nodes in clumps by category, repeating nodes that appear under more than one category. I already do this in a sense; I group them in columns based on their output type (color). But repeating nodes in multiple clumps would make the library even more overwhelming and scattered; I fear it would do more harm than good.

Another approach would be break my single library into a hundred different files, one for each node. I could supplement this by creating a filterable, sortable master table listing all the nodes. You could first open the master network, filter the table for the nodes you need, then open each one separately. But that would make the process of adding nodes to your own network more cumbersome than it already is.

A compromise would be to organize groups of nodes into separate mini-libraries, each holding a subset of nodes related to a given application like plotting, charting, 3D modeling, typography, geometry, etc. That might be worth doing. The problem there is defining the categories. Categories that make sense to one person often do not make as much sense to another. Categories often overlap and have fuzzy boundaries. That's an issue with any kind of categorization.

I will keep mulling this over and will welcome any ideas or suggestions from you or anyone else listening in. By the way, you already do have this power in your own hands. You can start your own mini library Nodebox file and copy paste whichever of my nodes you think belong into it (and add your own). Indeed, it sounds like you have already started to do this.

Finally, I am intrigued by your notion of "generative typography". I'm not sure exactly what you mean by that; I look forward to seeing anything you come up with!

Thanks,

John

John,

Thanks for expanding on your use of the translate node. I’m gonna work the kern_plot node into my add text node. I want to add a switch to be able to change the fonts easily.

In regard to categorizing your library, do we need to continue that conversation in this thread? I haven’t looked much under the hood of Nodebox. If you mention the properties of a subnetwork, are you referring to the metadata? I saw that under settings there’s a mention of an image. Changing the image is probably part of the installation and so it isn’t something that can be changed, correct?

Currently the library is one file and I think I would keep it that way, as long it’s possible taking performance into account. A master network file sounds a bit like the adding of a new node function though. So it could be more user friendly.

Is it possible to add green nodes to every column of subnodes of the current library? These could contain tags (instead of categories - which bypasses the fuzziness problem) corresponding with the categories of the ‘new node’ panel. Maybe you could add these same tags to the overview/example table. That might be a nice way to check whether a categorization in a main file would be feasible.

In addition, right now the overview/example table has an alphabetical ordering for the whole, while the nodes have not. When these two would correspond it makes finding specific nodes easier. The combine nodes of the examples could also be renamed to correspond to the tags for quick reference. These improvements are quite small, but might add to the usability of the library.

The 2.3 library file is usually available under ‘open recent’. I do have a folder in which I keep generic subnetworks in separate files I regularly use for plotting (like for adding text, paper size, and different fill patterns - if anyone's interested, let me know). I hadn’t considered putting these in one file yet. That might be useful, although the pattern nodes (which uses the mask node) can be terribly slow.

So, these are my thoughts on categorizing the nodes of the library. Hopefully this helps developing another release. I’ll get back on the generative typography.

Floris

Yes, let's move the categorization topic to the library thread:

https://forum.nodebox.net/t/19584209/cartan-node-library-2-3

I will copy your last note and respond there.

John