Category Archives: Retrospective

V1.13.05 – A Bucket of Features

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.

Version 1.13 – SVG direct to canvas – also some v1 vs. v2 stuff…

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 [email protected].

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.

Roadmap to Version 1

Even though Glyphr Studio is close to 5 years old, it’s only been in the past year or so that things have really started to pick up. ¬†Learning about all the tools and concepts that go into designing a font, then creating them and shipping them as a web app has been a fantastic learning experience.

But we’ve always had one little feature that was a “must have” before we felt¬†comfortable moving Glyphr Studio from Beta to a fully-fledged Version 1. ¬†And that feature is being able to import and export a font. ¬†No-duh, right? ¬†It turns out that this is pretty complicated to do using only JavaScript and a web browser. ¬†We had so much on our plate that we barreled forward with the huge list of other features first… before we knew if import/export was even possible. ¬†Even though Glyphr Studio has a bunch of awesome features right now, it’s always seemed awkward to have a tool that helps you design a font, but isn’t able to save a font. ¬†We’re right there with you.

That’s why I’m excited to announce that there will be no Beta 6. ¬†Before we work on anything else, we’re going to integrate with OpenType.js¬†– a fantastic open source project that uses JavaScript to import and export OpenType and TrueType font files. ¬†Once that happens, we’ll move Glyphr Studio to Version 1… and it will be time for some party hats, confetti, and champagne.

Time to move faster…

Up until now, we’ve had a model where we choose roughly 3 large features, and a handful of smaller features, and bundle them up and ship them as a Beta. ¬†Doing this usually took a few months. ¬†From what we’ve learned through Beta 5, we’re also going to change this shipping cadence. ¬†After v1 we’ll simply ‘publish’ new features right as we finish them – reducing time between updates from months to weeks or days.

In order to accomplish this much faster pace (and get y’all features faster and fix bugs sooner) we have to make some tweaks to our process. ¬†We’re removing some of the cumbersome stuff from the code base – namely the example Glyphr Studio project (aka the Sandbox feature on the website), and the Help Documentation.

The Help Documentation will get it’s own GitHub repository, so you can¬†suggest changes or file issues¬†against help documents that aren’t so helpful. ¬†It will then be published to whenver it’s updated.

We used to have two build processes that resulted in the /online and /sandbox pages. ¬†We’re going to remove the built-in example project from the code base, and also remove the /sandbox page on the website. ¬†Instead,¬†we’ll make it easy to open example projects from the start screen. ¬†Having quick access to some example fonts is good to have for people just starting to use the tools… but having to ship two versions of each Beta was kind of a pain.

These two changes, plus some other backend stuff we’re working on right now, will ultimately help us ship as fast as we want to.

Lastly, THANK YOU!

We owe so much to the community of font designers and developers that has sprung up around Glyphr Studio.  User feedback is the primary way we prioritize what our next steps will be.  Keep the emails and tweets coming, we thrive on interacting with people.  Hopefully the changes that we roll out for Version 1 will be the beginning of an awesome new chapter in Glyphr Studio history!


Happy 4th Birthday, Glyphr Studio!

Well, way back in April, 2010, I started a little JavaScript investigation to see if I could use HTML5 Canvas to do vector editing. ¬†I quickly moved to find a use for this… since I was also interested in trying my hand at font design, I decided to start Glyphr, the HTML5 Font Designer we all know today.

I thought it would be fun to share some embarrassing baby pictures, here is a screen grab from that first vector editing test:


About a year later, some more distinguishing features started to show up:


It hasn’t been 4 years of non-stop development, but for a little side project, it’s coming along nicely. ¬†Stay tuned for Beta 4, it’s in the final stages of testing now!


Beta 3 Launch Day Retrospective

The week of March 3rd was the launch of Glyphr Studio Beta 3, and it turned out to be a little more exciting than anticipated. ¬†The Beta 2 launch was much different – it was only communicated in a Typophile¬†community forum in October 2012. ¬†Typophile¬†is a great source for technical or professional font designers… and, because of that, Glyphr received a luke-warm welcome.

No bother.  Feedback was taken, probably the largest of which was to focus on hobbyist font designers (if such people existed).  In software design, and engineering in general, having a clear idea of your target audience is crucial.

So, fast forward to March 2014. ¬†Beta 3 was done, and I wanted to get feedback on the shiny new set of features. ¬†This time around, I decided to go a little bit more low-brow – I started a thread in Reddit’s Typography sub-Reddit. ¬†Considering the Beta 2 launch, I was expecting middling results – maybe a few people commenting and giving feedback.

But no! ¬†Here’s a rundown of that week:

  • 23 comments on Reddit and 50 comments on Hacker News
  • 250+ new Twitter followers
  • 200+ unique visitors to the source code hosted on GitHub
  • 80,000+ unique visitors to

I spent a ton of time that week answering forum posts, emails, and tweets… the whole time completely flabbergasted by the volume of the response. ¬†There were still some comments along the lines of “This could never be a professional application” – but overall comments were quite positive, excited and surprised that something like Glyphr Studio existed.

So, with renewed energy I took all the feedback I received and plotted a course for Beta 4. ¬†The feeling of momentum is amazing, and it’s all because of the amazing interactions I’ve had with the not-so-little niche market I wasn’t even expecting to exist: the noble Font Design Hobbyist.

Stay tuned!