Creating Fonts with FontStruct

Creating fonts can be tricky and time consuming business, especially for those who are only just starting to explore the font designing world. The crew at FontShop was apparently aware of this and decided to do something about it, developing FontStruct.

FontStruct is likely the easiest way to design and share fonts, right from within your browser, for free. Not only that but you can view and download fonts created by other designers for free as well. We’ll take a look at FontStruct, their font creation app and how to create a font.


FontStruct Home

FontStruct Home

Overview

FontStruct is a powerful web application for creating and sharing fonts, brought to you by FontShop. Even better than the ability to create fonts directly in your browser, is the ability to do it for free! The font creation app runs in Flash so just about any flash enabled browser will work.

Although the core of FontStruct is the app for creating fonts, FontStruct as a whole is more than that – extending to a full type-design community. Someone who creates fonts in FontStruct is called a FontStructor, which FontStruct says is the soul of the FontStruct community.

Sign Up and User Interface

Sign up only takes a few seconds, though you are required to activate your account via email. My first thoughts of FontStruct’s overall interface design were somewhat disappointing, as there are several areas of the site that could be refined with a cleaner and more modern appeal. Though after spending a little time on the site, it has a certain unique feel.

Sign Up

Sign Up

Browsing the font gallery is clean and pleasant, though maybe a little cluttered with information. The primary focus is the fonts though, and they’re nice a big for easy viewing.

Font Gallery

Font Gallery

The FontStruct application itself follows the same design theme as the rest of the site, keeping everything consistent. The application has a very simple and straight forward interface, so it won’t be intimidating for beginners.

FontStruct Interface

FontStruct Interface

Using FontStruct

Getting started creating a font is quite easy, simply clicking the FontStructor tab and entering the name of the font you would like to create. Once you click Start FontStructing, you’ll jump into the full font building application.

Name Font

Name Font

Once you’re in, you’ll see a brief tip box telling you where to start, along with three movable panels with tools, letter selection and zoom level. As you roll over elements you’ll get small description popups to help you figure out what to do.

FontStruct Panels

FontStruct Panels

Building Your Font

Getting started building your font is pretty straight forward. First select a brick from the panel on the left (All Bricks) and click in the grid using the baseline as your starting point. As you use different bricks they will be added to the My Bricks panel for quick selection later.

Using Bricks

Using Bricks

You can set the application mode to stack within the advanced menu, which will enable you to stack different bricks together. When you stack different bricks in the grid, the bricks combined in one cell will also combine in the My Bricks panel to be able to reuse it quickly.

Keep in mind that you’re essentially filling pixels (bricks), so you may want to zoom in/out initially to get your bearings on letter size.

Using the line tool will make it easy to place bricks of the selected type along a line quickly. As you can imagine, using these tools together can enable you to quickly build a custom font, that’s much easier than you might find in desktop font building apps.

Line Tool

Line Tool

Of course, along with the simplicity and ease of the application comes restrictions in the depth of customizing abilities, though perhaps it just feels that way due to my lack of experience with the application and building fonts. Judging on the fonts available in the gallery, I think the issue is likely the latter.

Building Letters

Once you complete a letter, simply move on to the next letter using the Current Letter panel or the letter strip at the bottom. By default the Basic Latin letter set is selected but you can select from many others.

Letter Sets

Letter Sets

As you work through the set of letters, you’ll likely want to preview the full set occasionally along the way. To do so, simply click the Preview button at the top left.

Saving and Sharing

Once you’re done building your font, you’ll simply click the Save button in the top left. Clicking Download will download a .zip archive of a .ttf version of the font and its license. You can view all of your FonStructions in your profile to manage them, add tags, etc.

Font Structions

Font Structions

Final Thoughts

The FontStruct application and community is quite a lot of fun, particularly for those interested in designing fonts. The application was incredibly easy to use and took no time at all to get started. While I’m not personally a fan of the FontStruct interface theme (the whole site and app), it was consistent throughout, functioned perfectly and was very easy to navigate and use.

You’ll likely want to use keyboard shortcuts, and those are included as well. The full list of keyboard shortcuts is available via the Support tab, under Getting Started. There are several other very helpful resources there as well, which I highly recommend checking out before getting started.

If we have a pro FontStructor Web.AppStorm reader, I would be interested in a more advanced how-to covering font creation. Please feel free to contact me if you’re interested.