Drawing for Code

Pixels

Input was drawn over an 11‑pixel grid.

Input takes its aesthetic cues from monospaced fonts and pixel fonts designed for consoles and screens, but casts off the technical limitations that constrained them. Inspired by Matthew Carter’s process for creating Verdana, David Jonathan Ross began designing Input as a bitmap font. After settling on the overall proportions, he drew Input’s outlines on top of the 11‑pixel grid.

function url() { "\b(([\w-]+://?|www[.])[^\s()]+(?:\([\w\d]+\)|([^[:punct:]\s]|/)))" }

Input’s punctuation was designed to be large and clear in the context of code.

Like any good coding font, Input has generous spacing, large punctuation, and easily distinguishable characters. Much attention was paid to the size and positioning of symbols frequently used in coding — curly brackets, less-than and greater-than signs, the @ sign — characters that can easily be afterthoughts in the type design process.

agnop

The details of Input’s design address both stylistic and technical considerations.

While coding fonts of the past were forced to brave the harshest low-resolution conditions, Input is intended for small sizes on today’s high-resolution screens. Its modularity is an aesthetic choice as much as it is a technical one, a mix of straight sides, slightly closed apertures, and mechanical curves.

A Flexible Multipurpose System

Input departs from the limitations of the pixel grid to become a powerful and flexible system of widths, weights, and styles, each with Sans, Serif, and Monospaced variants.

With all of these variations, Input includes a grand total 168 separate styles. That might seem like overkill, and maybe it is. But the idea is to give you the flexibility to choose a few fonts that best meet your needs.

Dark type, light backgroundLight type, dark background
Input Thin-
Input Extra LightInput Thin
Input LightInput Extra Light
Input RegularInput Light
Input MediumInput Regular
Input BoldInput Medium
Input BlackInput Bold
-Input Black

Changing between Input’s finely-grained weights can counteract the halo effect of light type on a dark background.

Input has seven weights, from Thin to Black. The same font weight can appear differently depending on your rendering engine and color palette, and Input’s finely-grained choices allow you to select the one that feels best in your environment. The core weights (Light, Regular, Medium, and Bold) have been manually hinted to be crystal clear at the smallest sizes across all modern platforms.

Multiple Widths to Work With
Multiple Widths to Work With
Multiple Widths to Work With
Multiple Widths to Work With

Input Normal, Narrow, Condensed, and Compressed.

In addition to the weight range, Input has four widths, from Normal to Compressed. If you work on a smaller screen or with long lines of code, a narrower font will save precious space, and allow more characters to appear on the screen. Narrow fonts can also be useful when viewing multiple files side-by-side.

glyph.antialias(30, height*5)
yph.nts(3, heht5)
yph.antaas(30, heht*5)

Input offers alternate forms of a, g, i, l, 0, *, {}.

When it comes to the most readable forms of easily confusable characters, everyone has their own preferences. Input allows you to customize the forms of seven key characters: lowercase i and l (various serif arrangements), lowercase a and g (one or two stories), the numeral 0 (dotted or slashed), the asterisk (superscripted, or at centered height), and curly braces (curly or straightened).

Like any professional typeface, these alternates are accessible via OpenType features. But since most source code editors are limited in their support of OpenType features, you can use the customize form to download modified versions of the font files with your choice of defaults.

