Code Font Name

[Jules Altier]

TipThe font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with a comma. Read more about fallback fonts in the next chapter.

Have you noticed that your eyes start to blur after going through hundreds and hundreds of lines of code? Or perhaps you end up with a headache after a day of programming? If so, it might be time you switched to a different font.

Many programmers prefer monospaced fonts, so I should probably take a moment to explain what those are. Monospaced fonts are those where all or most characters take up the same amount of horizontal space.

I must confess, when I was younger, I used to wonder why Notepad used this typewriter-style font that differs from the fonts used in other text editors such as Microsoft Word. Now, in hindsight, it seems obvious that this is because many programmers use Notepad to edit their code.

If you like customizing things to suit you, you might want to check out Input. Rather than being one single font, it is a flexible system of fonts intended for programmers. For example, you can choose between monospaced and proportional fonts and decide on your preferred width, weight, and style.

Adding up all the variations available, Input offers as many as 168 individual styles. For some people, this might feel like they are spoilt for choice. But others will welcome the opportunity to fine-tune their programming font so that it suits them perfectly.

DejaVu Sans Mono is no exception to this but is specifically intended for programmers due to its readability and distinguished characters. Due to its free, open-source nature, DejaVu Sans Mono comes bundled with many operating systems, including Linux. So, if you already have this font on your computer or laptop for programming, you might want to try it before you go to the bother of installing another one.

But One feature I particularly like with JetBrains Mono is its increased letter height. Although characters are standard width, lowercase letters are taller. This significantly reduces the length of your lines of code.

However, unlike the other fonts on this list, MonoLisa is not free, starting at $59.50 for the Basic version. So, before deciding whether to buy, you might want to take a look at the character set and font playground.

In the font playground, you can see how the code looks for various types of code, such as JavaScript, CSS, and PHP. You can also switch the ligatures on and off to see what the code looks like with and without them.

I think it's very important to differentiate code text from normal text as it is very much another language, and it's standard proceedure to differentiate text written in other languages--usually using italics.

A good example of sites using code differentiation is the Stack Exchange family, as you may have noticed it's very important to differentiate code when asking programming questions, in no small part because the different, usually monospaced font, makes code easier to read.

Here's a good list of "Good programming fonts", monospaced fonts are usually the default for readability's sake as they clearly separate letters so you never have to wonder if that's an rn or an m. Clarity of l, I and 1 (l, I and 1) are very important as well, as you can see l and I are virtually identical using UX.SE's default font, but clearly identifiable in the nice monospaced fonts they use for code.

While I do recommend using a different font, using other methods of highlighting can be helpful too; if you have a programmer audience they will likely appreciate some consistant variable name/method name/ect highlighting similar to popular IDEs and editors like Notepad++. I believe Stack Overflow attempts to do this.

Yes, that is a good idea, as it will improve the readability of the document. StackExchange actually does this very well in my opinion. Notice that the background color is also slightly changed. This signals to the user that the text below is in a different context. You can also include a dashed outline if changing the background color is not an option.

These fonts have character proportions that are more natural than others, and are very easy to read in general. Unlike other fonts, such as Microsoft's Consolas, they read well regardless of the user's anti-aliasing or clear-type settings.

For use on your blog, just wrap the text in a tag, and style it through CSS. For use in print, you may need to license use of the font. The MS fonts may be licensed through Ascender Fonts, and the last one is free from the Gnome project.

It can be useful to delineate the code - even when it's just variable name - by using another font as it can distinguish between an "instance of a class" and class called instance. This will be especially true if your names are sensible class/method/property names (like car, person, height) which could appear in the text anyway. This acts as reinforcement that you are talking about your code rather than the things that they represent.

Given you are including code, I'm going to assume that you are writing for a technical audience, in that case Courier New or Consolas are probably good choices for the font. They are readable and what the reader will be familiar with.

And opening a compiled font file in Glyphs is reverse-engineering including some guesswork, so that is not a good idea for verifying fonts. The process I described above is hard to reverse, because it is not reliably possible to tell which part of the family name was originally meant as style name. For inspecting compiled fonts, I suggest tools like OTMaster, Font Table Viewer, or online tools like FontDrop.

One issue with putting the internal company font code as a prefix is that the styles for that family will be scattered all throughout the font list. We already had that problem with a bunch of Font Company fonts that always put a letter in front of the name from the style. For instance Avant Garde Condensed Bold would actually show up as BCAVGarde in the list.

Adding the suffix to the style name messes up the style linking and compatibility between apps (if you open a formatted document in different apps, the font selection may be different). And you end up with two very similar styles in the family. The can confuse the user.

On the contrary, you may run into legal issues because if you create modified versions of the font, the license usually stipulates that the family name must be different. It is probably best to double check in the original font EULA.

I talked to one of the other graphic designers here and we decided to compromise by putting the font code at the end of the font family name as suggested. It will make the font list pull down longer, but at least the code will be part of the font name.

In the spirit of open-source, many designers have released their programming fonts for free, much of them on sites like GitHub. The community loves and recommends these fonts, so feel free to download them and check them out.

Proggy is loved in developer circles for its simple but effective look, especially for C and C++ coding. You have your usual features like a slashed zero and differentiated letters and additional optimization like vertically centered asterisks and axis-aligned arithmetic operators.

Proggy comes in several variations, including a vector version of the font and over a dozen bitmap versions that change how certain characters are rendered. Pick the one you like best and get to coding!

Adobe has published several open-source fonts in their Source Sans family, and this one is monospaced and made explicitly for UI. Though the regular weight will work for most programming applications, a range of weights is available if you need them.

If you need a super flexible font available in multiple styles and one that looks good in any situation, or you keep running into issues with the popular bitmap fonts in particular programs, try out Input.

There are 168 styles in total, and you can swap out character defaults for certain symbols to your taste. You can also adjust line spacing. Give the preview on their website a try to see just how versatile it is.

Need a coding font? Hack has every practical feature you may need: Bold, italic, and both combined, Powerline support, and carefully designed characters to improve legibility on the screen. No more squinting and no more headaches.

Cascadia Code is the default font for the Windows Terminal and Visual Studio. It includes a default, mono (no ligatures), italic, and cursive font, and it also has extra support for embedding Powerline symbols.

In addition, the font is known for its ligatures, both functional and stylistic, though you have the option to enable a package without these. Reception has been mixed among developers; some hate it (or prefer the old default, Consolas), while others love it.

Anonymous has a long history beginning in the mid-90s, with a bitmap font developed for Macintosh ported to TrueType in 2001. Now that classic font has been remastered, you get four fixed-width typefaces explicitly designed for programmers.

Not everything good comes free, and some of the best coding fonts out there are premium and paid. While you can always try an open-source font instead, you may enjoy the extra careful design, research, and work put into these fonts.

Tired of boring monospaced fonts that are ugly to look at and cause eye strain? Monolisa is a unique font that follows monospaced standards to reduce fatigue while being much more pleasing to look at.

There are six styles with an italic set for each, support for various symbols and languages, and it all has a pleasant enough design that you could use it for non-code purposes, and no one would bat an eye.

3a8082e126