Do you have a creative project that needs a monospace pixel font? Follow this easy step-by-step tutorial to learn how to create and customize your own monospace font!
What You Will Learn in This Monospace Font Tutorial
- How to set up your Illustrator file for monospace font creation
- How to define the grid and font metrics guidelines
- How to build a monospaced pixel font
- How to color the font glyphs
- How to adjust the spacing of a font
- How to catapult and export a font from Adobe Illustrator
Tutorial Assets
To complete this tutorial, you will need to purchase:
- Fontself Maker for Illustrator CC
In this tutorial, we will learn how to create a basic, yet colorful monospace pixel font in OpenType-SVG.
What Is a Monospace Font?
Monospace fonts are fonts whose letters and characters have the same proportional horizontal space, meaning each letter has the same character width. Monospaced fonts originated from 'typewriter fonts'. They basically mimic the slab serif font style used in typewriters, back in the day, because the letter spacing and widths used on typewriters were not adjustable, thus they had the same fixed-width space. Early CRT computer screens also used fixed-width characters for computer code, but in pixel form.
Today, monospaced fonts are used for displaying tabular data, like statistical tables and spreadsheets or in books, magazines, and so on, where large amounts of text need easy legibility.
What Is OpenType-SVG?
Also referred to as 'Color Fonts', it is a font format in which the font has some or all its glyphs represented as SVG (Scalable Vector Graphics). This type of format allows multiple colors to display in a single glyph.
Today, we will build a monospaced pixel font in OpenType-SVG format using Adobe Illustrator and its Fontself Maker plugin to bring the vectored letters into an OpenType-SVG font file with Fontself Maker.
Let's start creating!
1. How to Set Up the Illustrator File for Font Creation
Step 1
The most important thing to do before creating our font is to set up the Adobe Illustrator file in the correct color mode. When designing OpenType-SVG color fonts, it's best to set the file color mode to RGB.
Since we will create a monospaced font with a fixed width and in pixel form, we will work within a 50 px grid on a 7x7 block format.
Create New Document (Command-N) and in the New Document dialog box, select either for Mobile, Web, Film & Video or Art and Illustration files, which come by default as an RGB profile.
Name the file 'MonoPixel', and set the dimensions and Settings to:
- Number of Artboards: 26 (For the A-Z letters of the English alphabet)
- Width: 350 px
- Height: 350 px
- Units: Pixels
In the Advanced tab, More Settings dialog box, type in the following settings:
- Spacing: 50 px
- Columns: 26
- Color Mode: RGB
- Raster Effects: High (72 ppi)
- Preview Mode: Default
Step 2
Next, let's lay out our grid. Go to Illustrator > Preferences > Guides & Grid and set the Gridline to Every: 50 px, and OK.
Step 3
Turn on Rulers: View > Rulers > Show Rulers (Command-R).
Turn on Snap to Grid to snap our shapes to the grid: View > Snap to Grid.
In order to align the grid to the artboard, click and drag that square to the very top-left corner of your artboard to set the grid to start in the top-left corner of your first artboard. You will see the '0' value move.
Step 4
Open the Layers panel (Window > Stroke).
Our next step is to define our font metrics (Type Anatomy) by setting up guides that Fontself honors. There are four main Ruler guides you should add, per row of characters. You will only need to set this once. Before we do, here's a quick guide to the main font metrics you should know:
- X-Height: The height of a lowercase part of a letter. This is typically defined by the height of a lowercase x.
- Ascender: The part of a lowercase letter that rises above the x-height, for example, in letters like b and d.
- Baseline: Basically the line on which all letters sit.
- Descender: The part of a letter that extends below the Baseline, like p, q, or y.
- CapHeight: The distance from the Baseline to the top of the uppercase letters.
Let's position our Ruler Guides onto our canvas. To place horizontal guides, position the pointer on the top ruler and drag down onto the canvas to make a Ruler horizontal guide. Add four horizontal guides. Label each guideline in the Layers panel (double-click on the layer to rename):
- Ascender (ASCENDER or ascender)
- CapHeight (CAPHEIGHT or capheight)
- Baseline (BASELINE or baseline)
- Descender (DESCENDER or descender)
Step 5
Now we need to add two other artboard rows: one row for Numerals glyphs 0-9, and the other for the 15 Punctuation marks.
Go to File > Document Setup > Edit Artboards. Select the first ten artboards, hold down the Shift and Alt keys, and drag down to duplicate the artboards.
Next, grab the 15 top artboards, hold down the Shift and Alt keys, and drag the set under the Numerals row.
Step 6
You will notice the Ruler Guides don't duplicate when you duplicate artboards.
Select the four horizontal Ruler Guides, and then hold the Shift and Alt keys and drag them down to the Numerals row.
Repeat the process to duplicate the Ruler Guides to the Punctuation row.
Step 7
And for the last part of our setup, we need to organize our layers.
From the Layers panel, double-click and rename 'Layer 1' to 'Guidelines'. Lock the 'Guidelines' layer and tap the Create New Layer icon +. Create three layers in the following order: Alphabet, Numerals, and Punctuation.
Now, our Layers panel is organized, and we are ready to start building our font!
2. How to Construct a Monospaced Pixel Font Using Adobe Illustrator
Step 1
Let's start building our monospace pixel font.
For the sake of this tutorial, we are going to create a Regular type font style, in uppercase letterforms, and in multicolor!
Commonly, when designing a font, we use strokes to make the design process more adaptable, but since pixel fonts are square, we will work with square blocks instead.
In the 7x7 artboards, we will build our letters within a 5x5 block width. First, we will draw each letter square by square, and then we will give each square a color Fill, to create our color font.
Make sure you are on the 'Alphabet' layer, and head over to the first artboard, so we can start drawing our first glyph, 'A'.
Grab the Rectangle Tool (M), and apply a black Fill and null stroke.
Because we have Snap to Grid on, we can easily draw our square blocks to make our 'A' shape. Create your 'A' style.
Step 2
Moving on, continue to use the Rectangle Tool (M), with a black Fill and null stroke, to create draw glyphs B to Z, on each individual artboard.
Keep in mind that all glyphs will be uppercase. This is a monospace sans serif font and should follow the five block width dimensions.
The character design itself is up to you. Make sure the letters are simple and easy to read when zoomed out.
Step 3
Next, we need to Group the shapes of each glyph—this will help Fontself Maker to turn each character into one glyph instead of two.
Grab the Selection Tool (V), and drag over to select the respective square shapes of each glyph, and then Group (Command-G). Group each of the 26 glyphs.
Then, in the Layers panel, we need to give each glyph group its shortcut key name. 'A' for A, 'B' for B, and so forth.
In order to name the sublayers, Expand the 'Alphabet' layer by clicking the > on the left. Double-click on the respective layer to rename. Then drag the layers in alphabetical order to save them in an easy-to-navigate hierarchy, from A-Z, as shown below.
Step 4
Moving on, let's create our Numeral glyphs.
Collapse the 'Alphabet' layer, Lock it, and move on to the 'Numerals' layer.
Grab the Rectangle Tool (M) from the Tools menu, and apply a black Fill and null stroke. Draw in numeral glyphs 0-9, moving from artboard to artboard, the same as we did for the alphabet glyphs.
Tip: Make sure, when creating the zero, to cross it from the center in order to differentiate it from an 'O'.
Step 5
Moving on, we need to group the shapes of each glyph, as we did with the alphabet glyphs.
Grab the Selection Tool (V) to select each glyph's shapes, and Group (Command-G).
After that, you can Expand the 'Numerals' layer, label each glyph, and layer in order.
Step 6
Next, we are going to include the short glyphs, such as commas, dashes, and periods, in the monospace sans serif font collection. The most commonly used ones are:
@ ? & # ! , . - x + = ( ) / ’
When creating the punctuation glyphs, you will notice you cannot create glyphs in the same width as the alphabet and numerals. For example, the following marks , . ! ' cannot maintain the same width or height, so wherever it applies, you should align with the CapHeight or Baseline if possible.
From the Layers panel, Lock the 'Numerals' layer and move on to the 'Punctuation' layer.
Using the same creation method and process we used in Steps 1 and 5, create the punctuation glyphs.
Step 7
When you're done, proceed by selecting each glyph's shapes and Group (Command-G).
After that, you can Expand the 'Punctuation' layer and name each glyph.
3. How to Color the Font Glyphs
Step 1
For the sake of this tutorial, I've decided to create a colorful monospaced font style, instead of regular black.
Once we have designed our 51 glyphs of the Alphabet, Numerals, and Punctuation, we can move on to coloring the monospace pixel font.
Look for color palettes on Coolors or Adobe Color. Our brains are receptive to certain color formulas, so choose an appealing color palette and upload it to your Swatches panel (Window > Swatches).
For a fun approach, I decided to go with seven rainbow pastel colors:
#ff6a4d#fcd363#65e0b3#66b1ed#925afb#ff83b6#d74983
Step 2
Let's start coloring! Unlock the 'Alphabet' and 'Numerals' layers.
We will color glyph by glyph. View > Hide Grid, for better visuals.
Select our color swatch group from the Swatches panel. Use the Selection Tool (V) to select the 'A' glyph.
Select the Live Paint Bucket Tool (K) and our pastel color swatches from the Swatches panel, and apply a different color to the square blocks.
Step 3
From the Layers panel, click on the eye icon on the left of the 'Guidelines' layer, to toggle the visibility off.
Continue to use the same method of coloring to color in the 50 remaining glyphs. It might take you a little time to go through, so be patient.
4. How to Create the Font Using Fontself Maker
Step 1
Now that our font characters are colored and ready, we can move over to Fontself Maker. Fontself Maker is an extension for Illustrator, designed for making fonts.
Open the Fontself Maker extension. Window > Extensions> Fontself Maker.
From the Layers panel, Toggle Visibility on for the 'Guidelines' layer, and Unlock the layer. Then Unlock Guides, View > Unlock Guides.
Delete the guidelines on both the 'Numbers' and 'Punctuation' guidelines, so we just have one set of guides to upload to Fontself Maker.
Step 2
We will upload each row of characters, one by one, to Fontself. Fontself makes things easy for you, once you have organized the glyphs and guidelines as we have.
Select the first row of alphabet characters, plus the Ruler Guides, and drag them into the A-Z space at the top of the Fontself window.
Then select the row of numeral characters in Illustrator, and drag them onto the 0-9 section of the Fontself window.
After that, select the punctuation characters in Illustrator, and drag them to the bottom of the Fontself window, the 'Any character' (Batch).
Step 3
You will see now that every glyph is placed in its own slot, and the marker beneath it shows the key associated with the glyph. Also, in the Fontself window, you will see a Live Preview of the letters showcased at the top of the panel.
You can see your font in action in the Live Preview window, and you can even test type it for yourself.
Clicking on the Live Preview cog icon on the far right allows you to change the Font Size (25pt), Alignment (Left Alignment), and Background Color (Black).
Step 4
By default, Fontself Maker adds spacing between glyphs. You can play with the letter spacing by clicking the + and - symbols next to the Letter Space tab. In the Fontself panel:
- Letter Space helps you adjust the spacing between all glyphs.
- Line Space adjusts the Line Height.
- Scale adjusts the size of all the glyphs and the spacing and kerning values.
Click the Advanced button in the Fontself panel, and let's change the spacing to a value of 70 by pressing + on the Letter Space tab. You will see the spacing change in the right column.
Note: If you want to adjust the spacing around a single letter, you can drag the sidebars left or right next to the glyph in the Fontself window.
Step 5
Now let's test out our font, to make sure we got the right spacing and keys for our glyphs. Go back to the Home panel, by clicking the Home tab on the top left of the Fontself panel.
Next, click the Install button in the Fontself Maker panel. This will install our font locally into Illustrator only, so we can test it some more and edit where needed. All the glyphs will be saved in an OpenType-SVG font, which means they will be visible only in Photoshop 2017+, InDesign 2019+, and Illustrator CC 2018+.
Give the font the Name: MonoPixel. Then go back to Illustrator.
Select the Type tool from the Tools panel, and our Font Family: MonoPixel from the Character tab in the top panel menu.
If you find an error and want to replace a glyph, then you need to delete the glyph from the Fontself panel, before adding and installing it again. This will place your new glyph at the bottom of the Fontself window. I personally prefer just to delete the set and reload them all again, so they are in order.
Step 6
Get back to the Fontself Maker panel, and click on the Font Info tab to set the name of the font and add other details if you like. I called my 'MonoPixel' font style: 'Awesome'.
Step 7
Once you have tried and tested the MonoPixel font and are ready to export your font outside Illustrator, get back on the Fontself Maker, in the Home panel, and click the Catapult button.
Fontself Catapult is a one-click easy solution to host your color fonts online.It will generate an OpenType file (OTF) that you can save, install, and use in OTF supporting software, web or mobile!
A window will open to give you the option to view your font on the web. Choose Firefox or Safari; they support OpenType-SVG color.
By default, your font will be private until you Publish it, and then you can have your monospace font download.
Congratulations, Enjoy Your Monospaced Font!
Wow, wasn't that easy?! Now you can customize your very own monospace font and make it available as a monospace font download!
I hope you learned what a monospace font is, and the process of transforming font glyphs in Adobe Illustrator and then turning them into an OpenType-SVG color font in Fontself. If you don't have time to create your own monospaced fonts, you can download our MonoPixel font from Envato Elements, or check out other great collection of monospaced fonts.
MonoPixel is a monospace sans serif font that comes in an Awesome font style. You can use it for display, headlines, or smaller subheadline text. Expand your font by adding some more glyphs or designing several versions of your typeface (like Bold, Italic, Black, or Light).
I’d love to see your monospaced font designs. Please share your results in the comments below and on social networks. Don't forget to tag #fontself!
Continue to expand your skills and learn other techniques. Here's a list of recommended tutorials that can help you:
Adobe IllustratorHow to Create a Color Font With Adobe Illustrator and Fontself Maker
FontsWhat Are Color Fonts?
FontsHow to Create Your Own Font
Font DesignHow to Create a Font in Adobe Illustrator
TypographyHow to Create a Nautical Tattoo Font
No comments:
Post a Comment