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()
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.
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.
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 background | Light type, dark background |
| Input Thin | - |
| Input Extra Light | Input Thin |
| Input Light | Input Extra Light |
| Input Regular | Input Light |
| Input Medium | Input Regular |
| Input Bold | Input Medium |
| Input Black | Input 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.
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.nts(3, heht5) yph.antaas(30, heht*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.
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.
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.
Monospaced fonts squeeze all characters into the same sized boxes, even between weights.
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.
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.
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.