What’s with that “code” font in Commercials and Movies?
You’ve probably seen things like the featured image of the article, or like this:
or this:
in movies, TV shows, commercials, and more.
If you’re not a software developer or don’t know much about software development, you might have wondered “what’s with this code font?” Or maybe you didn’t wonder — maybe you just take it for granted that developers all like to work in some mysterious environment that only prints out a robotic looking font in a way that computers and computer nerds can naturally understand. In fact, there’s a lot more to the “code font” than you might think, and the reasons for using it make sense.
So What Is the Font?
The font typically used for software development is called a monospace font. In this font, every character takes up the same amount of space. This includes any letters and numbers including i and 1, and even blank spaces made with the spacebar.
In fact, there is not one single monospace font. There are a ton of different monospace fonts available.
Courier and Courier new:
There are all kinds of different monospace fonts available. It’s really up to a developer’s preference and how they set up their machine for how the fonts and colors look. The one common factor in monospace fonts is that every character takes up the same amount of space.
Why Use a Monospace Font?
The monospace font may seem a bit mysterious to people who aren’t familiar with it. If you’re not a developer and someone asked you to sit down in front of a terminal and start coding, you might think that you have to write your code in a green font on a black background in Courier New. In fact, this is not the case and any modern terminal application you work with will allow you to select whatever colors or fonts you want.
Developers almost always use a monospace font because we don’t read code in the same way we read text. You can glean the meaning of a large block of text by briefly looking at pieces of the words and how they fit together. In fcat, msot poelpe can raed snetacnes whit the ltetres jmbuled aornud as lnog as the fsirt and lsat soudns are in the corerct sptos.
This is not the case for code. Code is a specific set of instructions that needs to follow an exact syntax in order to be understood by computers. Even a single misplaced character can stop an entire program from working.
Indentation is also particularly important for developers because it allows us to see how our program “flows.” In some sense, code is a river that breaks off into many branches or tributaries. When you run a program, you set a boat off down the river and make choices about which branches you will take. For example:
if (number > 5):
if (number % 2):
print "A!"
else:
print "B!"
else if (number > 0):
print "C!"
else:
print "D!"This is a simple program that you can read in the following way:
- If the given number,
numberis greater than 5… - …and it is divisible by 2, print “A!”
- …and it is not divisible by 2, print “B!”
- If the given number is not greater than 5 and it is greater than 0, print “C!”
- If none of the above conditions were satisfied (i.e. the number is not greater than 5 and the number is not greater than 0 (i.e. the number is negative)) print “D!”
It may be easier to visualize this as a graph / tree / river using the analogy from before:
This program may seem small or useless or trivial. However, it’s many small programs like this that do small calculations that form the building blocks of more useful programs.
Software developers learn how to read this branching code pretty early on. Code is not read like poetry or prose. Instead, you will learn to interpret chunks of code as individual symbols that you can recognize essentially by their shape. if (number > 5) has the same visual effect as…
Moreover, the indentation is important. Referring back to the above example:
if (number > 5):
if (number % 2):
print "A!"
else:
print "B!"
else if (number > 0):
print "C!"
else:
print "D!"You can see how the code branches by how far it’s indented. You can see that print "A!" is indented further than print "C!". This is a quick visual indicator that print "A!" depends on more branches than print "C!".
Compare this to code with no indentation:
if (number > 5):
if (number % 2):
print "A!"
else:
print "B!"
else if (number > 0):
print "C!"
else:
print "D!"This is much more difficult to read. In particular, it’s hard to tell exactly how you get to print "A!". Does it depend on the number being greater than 5, even, both, or neither?
The monospace font also comes into play. Compare the original example written in a monospace font to one written in a non-monospace font (known and hereafter referred to as a proportional font)— in particular the one the rest of this article is written in:
This could be worse, but hopefully you can see how a more complex program would be very difficult to follow. The characters don’t align vertically, and it’s difficult to visually scan and see where particular branches start and end.
You might think that you could improve the readability of a program in this font by indenting more for each line. This is true, but then you run into a problem: Indentation is inconsistent between different proportional fonts. This is because characters in different proportional fonts are different sizes and this includes spaces too. If you indent a lot and someone opens your program in a monospace font, it might look like this:
if (number > 5):
if (number % 2):
print "A!"
else:
print "B!"
else if (number > 0):
print "C!"
else:
print "D!"Developers like consistency in code, and being able to see code that looks essentially the same — at least in terms of the position of symbols — is a great boon. A monospace font also makes it much easier to control the printing of tables. For example:
| People | Score |
------------------
| 1 | 2 |
| 3 | 4 |
| 10 | 12 |
| 146 | 283 |If you copy and paste this, here is what you get with a proportional font:
This alignment would also be different with different proportional fonts too.
In addition to the benefits a monospace font offers for reading, it also adds benefits for writing. Looking at the examples and table above, you can see that the characters are positioned in a grid. This allows writers to easily and unambiguously move around in the code. If you move up and down, you’ll be back in the same spot. If you try to move up and down in a proportional font, you might be moved to a different spot.
In conclusion, there is nothing magical about the “code font” you might see in different media. It’s simply what has been widely adopted by software developers and others who work with code or text that requires consistent spacing across different platforms and for different people. The reality is that this monospace font is because of our own human limitations and for our own benefit. Coders use it as a crutch rather than because we can interpret them as runes using our magical powers. Computers read data using electricity light and don’t interpret fonts at all. Code that is assembled in a way a computer can read it has no font per se.
What’s That Famous Code Example Do?
I’ve seen this particular image and quite a few others like it… particularly in commercials where the seller is trying to get across that they do some really fancy stuff. I think I’ve even seen it in an IBM ad.
In fact this particular chunk of code is minified JavaScript. “Minified” basically means code that has all of its spaces removed. We can minify our program from earlier by writing it like this:
if(number>5):if(number%2):print "A!"else:print "B!";elseif(number>0):print "C!"else:print "D!"Many programming languages don’t care about spacing at all, and a computer could run this program perfectly fine. However, this would be much harder for a person to read and understand compared to the one with proper spacing.
So why do this? This is often done with JavaScript — the code that runs websites — in order to reduce the size of the code. When you go to a website, your browser has to download the JavaScript code to make the website run. The browser doesn’t care about spaces in the JavaScript code. If it has to download blank space, that’s just more to download. It may be counterintuitive, but blank spaces actually count as memory. Since the browser doesn’t care about these spaces and the downloaded code doesn’t need to be read by humans under normal circumstances, software developers often use a program to strip out the extra space to make the download smaller and faster — and make their website take less time to load.
So in fact the code from this image runs a website. It’s not doing some fancy mainframe security block chain IoT AI machine learning stuff. It’s probably just animating and increasing a counter when you click a button on a website.
But what does the code from the picture actually do?
It’s difficult to tell exactly what it does since this code is taken out of context and parts of it are missing or blurry. Minification also renames variables, so the code has a lot of things named a, b, and c that are meaningless to a person — again, the browser doesn’t care what the names are. The original names were probably things like counter, favorites, error, etc., but I have no idea what they originally were.
From what I can tell, this code is to be run a single time once the website has finished its initial load. Then, it does some styling and replacement of various text. It removes or replaces the letters ms- from some things which probably changes how some things look. It’s also doing some things with dates which could include replacing something like “current date” with the actual, programmatic date — or it could just be using the current date as an identifier since dates are constantly changing.
It might also be checking what browser the user is using. If they’re using Internet Explorer, do X. Otherwise, do Y.
In general, a lot of this code seems to be doing some things that are required to make minification work properly. There’s a lot of additional setup, like the "Date.RegExp.Object".split(".") which seems to be setting up some properties on common functionality that will be used later — but the space is probably saved later on.
In summary, this code doesn’t do much functionally, and doesn’t do anything interesting in and of itself. It seems like it might be something related to tracking a website’s user or perhaps advertising to them.
It’s certainly not intended to be read by a person. This is just Hollywood trickery!
