Font Name will be used when exporting your font.
Glyph Proportions dealwith global attributes that affect your font. Glyphr Studio uses theproperties in the Font Settings section to display and edit shapes:
- Key Metrics - Glyphs have a total height of 1000 Units,called Em Units. The baseline of that glyph splits the upper and lowerportions of the glyph vertically. Input an Ascent Height, and the DescentHeight will be calculated automatically. X Height and Cap Height are commonguides for lowercase and uppercase letters in your font.Note: these metrics may be used to scale imported SVG outlines.
- Default Side Bearing - All glyphs have a small amount ofspace to their left and right that separates them from another glyphs. IndividualSide Bearings can be edited in the Attributes Panel of that glyph. But, tomake things easier, if a specific Left or Right Side Bearing is not set, thisDefault Side Bearing will be applied.
- Glyphr Studio is a free, html5 based font editor. Font design has a high barrier of entry. Professional font design programs are very complex, and quite expensive. Glyphr Studio is accessible, streamlined, and made for font design hobbyists and it’s free!
- Glyphr Studio provides a large set of custom-designed vector editing tools for typeface design. So, it could be the only tool you need to create a whole typeface from start to finish. This tutorial, however, will start from a more common scenario.
- Help Documentation for Glyphr Studio v1. For help with other versions, email mail@glyphrstudio.com Last updated Mon Aug 06 2018.
- Mar 12, 2014 - Glyphr Studio is a free, html5 based font editor. Font design has a high barrier of entry. Professional font design programs are very complex, and quite expensive.
Glyphr Studio is a modern-looking and smooth-running piece of software that started out in life as a web app but can now be run directly from the comforts of your computer's desktop thanks to the.
Grids and Guides
- Grid System - Divide your Em square into a specified number ofsub-units. This will show up as a light gray grid behind your glyphediting canvas.
- Overshoot - Round glyphs are usually slightly larger thantheir square counterparts so that they visually look the same size. Specify anovershoot measurement here. Note: this metric may be used to scale importedSVG outlines.
Glyph Ranges
- Standard Glyph Ranges are a list of the four basicLatin glyph ranges that can be specified for fonts. These common rangescan be enabled or disabled with a checkbox, and their Unicode range values willautomatically be added to your Glyphr Studio project.
- Custom Glyph Ranges can also be added to projects. Ifyou want to design glyphs that don't fall into the common Latin glyphranges above, you can specify a new range here. You'll have to look up thestarting and ending Unicode values for the range you want to work with.
Font Metadata is a set ofinformation that describes your font in various ways, and specifies some extraoptions - like underline and strikethrough attributes. These attributes are split up into two sections: OTF properties will be exported to .otf font files, and SVG properties will be exported with SVG Font files.
| Please consider subscribing to LWN Subscriptions are the lifeblood of LWN.net. If you appreciate this content and would like to see more of it, your subscription will help to ensure that LWN continues to thrive. Please visit this page to join up and keep LWN on the net. |
Glyphr Studio is afree-software font-editing application that runs inside a browser window. Version 1.0 was released on May 7.Although it is not yet a full-featured application, it does provide agood interface for the core tasks of font development.
The Glyphr Studio code is hosted at GitHub.The application is licensed under GPLv3, and is based on a number ofopen-source JavaScript libraries. At the moment, it can only be runfrom a web server; the latest release is accessible online at glyphrstudio.com/online.That means one must have an active Internet connection to work, ofcourse. There is a featurerequest open to package the application for offline usage withNode.js, but it is not clear how far away such a change might be.
The project has been in development since 2010 (although it was aprivate, personal project in its early days), and has regularlymade public beta releases since 2013. The most recent of thosereleases, Beta 5.2,arrived in January 2015. Subsequently, developer Matt LaGrandeurannounced a roadmap in which the 1.0milestone would designate that import/export functionality had landed,thus making the application useful for basic work. To implement thatfunctionality, LaGrandeur chose to use the existing OpenType.jslibrary. As it turns out, integrating OpenType.js proved to be such an easy transitionthat the 1.0 release also incorporated several other useful features.
Production
Glyphr Studio 1.0 offers a vector-baseddrawing canvas on which users can create the glyphs in a font, toolsfor constructing ligatures and setting up basic kerning, an interfacefor configuring basic font metadata, and a playground for testing outthe in-development characters on some sample text. Users can alsoimport generic SVG shapes, so they can design glyphs in anotherapplication first and bring them into Glyphr Studio for furtherrefinement.
As far as the import/export functionality is concerned, at themoment it is basic. Users can import SVG fonts (as distinctfrom the generic SVG files that can be pulled in as drawing elements),OpenType .OTFs, and TrueType .TTFs. Export is a tad more limited.The program can export SVG fonts or OpenType .OTFs, but those .OTFs willnot store any of the kerning or ligature tables. This is a limitationinherited from OpenType.js; when that project adds the requisitefeatures, Glyphr Studio will pick them up. SVG fonts can be exportedwith both kerning and ligature tables.
Glyph Studio 2tb External Hard Drive
Glyphr Studio can also save projects in its own, JSON-basedformat—files that will be saved to the user's local machine, notkept on the server, so there is little risk of data loss while onewaits for OpenType.js to mature. In practice, the bigger limitationis that Glyphr Studio cannot import or export the Unified Font Object (UFO)file format used by many othertools, but there are feature requests open for that, too.
That said, there are a variety of font-engineering tools that canoperate directly on OTF files, including scripts to insert kerning andligature tables. These tables store relatively simpleinformation (e.g., a kerning pair consists of two references to glyphsand an integer saying how much the space between those glyphs shouldbe adjusted when they appear in order). It might not be trivial, butone could probably use Glyphr Studio in conjunction with somecommand-line utilities to develop and release a fully functioning textfont.
Usage
The ability to technically produce a valid font is not what mostpeople will be interested in, however. Designing and testing all ofthe glyphs that go into a usable finished product is a labor-intensivetask that can be quite repetitive. Where such an interactiveapplication often succeeds or fails is on the ease-of-use of itsediting interface and how well its tool set stands up to the user'srequirements and expectations.
The Glyphr Studio interface does a good job of being easy tonavigate and unobtrusive. It can be run in a single browser window orthe editing canvas can be split out into a window of its own toprovide maximum editing space while still providing access to theon-screen settings and tools. Within the editing canvas, the toolsand navigation buttons (e.g., zoom and pan) are straightforwardenough. The navigation and tool panels (i.e., the parts of theinterface outside of the editing canvas) are clear and well-organized,too, providing one-click access to each of the major tasks.
As with all modern font editors, the emphasis is on creatingand adjusting Bezier contours. In my tests—most of which wereconducted with Glyphr Studio 1.00 running in Chromium—Iencountered some oddities. The curve-adjustment tools occasionallythrew a surprise at me, such as the handles for a control pointdisappearing when I selected a different point. I am also not quiteconvinced that I like the interface's habit of making optionsdisappear entirely when they are not needed (rather than simplygraying them out). This behavior makes the other options and buttonsjump around on the screen, which seems like it would impede one'sability to commit the UI to muscle memory.
There are also isolated parts of the interface that are moredifficult to navigate than others merely because they reuse icons andsymbols from other places in the UI. Presumably that can be fixed.In addition, there are a few places where features seem to be onlypartially implemented—such as layer support, where the buttonsto move an object up or down in the layer stack are present, but thereis no way to add layers other than the default layer itself.
On the other hand, Glyphr Studio deserves high marks for laying outoptions and controls in a manner that relates directly to the workflowthat a user will employ. For example, as noted earlier, thenavigation panel includes buttons for each of the major tasks indesigning a font (at least, those currently supported in GlyphrStudio): glyph editing, ligatures, kerning, and test-driving. Thatmore or less reflects how most type designers seem to operate. Thosefour tasks are interrelated; users tend to jump back and forthbetween them, particularly when designing something from scratch.
In contrast, FontForge—which, for many years, has been thedominant free-software font editor— also offers kerning and ligatureconstruction, but the tools used to work on those tasks are accessibleonly from within a menu or buried several levels deep in modal dialogboxes. FontForge's functionality is more complete, but it can bequite a bit harder to use. On a daily basis, the inconveniences canwear some users out.
The one genuinely original feature that Glyphr Studio 1.0 offers isits 'components' support. Components were a surpriseaddition to the 1.0 release when the OpenType.js integration wentfaster than expected. In essence, a component inGlyphr Studio is a reusable shape that the user can draw once and thenreference in as many glyphs as necessary. The simplest example mightbe an accent mark, which readers expect to look the same on a varietyof letters, but it can be anything: the 'feet' on certain Cyrillicletters, the lower-case 'n' reused as the left half of 'm', and soon.
Glyphr Studio Tutorial
Most type designers seem to employ some form this technique already(though informally; perhapsby putting the reusable component in a slot assigned to no Unicode point), so it isinteresting to see it elevated to the level of first-class feature.Whether it attracts and retains new users will be interesting towatch.
The last word
Two weeks ago, we reported on theLibre Graphics Meeting session in which Dave Crossland opined thatGlyphr Studio and some other web-based font-development tools wouldsoon surpass FontForge in functionality. Glyphr Studio 1.0 does notdo that, although it does raise the bar in terms of usability, and itprovides a serious challenge to FontForge going forward.
That is notto say Glyphr Studio has a clear road ahead of it; as the conventionalwisdom says, implementing the initial, basic functionality is ofteneasy for a development team. Filling in that 'last 10%' is what addsunexpected complexity and ends up taking 90% of developers' time. Inthe meantime, though, Glyphr Studio is a worthy project for those ingraphic-design fields to pay attention to. Regardless of what thefuture holds, another quality free-software option for font developersis a win for the community.
Glyph Studio Png
(Log in to post comments)