Latin / Western European
A À Á Â Ã Ä Å Ā Ă Ą Ǻ B C Ç Ć Ĉ Ċ Č D Ď E È É Ê Ë Ē Ĕ Ė Ę Ě F G Ĝ Ğ Ġ Ģ H Ĥ I Ì Í Î Ï Ĩ Ī Ĭ Į İ J Ĵ K Ķ L Ĺ Ļ Ľ M N Ñ Ń Ņ Ň O Ò Ó Ô Õ Ö Ō Ŏ Ő P Q R Ŕ Ŗ Ř S Ś Ŝ Ş Š Ș T Ţ Ť Ț U Ù Ú Û Ü Ũ Ū Ŭ Ů Ű Ų V W Ŵ Ẁ Ẃ Ẅ X Y Ý Ŷ Ÿ Ỳ Z Ź Ż Ž Æ Ǽ Ð Ø Ǿ Þ Đ Ħ IJ Ŀ Ł Ŋ Œ Ŧ a à á â ã ä å ā ă ą ǻ b c ç ć ĉ ċ č d ď e è é ê ë ē ĕ ė ę ě f g ĝ ğ ġ ģ h ĥ i ì í î ï ĩ ī ĭ į j ĵ k ķ l ĺ ļ ľ m n ñ ń ņ ň o ò ó ô õ ö ō ŏ ő p q r ŕ ŗ ř s ś ŝ ş š ș t ţ ť ț u ù ú û ü ũ ū ŭ ů ű ų v w ŵ ẁ ẃ ẅ x y ý ÿ ŷ ỳ z ź ż ž ª º ß æ ǽ ð ø ǿ þ đ ħ ı ij ĸ ŀ ł ʼn ŋ œ ŧ ſ  fi fl
Greek
Α Ά Β Γ Δ Ε Έ Ζ Η Ή Θ Ι Ί Ϊ Κ Λ Μ Ν Ξ Ο Ό Π Ρ Σ Τ Υ Ύ Ϋ Φ Χ Ψ Ω Ώ Ω α ά β γ δ ε έ ζ η ή θ ι ΐ ί ϊ κ λ μ ν ξ ο ό π ρ ς σ τ υ ΰ ϋ ύ φ χ ψ ω ώ
Cyrillic
А Б В Г Ѓ Д Е Ѐ Ё Ж З И Ѝ Й К Ќ Л М Н О П Р С Т У Ў Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я Ґ Ђ Є Ѕ І Ї Ј Љ Њ Ћ Џ а б в г ѓ д е ѐ ё ж з и й ѝ к ќ л м н о п р с т у ў ф х ц ч ш щ ъ ы ь э ю я ђ є ѕ і ї ј љ њ ћ џ ґ
Diacritics
ⁿ ̀ ́ ̂ ̃ ̄ ̆ ̇ ̈ ̊ ̋ ̌ ̒ ̦ ̧ ̨ ^ ~ ´ ` ˝ ˆ ˇ ˘ ˜ ˉ ¨ ˙ ˚ ¸ ˛ ΄ ΅
Numbers
0 1 2 3 4 5 6 7 8 9 ¼ ½ ¾ ⅛ ⅜ ⅝ ⅞ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ¹ ² ³ ⁰ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹
Punctuation
_ – — ― ( ) [ ] { } ' " ʻ ’ “ ” ‛ ‚ „ ‹ › « » * † ‡ . , : ; … ! ¡ ‼ ? ¿ / \ ∕ | ¦ ∙ • · ‗ ′ ″ ‾
Math
+ − ± ÷ × = < > ≤ ≥ ≈ ≠ ⎯ ∂ ∆ ∏ ∑ µ √ ∞ ∟ ∩ ∫ ≡ ⌡
Symbols
@ & # % ‰ $ ¢ £ ¤ ¥ ₣ ₤ ₧ € ƒ © ® ℗ ™ ° ℅ § ¶ ℓ № ℮ ↕ ↨ ¬ ← ↑ → ↓ ↔ ■ □ ▪ ▫ ▲ ► ▼ ◄ ◊ ○ ● ◦ ☙ ♀ ♂ ♠ ♣ ♥ ♦ ♪ ✓ ❧  
Box Drawing
⌐ ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟ ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏ ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟ ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯ ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿ ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊ ▋ ▌ ▍ ▎ ▏ ▐ ░ ▒ ▓ ▔ ▕ ▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟
Stylistic Alternates
                                                                                                

Input’s full set of glyphs

Input covers the WGL character set, which includes all major Western and Eastern European languages written in the Latin, Greek, or Cyrillic scripts. Input’s Cyrillic was designed with feedback from Russian typeface designer Maria Doreuli.

correctInput = (b >= 0) && (e >= 0);
while (!correctInput) {
  cout << "Something wrong! Try again ..." << endl;
  cout << "Re-enter base and exponent: ";
  cin >> b >> e;
  if (!cin) { 
    cout << "Disaster! Terminating program." << endl;
    exit(-1);
  }
  correctInput = (b >= 0) && (e >= 0);
}
correctInput = (b >= 0) && (e >= 0);
while (!correctInput) {
  cout << "Something wrong! Try again ..." << endl;
  cout << "Re-enter base and exponent: ";
  cin >> b >> e;
  if (!cin) { 
    cout << "Disaster! Terminating program." << endl;
    exit(-1);
  }
  correctInput = (b >= 0) && (e >= 0);
}

Even if your coding app won’t let you adjust line spacing, you can change Input’s built-in line spacing.

Many source code editors don’t offer their users control over line spacing, instead choosing to rely on the metrics built into the font. Input’s customize form also allows you change those built-in metrics, so you can choose how many lines you will see on your screen at once, and how tightly packed you want them to appear.

Additionally, while a growing number of source code editors let you choose any number of fonts, many still limit your font selection to a single four-style family (Regular, Italic, Bold, and Bold Italic). The customize form also allows you to hack together your own custom four-style family from any combination of styles.

Proportional fonts? For code?

Usually, monospaced fonts aren’t great for setting normal text, but they have become the de facto standard for setting code. Since all characters are constrained to the same fixed width, the page becomes a grid of characters, something that drastically simplified the mechanics of typesetting in early computers. However, monospacing comes at an aesthetic cost: wide characters are forced to squeeze; narrow characters are forced to stretch. Uppercase letters look skinny next to lowercase, and bold characters don’t have enough room to get very bold.

As writing and managing code becomes more complex, today’s sophisticated coding environments are evolving to include everything from breakpoint markers to code folding and syntax highlighting. The typography of code should evolve as well, to explore possibilities beyond one font style, one size, and one character width.

val.minimum({'MINSECONDS': 3});
val.minimum({'MINSECONDS': 3});

Monospaced fonts squeeze all characters into the same sized boxes, even between weights.

val.minimum({'MINSECONDS': 3});
val.minimum({'MINSECONDS': 3});

Proportional fonts allow each character to occupy as much or as little room as is needed.

This is why, in addition to a monospaced version, Input offers proportionally-spaced Sans and Serif font families specifically designed for code and data. Unlike most proportional designs, these fonts adopt the helpful attributes of a monospaced design — generous spacing, large punctuation, easily distinguishable characters — while allowing each character to take up the space that it needs.

The proportional styles provide a more comfortable alternative to the monospaced fonts used for everything from text composition to correspondence to code. The capitals get wider so they can feel at home with the lowercase. The Bold weight gets wider so it can feel at home with the Regular. The Condensed styles can work together alongside the Normal width, and the Serif can provide an alternative texture to the Sans.

In code, indentation is an important (and sometimes semantically significant) indicator of hierarchy and scope. When using a proportional font, the only indentation that matters is the indentation at the beginning of the line.

void setup() {
size(640, 480);// set the document size
if (value > 255) {// check for a valid value
fill(value);// give us some color grey

What if coding applications managed semantic vertical alignment automatically?

Sometimes programmers rely on the monospaced grid to create a second column of values or comments on the right side of the page. It’s true, these secondary columns won’t align in a proportionally spaced font. But why are we making these columns in the first place? Even in a monospaced font they can be finnicky and hard to maintain.

In virtually every other form of typography, the responsibility of alignment is given to the typesetting application, not the font. If source code editors can highlight syntax, they could also interpret tabs and syntax to create true, adjustable columns of text.

<div><span class="highlight">M</span></div>
<div><span class="highlight">M</span></div>
<div><spam class="highlight">M</spam></div>
<div><span class="highlight">M</span></div>

Proportional fonts can make it easier to spot typos.

On two lines that begin the same way, a proportionally spaced font will still align the indentation and the identical portions. The alignment will diverge once the text begins to differ, which can actually be helpful in spotting typos and errors that a monospaced font might obscure. At the same time, Input Sans and Serif were designed so that no character is extremely narrow, so a missing character will still make a visible dent in the length of a line.

# Who knows what this does...
def _breakCycles(self):
    super(ShowMouseCoordinatesTextBox, self)._breakCycles()
    removeObserver(self, "mouseMoved")
    removeObserver(self, "mouseDragged")
    removeObserver(self, "mouseUp")

Different styles of Serif, Sans, Bold, and Italic used differentiate different kinds of code.

Syntax highlighting is commonly used to demarcate different kinds of text: strings, literals, keywords, constants, tags, attributes, elements, selectors, and so on. I’ve been experimenting with using syntax highlighting to change the font style as well, mixing Sans and Serif, weights, and widths to vary the “typographic color” of the page as well as its actual color.

In Object Oriented programming, for example, you could use Sans as the primary font for keywords/literals/etc, with Serif to set apart strings, Italic to set apart comments, and Bold to set apart function and class definitions.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/css/style.css" type="text/css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    <h1>Input: Fonts for Code</h1>    
    <p>Like many programmers, David Jonathan Ross had used monospaced fonts for his code. That was before he questioned the convention and answered with a fresh approach for data and programming aesthetics. Input finds inspiration in early computer consoles but looks towards a typographically rich future, where coding environments overcome technical limitations and allow for full control over one’s display; FB 2014</p>

HTML code set with various styles for different kinds of code.

With markup languages like HTML, you could set tags in Input Serif, which sets a document’s markup apart from its content. Condensed styles and italics can further distinguish secondary languages like JavaScript or CSS.

PID    COMMAND      %CPU TIME     #TH   #WQ  #PORT #MREGS MEM    RPRVT  PURG   CMPRS  VPRVT  VSIZE  PGRP  PPID  STATE    UID  FAULTS     COW      MSGSENT    MSGRECV    SYSBSD
25645  top          16.3 00:02.03 1/1   0    22    50     7536K  7312K  0B     0B     74M    2433M  25645 25642 running  0    15210+     74       2588455+   1294209+   6167+
25642  bash         0.0  00:00.01 1     0    19    32     656K   488K   0B     0B     28M    2395M  25642 25641 sleeping 501  595        162      43         16         446
25641  login        0.0  00:00.02 2     0    30    52     1056K  732K   0B     0B     88M    2446M  25641 147   sleeping 0    861        155      103        45         1382
25634  mdworker     0.0  00:00.07 3     0    56    70     2836K  1864K+ 0B     0B     53M+   2446M  25634 133   sleeping 501  2162       237      520        238        1434
25624  mdworker     0.0  00:00.14 4     0    58    92     4112K  3008K  0B     0B     91M    2484M  25624 133   sleeping 501  3347       245      636        272        2613
25591  mdworker     0.0  00:00.14 3     0    56    105    3704K  2440K  0B     0B     81M    2474M  25591 133   sleeping 501  2743       242      876        340        3181
25571  com.apple.iC 0.0  00:00.31 5     0    87    86     3664K  2884K  0B     0B     98M    2480M  25571 1     sleeping 501  3364       272      998        447        6526
25414  installd     0.0  00:00.52 2     0    49    192    18M    17M    0B     5876K  120M   2501M  25414 1     sleeping 0    7199       155      1254       345        24320
25366  com.apple.We 0.0  00:00.07 4     1    135   120    1312K  812K   0B     3680K  92M    3524M  25366 1     sleeping 501  4572       386      1594       694        2739

Input offers narrow widths and monospacing when they are useful.

If you work in a Terminal, or just prefer working with monospaced fonts, Input Mono is one of the most extensive and flexible monospaced fonts out there. Input Mono offers fine-tuned control over the monospaced grid, with an array of widths and line-heights, not to mention Input’s other customizable features.

A Font for All Things Data

Data-oriented content, from stock listings to database records to weather reports, are often intentionally presented in raw form. While most typefaces are intended to help tell the text’s story, data itself is meant to be interpreted. Input’s matter-of-fact design conveys information objectively, but with great flexibility.

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

Writers gravitate towards monospace fonts for text composition. This practice goes all the way back to the advent of the typewriter and continues today in many text editors, from bare-bones applications like Notepad to specialized word processors like Writer. Input’s large punctuation, generous spacing, and unambiguous letter designs make it particularly writer-friendly — a nice alternative to your computer’s default monospaced font.

MED. SHOT

A middle-aged man runs up to a group of several people, pointing wildly toward the ship and yelling irrationally:

MAN

They’re here! They’re here!

He runs off toward another group as we—

DISSOLVE TO:

MONTAGE

A series of short DISSOLVES showing:

1. A man dashing up to a crowded Washington street corner shouting wildly and gesticulating in the direction from which he came.

Screenplays present a particularly interesting typographic case. Traditionally, they are set in 12 pt Courier, not a particularly comfortable choice, but supposedly one that helps readers use the number of pages to predict the amount of screen time a script will produce. 12 pt Input Mono Narrow will approximate Courier’s copyfit, or if you’re willing to break with tradition, 10pt Input Serif provides a contemporary alternative to Courier’s look and feel.

Readability, Writeability

Reading code and data is nothing like reading a book. We rarely start at the beginning, reading one line at the time until we reach the end. Instead, we’re skipping around, scanning many lines at once. We have to quickly make sense of what we are looking at, and typography can help us see the complex structures that exist within our simple, plain text sources.

And this is what Input can help make possible. We’ll need some help from source code editors and word processors in order to make it all accessible, but a flexible, customizable font family is a good start.

By mixing typographic variation with the power of syntax highlighting, by composing text that transcends a fixed-width grid, and by choosing and combining multiple font styles, we can all end up with code and data that is ultimately nicer to read and write.