All posts by Glyphr Studio

Version 1!

Party Time!Hooray! We are very pleased to announce that Glyphr Studio Version 1 has just been released!  It’s live right now at glyphrstudio.com/online.  Go play with it, and please let us know what you think!

 

What’s New?

Originally we were just going to implement Import Export OpenType Fonts for V1… but we took a not-so-little detour through the land of Components.  The more we thought about it, Components was going to be a massive change to the codebase, so it was better to get it out of the way before we slapped the ‘V1’ label on Glyphr Studio.  But, as a result, you can now import and export OTF / TTF files (yay!) and you can use Components.

Components

Linked Shapes were the original idea – being able define a shape once and re-use it across many glyphs.  In practice this is a good idea, but it also falls very short of what is useful in real font design.  Components are the super-charged version of Linked Shapes.  Components can contain as many shapes as you want, and are basically stand-alone Glyphs that aren’t directly mapped to a character in the alphabet.  Once you link a Component to a Glyph, you get a Component Instance.  Component Instances can not only be moved, but also re-sized and flipped.  Additionally, you can use any regular Glyph or Ligature as if it were a Component.  Go crazy with nesting and linking!

Import and Export Fonts

This was the big feature we were waiting for, and thanks to OpenType.js – it’s here!  There are some caveats – for example, Kern values and Ligatures can’t be exported at this time (You can check out details on the File Formats Help Page).  But, as OpenType.js adds features, so will Glyphr Studio.  It’s the beginning of a beautiful relationship!

Help & Documentation

One of the big things we did to speed up releases is to move the Help file to it’s own site: help.glyphrstudio.com.  Check it out and let us know if we can improve any of the content.  It’s also hosted on GitHub, so if you are GitHubSavvy, you can actually write or improve articles directly!

What’s Next?

Well, we have a lot of ideas.  Please let us know what you’d like to see happen – user feedback is the main way we decide what to do next!  Part of the overall changes we made in preparation for V1 will allow us to have much faster releases.  Where the last few Betas took a few months to complete, we now plan to ship new features and bug fixes as soon as they are complete – maybe even monthly or weekly!

So stay tuned – and drop us a line to let us know how we’re doing!

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!

Ring in the new year with Beta 5.1

more pen tool

Unfortunately, this reference is 15 years old, which makes me feel old.  Fortunately, we had tons of great feedback on Beta 5.  So we turned around and addressed some of the bugs that people helped us find. Thank You!!

And, since we couldn’t help ourselves, we added some shiny new stuff, too.  We made some performance enhancements that should make using the canvas more buttery-smooth.

But more noticeably, we revamped the canvas editing experience with some new custom cursors, and a new “Add Path Point” pen tool.  This allows you to add a new point anywhere along a path without changing the shape of the curve.  Bezier math was learned, a good time was had by all.

Sometime in the new year we’ll start on Beta 6 in earnest… we were thinkin’ Direct Export to OTF, Better Test Drive Experience, and maybe some Multi-Select?  Haven’t decided for sure yet, but you can vote for new features and let us know what you think over at glyphrstudio.uservoice.com.

Until then, head over to the main Glyphr Studio site to start using Beta 5.1 today!  Happy New Year!

Beta 5, the best choice for your holiday season.

Beta 5 is ready for action!  You can get it at glyphrstudio.com (duh).

Thank you everyone who submitted feedback and comments for this release.  We are well on our way to a full ‘v1’ release, hopefully Beta 5 will rock your socks off until then!

Another big addition we are announcing is a new way to provide feedback.  Over at glyphrstudio.uservoice.com you can vote for new features and improvements, or suggest your own.  Check it out, and let us know what you think!

Major Features

  • Import and Export SVG Fonts – You can now open and save SVG Fonts straight from Glyphr Studio.  On the roadmap for Beta 6 is importing and exporting Open Type (.otf) files, but SVG Font is just a small step toward our overall goal of importing and exporting all font file types.  Luckily there are many free online services that can convert to and from SVG Fonts… so getting the font format you want is just a hop away.
  • Kerning – Once you have your character outlines looking good, it’s time to see how they look together.  Kerning allows you to adjust the space between two characters, or even two groups of characters with Class Based Kerning.  On the roadmap for Beta 6 is a better Test Drive experience.  So for now you can start with making characters look good together as words – and soon you’ll be able to make sure your words look good together as paragraphs.  Dude, that’s font design.
  • Ligatures – Now you can combine a sequence of characters together into one new super-character… with powers greater than the individual characters alone!  It could be your classic Æ or fi stuff, or maybe even a ¼.  Mash glyphs together as much as you’d like!

