Happy April Fools day, everyone! I have re-started work on Glyphr Studio v2, which is exciting (and no joke 😁). But, I also continue to fix bugs for v1… and I will for a while. Here is a quick summary of the bug fixes from the past few releases:
v1.13.07
Fixed a bug where projects with Ligatures experienced an “Off by 1”
or “Off by 2” error, where character sequences were being replaced with
the wrong Ligature.
Disallowed the creation and exporting of Ligatures with source sequences of one character.
v1.13.08
Now support positive integers being separated / designated by ‘+’ signs in path data.
Ignore namespaced attributes with ‘:’ in the name to allow for
importing SVG code snippets that would otherwise throw ‘prefix not bound
to a namespace’ errors.
v1.13.09
Generating SVG for a glyph that contained Component Instances, fixed
a bug where the position of the Component Instance would (sometimes)
not include the correct Left Side Bearing.
Fixed a handful of related bugs around deleting Components,
Component Instances, and Ligatures… and making sure all the linked and
related glyphs knew about these changes and were, in turn, updated
appropriately.
One of the most common feature requests I get is to be able to merge two fonts together. Or, start with a base font, then select some glyphs from a second font to import into the base font. I totally get it – but fundamentally Glyphr Studio is not able to handle opening two projects or fonts at the same time… the code makes all kinds of assumptions about there being only one project. It’s something I’m going to fix in v2 🙂
But, for now, v1.13.06 introduced a small feature that may help with merging fonts – even though it’s not a nice workflow or tool that is custom built to merge fonts. The feature is a new Glyph Action that allows you to download a SVG file for just that single Glyph (or Ligature or Component):
So now, if you have two Glyphr Studio Projects open in two different browser tabs, you can more easily copy shapes from one to another.
In practice, this is how I move a glyph from one project to another. First I open my destination project in a browser tab to the glyph I want to receive the new shapes. Then I navigate to the glyph in the source project in another browser tab that I want to pull into the first project – and hit Export glyph SVG File. My browser has a little notification that a .svg file was downloaded, and I can grab the actual browser notification, drag it to the destination tab with the project already open, and drop it on the edit canvas there.
…so, like I said, not quite a fully-featured “Merge Fonts” workflow, but hopefully it unblocks you in trying to move designs between projects.
Bug fixes
Along with this mini new feature, we fixed some bugs as well:
Changed exported OTF shapes to be clockwise by default
Fixed a bug where flat path points were hiding a handle when it was imported from a compound SVG shape
Changed the non-breaking space glyph name from ‘nobreakspace’ to ‘nbsp’
Added soft hyphen U+00AD glyph to the list of exportable whitespace glyphs
Updated the default font metadata to use canonical family names (“Regular” instead of “normal”)
Howdy! It’s been a couple months… I’ve been fixing up a few bugs, and adding a few new features. Neat!
As I mentioned in my last post, a few features are sneaking into V1, focusing on the fit-and-finish stage of developing a typeface. One of these features is from v1.13.01, but here is an overview of the new ‘review’ stuff:
Previous / Next buttons
The two arrows beneath the Context Glyph area let you easily fly through all your glyphs, as opposed to the two or three clicks it takes to switch glyphs via the Glyph Chooser Panel. The order of the glyphs happens to be the order in which they were created (as opposed to alphabetical)… so have fun with that 🙂
Mark Overlapping Path Points
Many times when you’re importing SVG from other programs like Adobe Illustrator, those programs made some interesting choices as to how to add path points. This feature, enabled from Project Settings > UI Behavior, draws a little red circle around path points that happen to be very close to each other. You can actually choose the radius you want to check for – this can really help quickly identify these extra path points.
Showing and rounding path points with decimal values
I’ve been getting mixed messages as to whether or not decimal values are ‘okay’ for OTF files or not. Even if they are okay, sometimes I just want certain path points to hit whole Em values – it satisfies the detail-oriented side of me.
In settings Project Settings > UI Behavior, there is now a checkbox that enables you to highlight these points:
And, once you have identified them, there is now an additional “Round all point position values” action. You can do this command on a selected Path Point, all points in a selected Shape, or for all points in an entire Glyph:
Test Drive Permutations
Having good sample text to set your typeface with is very important. In Glyphr Studio Test Drive, a few buttons help get you started – including buttons that add Latin Alphabet, and some English pangrams to Test Drive.
Two new buttons in Test Drive allow you to add all permutations of Latin upper and lowercase letters. This analytical approach is a nice compliment to seeing how your typface performs with real blocks of text.
That’s it for the new fit-and-finish features. If you have any ideas for new features like this, let me know!
Update Summary
New Features
New Previous / Next buttons below the Context Glyphs input box allow
you to quickly flip through glyphs.
Mark overlapping path points – set a radius that highlights if two points
are very close together.
SVG Import engine now supports the Glyph tag (for copy/pasting from SVG Fonts).
Test Drive letter permutations – automatically add all Uppercase or Lowercase
letter permutations to the Test Drive preview area.
Test Drive preview area now dynamically expands in height to the input content.
Bug Fixes
Copy+Paste SVG straight to canvas bug is fixed.
Lots of little keyboard handlers were broken at some point, now they’re fixed.
Toast messages work better when rapidly changing.
Reverse Winding now keeps Path Point zero as the same point.
Whitespace glyphs besides Space export with zero shapes.
Notdef glyph scales to different capheights
Default view for Kerning is auto-calculated, as opposed to static.
Okay, so I know there are a few new ‘features’ sprinkled around in here… and I know the last blog post was all about how Version 1 was ‘done’. Ha!
For the most part I am focusing on fixing bugs, and V1 will be supported for a long time to come. The big thing that I’ve realized since v1.13 is that there were a few small features that are still missing that help with the final touch-up stages of developing a typeface. In v1.13.01 a small feature surfaced to help with rounding handle and path point x/y values – whole numbers tend to work better with OTF font files. I think I’ll be adding a few more little features like this that help with finalizing glyphs within a typeface. Stay tuned!
I’ll leave you with the updates I forgot to post from the past three releases:
v1.13.04
New Features
Progressive Web App support – added app manifest information so that you can “install” Glyphr Studio on your desktop machine.
Bug Fixes
Better glyph names exported to SVG Fonts.
v1.13.03
Bug Fixes
For ‘Highlight path points that contain non-integer values’ project setting,
handles with decimal values are also drawn in red, as opposed to just the base point.
OTF Character names are now exported as ASCII and conform to name standards.
Fixed a bug involving exporting Ligatures along side default Ligatures that have
Unicode code points.
Viewing glyphs that have no shapes as Context Glyphs now works.
Fixed importing arc segments from SVG paths.
The “Auto Fit” view algorithm now works better for edge cases.
v1.13.02
New Features
Shift + Rotate now snaps to one degree increments.
Bug Fixes
Fixed the sluggishness / disconnect between the rotate handle and the actual glyph.
The rotation tool is now locked to cached glyph attributes, as opposed to relying on quick
deltas of mouse movement.
Fixed a bug where flat points with only one visible handle were rotating improperly.
Fixed the disappearing panels bug.
Rotated component instances now save with the appropriate positive / negative angle attribute.
Old projects with rotated component instances will be upgraded, and will work as expected.
A little update to fix some bugs. Also added two updates to help with identifying and fixing path point x/y values that have decimals (for the detail-oriented among us).
New Features
Action to round x/y values for a Path Point, a Shape, or the whole Glyph.
Project setting to highlight points that have decimal x/y values.
Bug Fixes
Fixed a SVG import bug involving relative path commands across compound shapes.
The bar to get from Beta to Version 1 for Glyphr Studio was simple: design a font and export an OTF file. Of course this could be a huge amount of features, or something pretty basic. What actually shipped as V1 was somewhere in the middle, and V1 has come a long way since then (we just celebrated the 5th birthday of V1 in May!). Adding big features and small, all with the goal of being able to get typeface design hobbyists from zero to font as efficiently as possible.
But what should the bar be for V1 vs. V2? I have already started an exploratory project into re-writing the codebase. Not surprisingly, JavaScript has come a long way in the nine years I’ve been working on it (Glyphr Studio’s birthday was in April 2010). So there are some shiny new things in JavaScript and CSS that would be good dedicate some time to updating – so that’s V2, but when should work on V1 basically stop for that to happen?
Where I’ve landed is I would like Glyphr Studio to support me in my quest to design a typeface that I can submit to Google Fonts. I recognize this isn’t on a lot of people’s list of goals. Actually, based on user feedback, many users come to Glyphr Studio to design constructed languages (conlangs) – or just to create a Basic Latin font. This is great! Exactly what Glyphr Studio was designed for! So I think my somewhat lofty goal of creating a fairly fully featured typeface is a good stopping point for V1.
If you follow Glyphr Studio, you’ve seen a lot of action around Global Actions recently, and these really help with creating a typeface with more than just the Basic Latin range. With v1.13 done, you can now drag and drop, or copy and paste SVG code directly to a glyph’s edit canvas. Look – Glyphr Studio has a great set of vector editing tools, but I also know a lot of us (🙋♂️me included) still feel more comfortable in programs like Adobe Illustrator.
My point is, now hopefully there is a coherent workflow to design glyphs in some other program, easily import them to Glyphr Studio, then finish details like generating diacritical glyphs, kerning / spacing, ligatures, etc.
There may be some little updates to v1.13… but what I’m trying to say is Glyphr Studio version 1 is basically done. Have ideas for V2? Drop me a line at mail@glyphrstudio.com.
New Features in v1.13
Paste or Drag+Drop SVG straight onto the canvas – if your SVG is designed so it doesn’t need to be scaled,
then you can copy the code and paste it directly to the edit canvas, or drag and drop an .svg file to import
the shapes.
New Global Action – Advanced Diactritical Glyph generator. If you design glyphs in the Basic Latin and
Combining Diacritical Marks ranges, then this action will use them to generate the Latin Supplement and
Latin Extended A character ranges.
The ‘All Caps Font’ Global Action is now extended to (optionally) cover the Latin Supplement, Extended A,
and Extended B glyph ranges.
Snap to Grid / Snap to Guide. Thanks to GitHub user monolifed for contributing the feature!
Updated the overall Glyph Names list to reflect the Unicode v.11 update that landed June 2018.
Better default view for empty glyphs.
Bug Fixes
Fixed a key binding so that the question mark glyph can be used as a Ligature, instead of summoning the keyboard shortcuts dialog.
Throw a warning if Monospace Global Action is set to zero as the width.
Importing a custom range from the Open Projects page.
Glyph Chooser panel now displays a selected range that was removed.
This version was a fair amount of back-end work. But the improvements you’ll see, dear user, are all around being able to easily preview and add additional Unicode code blocks (or Glyph Ranges, as we call them) to your project. There are also some enhancements to existing Custom Glyph Ranges, like being able to give them custom names!
There is now a large “Glyph Range Chooser” that lets you explore all the code blocks in Unicode, and easily add them to your project:
The Glyph Range Chooser can be launched from Font Settings, or from the Glyph Chooser panel which shows up lots of places.
Speaking of Font Settings, here is what the new “Additional Glyph Ranges” looks like:
Even after you add ranges from the Glyph Range Chooser, you can edit their names… or even their beginning and ending values. These ranges are very open ended, and up to you to do what you’d like.
I couldn’t quite decide if this was a bug fix or a new feature… but anyway, there is also new functionality where only these “active” glyph ranges will be exported to OTF or SVG fonts (as opposed to every glyph designed in the project).
Below is the granular list of updates. There you have it!
New Features
A huge Unicode Code Block range chooser – easily preview and add any Unicode code block to your project!
Glyph Ranges now support custom range names.
Glyph Ranges can now be edited.
Font Exports and Imports now only export/import “active” glyph ranges… this may be more like a bug fix 🙂
It is now possible to disable the Basic Latin glyph range.
Global Action: Re-size all glyphs – now has an additional option to update the Glyph Width (advance width) property.
Bug Fixes
Ligatures for HTML comment strings now work, like <!–
Ligatures 0x 0X u+ U+ now work – they previously were treated as
invalid Unicode / Hex inputs, but they are valid 2 character ligatures.
This is a very exciting release. One of the very first issues filed on GitHub was to enable Ligatures. Basically forever, we’ve had to rely on a workaround: Export to SVG then convert to OTF for Ligatures and Kerning. Starting now, Ligatures will be exported directly to OTF! Hopefully we’ll be able to work out saving Kern information at some point 🙂
New Features
Ligatures export directly to OTF files!
Ligatures that also have a single Unicode code point will be exported accordingly.
A few small Ligature improvements around adding common ligatures, and displaying thumbnails.
Bug Fixes
Fixed a bug around handling glyphs that use multiple Component Instances with the same Root Component.
Correctly handle / draw side bearings equal to zero.
Allow / disallow correct characters when exporting metadata to SVG Fonts.
Fixed an export bug involving locked points and glyphs with left side bearings.
Global Actions – a set of actions that can be applied to many or all glyphs at once. We have 3 to begin with, let us know if you have ideas for any others, they are easy to add!
Auto Zoom – a much improved algorithm for fitting the current Context Glyphs to your screen
Shift + Nudge – holding down the shift key while using the arrow keys to nudge shapes and points will now move 10 Em Units instead of one
New Project – menu item and keyboard shortcut to launch a new Glyphr Studio project
Bug Fixes
Fixed importing winding information for paths
Limit length of Font Family Name string, which causes OTF errors
Context Glyphs – type a few glyphs to show before and/or after the glyph you are currently editing on the edit canvas. Easily navigate to any of those displayed glyphs by clicking on that glyphs name on the Edit Canvas.
Notes on the Ligature and Kerning pages describing how to export to OTF font files via SVG Fonts.
Better slider controls for transparency settings (grids and guides) around the whole tool.
Bug Fixes
Contribute link now works in the Desktop client.
Show a toast notification when Undo-ing spans many glyphs, and requires navigating to a different glyph.
Test Drive re-factored, including some very small updates.
