v2.8 and v2.8.1 – Bold and Italic!

—

,

Hey everyone, it’s been a bit. Almost half a year ago we did a poll to see what big feature we should implement next. Bold and Italic was the winner, and we’ve spent the last few months getting those built into the product. As was predicted, Skew is a very simple procedure to apply to paths. Also as expected, Offset Path is very complex – this is a non-trivial algorithm with a large number of edge cases.

Even though we shipped this new functionality in v2.8, Offset Path is not perfect, and we even have some further refinements in mind. If you encounter any strange behavior, please send it our way and we’ll roll it into our future improvements! mail@glyphrstudio.com for any and all feedback!

Horizontal skew for Italic

With that in mind, let’s take a look at the new Transforms panel. There are two different ways to Skew. You can enter a Skew angle, which is probably the preferred method. Second, you can enter a distance, which is how much the top of the selected shapes will travel after the skew is applied. The reason skew distance may not be as good is that it is tied to how tall the character is (it’s maximum Y value). If you want to apply a skew to many different characters using skew distance – the resulting skew angle will be different depending on how tall that character is.

There is also a new Global Action to apply skew across many characters (and in that case, only skew angle is available).

Without getting too far down a typeface design rabbit-hole, skewing characters is called “oblique” and additional customizations will be needed to make a font truly “Italic”. But, if you have an existing project that you would like to make Italic, skewing all the characters is a great first step.

Offset path for Bold

The other big new feature is Offset Path – which uses an algorithm to either grow or shrink a path by a given amount. Positive distances will grow a path, and negative distances will shrink a path. This algorithm definitely works the best on simple paths – complex or large paths tend to have a lot more edge cases that may not turn out as expected.

In addition to refining the algorithm to produce better results in more cases, one of the biggest ideas for additional functionality is winding-aware offsets. In most cases, “solid” shapes share a winding within a font, and “negative-space” shapes are opposite of that. Offset path could, for example, automatically grow all clockwise paths and shrink all counter-clockwise paths. Not having this control is the main reason Offset Path is not a Global Action (yet). We thought it would be better to get the basic ability shipped, then extend features later. Let us know if you have any feedback.

Offset path was so complex we actually spun up it’s own workspace to visualize a bunch of different test cases. Here you can see a small set of our example paths:

And everything else…

v2.8 and v2.8.1 had a small handful of other features, and some foundational bug fixes. Here’s a complete rundown:

v2.8.0

New features

  • Offset path: this algorithm either expands or contracts a given path by a given amount. This could be a good first step in making a Bold variant of a font.
  • Skew path: this skews a path either by a given angle or distance. This could be a good first step in making an Italic variant of a font.
  • Transforms panel: this is the new home for Skew and Offset functions, as well as a new entry point for Rotate functionality (formerly available on the edit canvas).
  • Skew global action: new ability to skew all paths from the Global Actions page.
  • Kern Group sort: you can now sort kern groups by ID (previous default) or alphabetically by left group or right group members.

Bug fixes

  • Fixed the on-canvas side bearing readout that was sometimes displaying full decimal precision.
  • Fixed a bug that was hiding the Quality Control panel in some situations.

v2.8.1

Bug fixes

Pulled in upstream bug fixes from the svg-to-bezier library, which is now available as an NPM package: https://www.npmjs.com/package/svg-to-bezier

  • Better handling for paths closed with z command. These now add a new line segment back to the first point.
  • Better handling of importing SVG that has disconnected path segments.
  • updated transform() functions for matrix, scale, skewx and skewy to honor transform-origin properties.

Quality improvements

  • SVG import now tests more SVG features, like use: links.

That’s a wrap!

Again thank you to everyone who has provided feedback, user input is the top priority as we add new features and fix bugs. As always, drop us a line if you have any questions or feedback: mail@glyphrstudio.com