Other New Features

  • Now you can copy and paste all the shapes from one character to another.  This can help with designing characters that are similar to each other, or even as a great starting point for designing ligatures!
  • Now you can use two screen design mode for all edit pages, including Linked Shapes, Ligatures, and Kerning.
  • There is now a new streamlined attributes panel layout.
  • We’ve added a new Guide Panel and Custom Guides to give you fine-grain control over what grid and guides are visible, as well as being able to add and customize your own guidelines.
  • In addition to filing GitHub issues, you can now easily vote for new features, or suggest new feature ideas to help decide what the Glyphr Studio team does next.
  • As always, we couldn’t help sprucing up the UI so now it doesn’t feel so awkward at fancy parties.
  • Also as always, lots of back-end improvements and bug fixes, including better and more robust SVG handling.

Beta 4 is here! Happy Fourth of July!

It’s been 4 months in the works, but a lot of great new features have been added to our little project.  And firstly…

THANK YOU

…to everyone who sent in feature ideas, pointed out bugs, and tried it out.  Glyphr Studio is still young, but it’s getting better with your help.  In the next few weeks we’ll be asking for more ideas, feedback on Beta 4, and maybe even have a poll to see what goes into Beta 5.

Head over to glyphrstudio.com now to download Beta 4.  Use it, and let us know what you think!  Drop a line @glyphrstudio or mail@glyphrstudio.com

So what’s new?

  • Import SVG Outlines – Now you can use any number of graphic design software to design outlines, like Adobe Illustrator or Inkscape, and import them into Glyphr Studio.  If your design environment doesn’t exactly match your font’s metrics, there are easy scaling options that can be adjusted to make sure each character lands in Glyphr Studio with ease.
  • Full Unicode Support – where Beta 3 only supported the Basic Latin sect of characters, Beta 4 supports the entirety of the Unicode Basic Multilingual Plane (that’s over 65,000 characters).  Easily add Latin Supplement ranges with a checkbox, or add custom ranges for whatever you need.
  • Dual Monitor Mode – Keep the classic compact mode if you’re designing on one screen, or tear out the Edit Canvas to a separate window to take full advantage of your nice big external monitor.

Other New (smaller) Features:

  • There are now Keyboard Shortcuts for most of the things you’d expect – and a keyboard tips dialog box to help you learn them.
  • Along with the keyboard shortcuts came Nudging, using the arrow keys you can move a shape or point by just a smidge.
  • You can now look through the undo-able actions in the History Panel to see just how many times you need to ctrl+z.
  • When re-sizing a shape you can now lock the aspect ratio.
  • Working with Linked Shapes is easier, now with actions that let you turn a shape into a linked shape, and the reverse, turn a linked shape into a shape.
  • You can now bulk transform all the shapes in a character, so moving or resizing all character shapes as a single unit is a snap.
  • Even with a ton of changes under-the-covers, Beta 3 projects can be migrated to Beta 4, just by loading the project normally.
  • Plus lots more – I just can’t help tweaking the UI to make it a little prettier, or refactoring code to make it faster and more stable.  I’m a hit at parties.

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!

 

Call for SVG Samples

We are well on our way developing Beta 4, a major feature of which is Import SVG Outlines.  At a high level, the new feature will allow you to select a character, specify some scaling options, and paste SVG code to import.

To test this new feature, we need sample SVG to try out.  So (Pretty Please!) send us some characters that you have designed in SVG, and we’ll see if Glyphr Studio can convert them accurately.  It would also be great if you said what tool you used to create the outlines (Illustrator? Inkscape? Other?).

Send SVG code or files to mail@glyphrstudio.com – the more examples we get, the better the feature will be!  Thank you for your participation!

 

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!

Beta 3 Now Available!

The latest-and-greatest version of Glyphr Studio has arrived: Beta 3.  Glyphr Studio can be downloaded from the homepage at glyphrstudio.com.  Here is a rundown of some of the new features:

  • Enhanced UI Usability and Aesthetics
  • Better vector glyph editing for font characters
  • Linked shapes that can be added to many characters, but edited in a central location
  • Test Drive font characters as they are typed
  • Save Glyphr project as a text file
  • Export Glyphr project to TTX / Fonttools compatible XML file
  • Help Docs

Additionally, Glyphr Studio was entirely re-factored from a code perspective.  These updates will not be very noticeable to users, but it will make adding new features much easier, and using the editor much more stable.

Make sure to drop us a line @glyphrstudio or mail@glyphrstudio.com and tell us what you think!