Final Project, Part 2: The Font

Making the Font

     After establishing my design plans, I got to work tinkering around with different shapes and motifs. Working with pixels has a unique set of challenges due to their square shape: they have difficulty doing smooth curves, and any diagonal is inherently very jagged. Thus, I wanted to use straight vertical and horizontal lines as much as possible in shaping my letters. I also decided that I wanted to make the letter height an odd number of pixels so the letters could be divided through the middle by a 1-pixel tall line, which I find aesthetically pleasing.
     The very first thing I tried was the slimmest letters, i and l. These were of particular importance because, as I noted in my last post, they require special attention (generally adding serifs) to make fit into a monospace font. I ended up drawing them like this:

I chose to place the serifs like that because I wanted to try something distinct from the other monospace fonts I'd found, which almost all had either a serif on both bottom edges or on neither, and I liked the asymmetric look of it. But now that those were out of the way, I had to figure out how to draw the normal letters. After doodling for a few more minutes, not really finding anything else I especially liked, I made this o:

     This was a key turning point. I really liked the look of having the vertical lines thicker than the horizontal ones, and giving the upper-left and lower-right parts of straight surfaces extra weight. This pattern even already applied to the i and l designs I made, so the font was already becoming cohesive. From the elements established in these three letters, I was able to begin designing the rest of the font. 

This is the final version I arrived at:

I have decided to call this font 90Script. The "90" comes from the fact that pixels are squares and thus use only 90 degree angles, and I chose "Script" both because it has a slightly script-esque appearance due to the symmetric weighting of the characters, and because code often consists of scripts.

Design Details

     Throughout 90Script, I tried to stick to the pattern of adding extra weight to the upper-left and lower-right corners of straight surfaces. Where this wasn't possible (such as on x), I tried to emphasize the diagonal from the upper-left to the lower-right corner. When I had to do a diagonal line, I tried to do them in a fairly consistent shape between letters. I also took care to make similar letters visually distinct from one another to help ensure that the font is easily readable. Some prominent examples of this include:

To distinguish U from V and u from v, I made the lower point of V and v off-center and added increased weight to the lower-right part, while making U and u very slim and flat at the bottom. I also didn't include serifs on V or v since that would make them closer in shape to a circle, and thus harder to see as angled.

To distinguish f from t, I shifted the vertical line to the left and did not include an upper serif on t.

To distinguish J from T, I shifted the vertical line to the right. 

To distinguish q from g, I compressed the circle and used a much more blocky descender.

To distinguish O from 0, I added a central marking to 0 (which is something many fonts do).

To distinguish 5 from S, I made the upper part of 5 offset one pixel to the right and gave its left edge sharp corners.

To distinguish l and |, I extended | one pixel below the baseline and got rid of the upper-right serif.

To distinguish periods from commas, I made the comma extend beneath the baseline and have a serif. To make colon and semicolon I essentially took my period and comma and added another period above them, though I also raised the : up above the baseline. This makes it more vertically centered with the text, which helps preserve the flow of reading (unlike the others, which require the viewer to shift their focus downwards) and thus supports the usage of colons (which signify that the next statement is corresponds to or is and example of the prior one). Conversely, I decided to keep the semicolon at a low position to ensure that it signifies a clear visual stop, which is very important in code because many languages use semicolons to indicate the end of a line.

One of the hardest challenges was finding a way to distinguish B, 8, and &. I opted to make B stand out by giving it hard corners on the left edge and identically sized top and bottom halves, and to contrast this I shrunk the top part of the 8 (as seen on fonts like OCR-A). To make & distinct against both I shrunk down both bulbs even further, aligned them to the left edge, and added the protruding parts on the right.

I also opted to keep the +, -, and = signs very simple and bold to make certain that they are legible, since those are very important in coding. Although this does make them fit in less with the rest of the font, I think it was a necessary trade-off.

Sample

I also made a sample of the font used as code. It's technically not written in any specific language here, but it is arranged in ways that are similar to real code format and syntax.

This is how that same sample looks at a 1:1 pixel scale: