In this post I will provide tips on how to select a suitable font for code demonstrations.
One key factor in success when delivering a code demonstration is the visibility of your code. The font you use affects how easily I can read your code.
In this post I’ll discuss four characteristics to consider when selecting the font for your code:
- Character differentiation
- Character width
- Monospace/Proportional
- Ligatures
Character differentiation
The first thing you need to check is whether your font clearly differentiates different characters. A good test is to compare
- The number 0 from the letter ‘O’
- The number 1 from a lowercase letter ‘L’ or an uppercase letter ‘i’.
Variable names and assignments, API Keys, file paths, and URLs can contain a variety of characters. Selecting a font with good character differentiation can help avoid confusion when walking through your code.
Below is a character comparison for a variety of fonts you might find pre-installed in your code editors. Many code editors default to Consolas which has excellent character differentiation.
Character width
Another factor to consider is whether how much horizontal space is taken up by a single character. Ideally you want the code to fit on a single line without scrolling, so a narrower font may make it easier to display your code.
All the samples in the table below are the same font size.
At first glance Verdana and Segoe UI look similar, but Segoe is a narrower font so might be a better choice. You do need to be careful not to pick a font so narrow it becomes difficult to read such as TW Cen MT Condensed.
Monospaced/proportional fonts
General consensus is that you should always use a monospace (proportional) font for code. Monospace fonts use the same amount of horizontal space for each character.
The advantage to a monospaced font when displaying code is a string of 10 characters will always take up the same amount of space, so it’s easier to visualize variable lengths. Punctuation symbols can also be quite narrow and harder to see in non monospace fonts.
Ligatured fonts
Ligatured fonts are the fonts which have characters that connect to each other. If you are going to use a ligatured font for coding make sure it is designed for coding. e.g. Fira Code, Monoid, or Hasklig. unless they were designed for displaying code. Scott Hanselman wrote an interesting blog post discussing ligatured fonts.
Ligatured fonts have a very different look when programming, some people absolutely love it, but it might cause confusion to an audience that is not familiar with this type of font. The characters on the left are with ligatures, the characters on the right are without ligatures.
If you like ligature fonts, but your audience is confused by them, most code editors give you the ability to turn off ligatures for ligature supported fonts.
There are other decisions to make with regards to font for code demonstrations including font color and size, but picking a suitable font is a great place to start!
HockeyGeekGirl 