Glyphr - HTML5 based font editor | Hacker News Reader

Glyphr - HTML5 based font editor

glyphrstudio.com

250 pointsdarrenkopp51 comments

This is without-a-doubt, the most useful and coolest thing I've seen hit the Hacker News homepage this year. Seriously, this is amazing. It works really well and is easy to use as well, you could be onto something here. It's seeing people create things like this that motivate me more than any, "Why you should switch to Google Go" article ever could.

Thank you! It's a work in progress, but it's fun to work on something you're passionate about. I'd recommend it :-)

If you make this fully featured, this might spawn an entire generation of font designers (for good or bad :)). Also think about people people forking fonts like on github.

This is magic, congrats.

Played around with it, incredibly easy to use!

It looks like the bits to import/export the fonts in a portable format (json) are already in place. You could literally run a git repo with the font files and serve it up to a web interface. That would be awesome :D

Kind of the main core of Glyphr is to make font design accessible to the masses. How can you know if you are a horrible font designer if you can't even try? :-D

Free and open source too: https://github.com/mattlag/GLYPHR

Nice work!

Not quite - there doesn't seem to be a license mentioned anywhere.

Couldn't find anything either, made a ticket (https://github.com/mattlag/GLYPHR/issues/26)

It is mentioned in the App itself, but not in GitHub anywhere. I'm going to look into it and update the license. My intent is that it is totally free / open source - even if i'm fuzzy on the legal mumbo jumbo.

hmm, using function declarations in a post-Crockford world? still good work though.

I'm an interaction designer by trade, and learning JavaScript the hard / laborious / crazy / way by creating Glyphr. Nobody said it was pretty under the covers.

You are amazing, "A designer who teach himself to code by making beautiful and awesome apps" best post of the day. But yeah the code is ... but the UI and the concept itself is beautiful ;). Keep improving and good luck.

Wow. As an typography enthusiast who's miserable with bezier curves, I've never seen something this straightforward. I love the coordinates it gives you on handles and points. Being able to easily work from metrics forward is a great touch as well.

I gave up on trying to learn with Fontlab's TypeTool because nothing was nearly as clear or usable as this.

This is the perfect entrance to type design, and I see myself wasting a lot of my time with this in the coming weeks.

Wow, and it's free. One suggestion: make the handlebar points a little bit larger, or increase their "hotarea". Hope I explained myself. Great work!

Am I missing something, or does it only support the ASCII character set?

You should definitely consider adding support for drawing using Raph Levien’s Spiro curves: http://www.levien.com/spiro/

Much much better than Beziers for many purposes.

need to be gpl for that ;)

Or I’m sure it would be possible to email Raph and work something out.

Its not ;)

But there is a js version on http://fontly.com/sandbox/spiro.html

This is great, and I love how they got some UI things exactly right, such as zoom with the mouse wheel, and pan with the space bar held down, including visual feedback for the tool switch.

This looks really nice. The demo seems slick so far, though I've never had any experience with font-design. I've always wanted to mess around with it a little more, but it hasn't been very convenient.

Interested to see what folks have to say who have used professional tooling.

Also glad they have the sandboxed online try-out to mess with: http://glyphrstudio.com/sandbox/

Amazing but it seems that there is an obvious bug in handling scroll events.

I am using Magic Track Pad in Safari so there is no visible drag-able scroll bar in the attribute panel. When I scroll the attribute panel, the scroll events just escaped the attribute panel and cause the glyph to scale. I must concede that the scaling is smooth and responsive, rendering this behavior quite funny but delightful.

Also, it would be more amazing if unicode were supported.

I personally liked when there used to be a barrier to entry for designing (horrible) fonts. Nonetheless, this is quite a feat, wow. There are other contenders too, there is: http://www.prototypo.io/ http://www.metaflop.com/

This is a gorgeous UI. I'd love to hear about the technologies used in building it.

Here is the source code: https://github.com/mattlag/GLYPHR

Is there a method to import a TTF or OTF font to start from? I've done a lot of work on a personal font I use, but I'd love to see how it plays out in Glyphr. Recreating it from scratch seems like a big ordeal.

TTX will export OpenType to XML as well as convert the resulting XML to OTF.

Wow, the "linked shapes" feature is something I've wanted in a font editor for a long time. Is this the first font editor with something like that, or has it been done before?

Its part of the TrueType specification from Apple in 1987, which calls them 'components' - they are in all modern font editors.

There are two additional on-line font editors:

