Category Archives: Retrospective

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 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.

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 glyphrstudio.com/help 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!

Cheers!

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:

Glyphr_Baby_Picture_2010_04

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

Glyphr_Baby_Picture_2011_05

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 glyphrstudio.com

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!