FontStruct - build a face with pre-defined blocks, uses Flash, proprietary, sponsored by FontShop. 6 years old.

http://fontstruct.com/

typism - development history and novel path drawing, uses SVG+JS, MIT licensed. Fonts are distributed under OFL. 5 years old.

http://typism.appspot.com/

FontStruct is proprietary flash.

Typism is dead, no one worked on it for ages.

http://prototypo.io is new, active, libre, Angular, on github, but! it suffers from the classic problem of processing and such; designing visual things isnt best done by writing code. Its why metafont didnt catch on - https://www.google.co.in/search?q=why+metafont+didnt+catch+o...

That's why I help start http://metapolator.com which will become a much more powerful online font editor, because it allows you to design typeface families instead of letters.

Hey dave, Currently in Prototypo, users design fonts in a visual way only. Using code will come later, when we can make it user-friendly enough and fully integrated in our visual editor.

Anyway, the future looks bright for open-source online type design software. There's a little competition and many possibilities for collaboration. That can only be good!

This looks really nice, but there are a couple things I can't figure out. How do I add new characters? How can I add new glyphs for ligatures? How do I set kerning pairs?

Hello, Hacker News! I've been seeing a huge response since we released Glyphr Beta 3 earlier this week - it's been very exciting! I'm trying to answer all the questions i'm receiving. Until then, please play with the app and let me know if there is any feedback. Thanks!

Glyphr Studio team (aka Matt) @glyphrstudio

It looks beautiful and very easy to use, except for the one fact: the whole UI is quite slow in my browser (Firefox 27 on Linux Mint). Maybe it's my laptop, it's 2 years old, but I don't see anything on the screen warranting this sluggishness...

Since we're on Hacker News: What's the business model here? I see an awful lot of work for a very limited market. $1000+-license after release?

In any case, great job by the programmers here.

$1,000 for a font? The average price is $20 and selling 50 copies is possible. Sometimes more, sometimes less.

"Features galore" and yet, holding Shift does not restrict the cursor to only X or Y movements for dragging in straight lines.

That said, this is a very cool project.

Nice editor. Though I wonder with all the font links lately, is the world really short on fonts? Shouldn't Google fonts and the like just about cover any need?

Google fonts is incredibly frustrating as soon as you look beyond skin-depth. For one, it's annoying to use Google Fonts for professional work, because more often than not the font you want to use is available in only one weight, or it's missing an italic style, etc. So, you walk in thinking you're going to come out with a terrific type solution for your client or project, and you walk out realizing you are effectively being upsold by a type designer. Not that it's a terrible thing.

Now, let's say you look at the full catalog of commercial fonts. What's happening is a sort of acceleration of fashion. No sooner did the squared serif font come into style than it is on its way out. People are designing new fonts, other people are enjoying the new stuff, and the old stuff gets pushed out (not completely, ever, but enough that your average designer starts to really get annoyed seeing the same old fonts).

So this tool is probably a great thing--it should help boost the industry and it will also put more downforce on the value of the same old junk that has been around forever. So if you are really OK with standard fonts, or plan to use free fonts forever, there should be an increase in the amount of that stuff that is available for you to use.

This should also help commercial fonts take hold. People will start to notice fonts more, and they will start to understand the difference between the amount of work that goes into paid fonts vs. unpaid.

Fonts are not a solved problem by a long shot.

Google Fonts has only single style families on purpose, to prioritize a limited budget, so the most popular single style fonts can be improved into families with confidence there is demand for them.

But expanding single styles into families is not as easy as it should be. That's why I help start http://metapolator.com which takes www.metaflop.com and removes the 'write metafont code' part of the process.

As you say, if you want the fonts to be better sooner than Google, you can pay for it - either by commissioning the designer to improve the open source fonts or by going across the street to a paid web font service.

Is the world short on novels, or symphonies, or masterful Chinese calligraphy scrolls?

Very cool! Works as expected, except one arrow on the F demo didn't allow me to change the angle (near the 2nd bar of the F), but otherwise: awesome!

Its probably a tangent point type. Change the point type :)

Needs keyboard support (PC and Mac) like for undo. Also needs to support moving objects with the mouse.

It should be possible to generate the font file in-browser (using Web Platform tech), right?

The path nodes indicate direction, that's useful.

Dealing with screwball windings with no ready way to discern their orientation make this one thing a piece of feedback manna.

I joined Hacker News to just say WOW ! Cool !

This is dope. Muchas Gracias de Tucson!!

Nice, the tool is minimalistic

Reply on news.ycombinator.com