Lisnoti Lisnoti Code

Lisnoti Code

Lisnoti Code is a proportional font for coding.

The case for using proportional fonts for code comes down to readability and efficiency. It has been well made by Martijn Storck, Nelson Minar and David Jonathan Ross (and I've had a go here).

But font design still matters:

  • Il1 and O0 need to be clearly distinguishable.
  • Programming languages use hyphen as a minus sign (−), but it looks like short dash (-) in most fonts.
  • Proportional fonts have narrow spaces that make indentation tight and errors hard to spot.
  • Ligatures make multi-character operators like >= or |> clearer by drawing them as single symbols, >= or |>.

Lisnoti Code addresses all of these issues. Try it out below.

Get Lisnoti Code

Version 0.902 · regular, italic, bold and bold italic · free under the SIL Open Font Licence

Try the non-code version, Lisnoti, for general use. It is particularly helpful if your content is math-heavy.

Try it

Pick an example, or type in the left-hand box. The right-hand box shows the same code in a monospaced font, at the same size, and the widths are measured in your browser.

Compare with

Lisnoti Code

JetBrains Mono


				

			

			

		

	







	

		
Key features

		

			Lisnoti Code is Lisnoti set up for programming. It keeps every character Lisnoti has,
			and changes only what code needs.
		

		

			

				
No lookalikes

				
Il1 O0 Il1 O0 Il1 O0

				
Capital I, small l and one are always distinct, as are capital O and zero, in every style.

			

			

				
A real minus

				
-5 + x - y test-main

				
Many monospace fonts make the hyphen a compromise between true hyphen and true minus. Lisnoti Code uses context to do both.

			

			

				
Spacing designed for code

				
if ready:
    start(now)

				
Lisnoti sets runs of spaces as wide spaces to make indentation clear but uses standard space between words.

			

			

				
Trees that line up

				
src/
├── main.py
└── tests/
    └── test_main.py

				
Box-drawing characters are as wide as the wide space, so directory trees join up and line up.

			

			

				
Code-friendly ligatures

				

					
Equality==========!=!=!==!==

					
Relations<=<=>=>=

					
Arrows->-><-<-=>=>

					
Pipes|>|>||>||>|||>|||><|<|<||<||

				

			

			

				
Comprehensive symbols

				
=≠ ≡≢ <≤ ⊂⊆ ±∓ ∞∝ ∪⊔∨⊻ ∀∃∈∉∅ √∫∂ ∑∏⋀⋃ β⁽⁰⁾ΔΘ x₀ f′ ⊕ ✓✗☑♔♞♠ $£€₹⃁

				
5,700-plus characters, including every operator Julia parses, so nothing is substituted using another font.

			

		

	







	

		
FAQ

		

			

				Aren't monospaced fonts better for code?
				

					Mostly they are just familiar. Many objections to proportional fonts come down to
					people simply being used to monospace and unable to imagine anything else. A lot of
					coders aren't even aware that most editors and IDEs have excellent support for
					proportional fonts.
				

				

					Why not try Lisnoti Code for a week before deciding? (But do read the other FAQs
					first.)
				

			

			

				Does indentation still work?
				

					Yes. Indentation lines up because every line indents with the same characters.
					Lisnoti Code helps by making runs of spaces wide so that each level is easy to see,
					while using normal spaces between words for readability.
				

			

			

				What about code that aligns text in columns?
				

					Trying to align columns in a proportional font doesn't work. But that's arguably a
					brittle way of writing code – a one-line change can require re-padding other
					lines, which is diff-unfriendly. Many coding standards discourage aligning trailing
					comments and aligning at = signs for this reason.
				

			

			

				Why have math symbols in a coding font?
				

					Math and other symbols turn up in documentation all the time. And in Julia they are
					actual code.
				

				

					When a character is missing from a font, editors either show a meaningless
					replacement box or borrow the missing character from another font, which rarely
					matches. With Lisnoti Code you're unlikely to have this problem.
				

			

			

				Ligatures don't work on my setup
				
Many editors switch ligatures off unless told otherwise. In VS Code, add these to your settings:

				
"editor.fontFamily": "Lisnoti Code",
"editor.fontLigatures": true

				
Other editors usually have a similar setting.

				

					If every space looks the same width, the app has switched off contextual
					alternates (calt) as well. To keep the spacing and the short hyphen
					without the ligatures, VS Code takes
					"editor.fontLigatures": "'liga' off, 'calt' on".
				

				

					Safari, and every browser on an iPhone or iPad, cannot apply the spacing rule, so
					Lisnoti Code's web stylesheet switches it off there (which makes all spaces
					moderately wide).
				

			

			

				When is monospace the right choice?
				

					Sometimes monospace is exactly what you want: editing hex data, writing assembly,
					working in a terminal, or drawing ASCII tables and art.
				

				

					The VS Code settings below set terminal.integrated.fontFamily
					to a monospace family for precisely this reason. Similar settings may be available in
					other IDEs.
				

			

		

	







	

		
Every character

		
Lisnoti Code has over 5,700 characters. Pick a group, then point at or tap a character.

		

			

			

				

				
			

		

	







	

		
Get Lisnoti Code

		
There are three ways to use Lisnoti Code, all free.

		

			

				
1. Install it

				
Download the four fonts and install them in the usual way.

				
    
					
  • Windows: select the files, right-click and choose Install.
    • 
					
  • Mac: open the files in Font Book.
    • 
				

				
LisnotiCode-ttf.zip

				
VS Code switches the ligatures and spacing off unless told otherwise, so add these to your settings:

				

					
"editor.fontFamily": "Lisnoti Code",
"editor.fontLigatures": true,
"terminal.integrated.fontFamily": "Consolas, Menlo, monospace"

					
				

				
A terminal needs a monospaced font, so the last line keeps VS Code's terminal on one.

			

			

				
2. Link to lisnoti.com

				
Add the following line to each page's <head>:

				

					
<link rel="stylesheet" href="https://lisnoti.com/lisnoti-code.css">

					
				

				
and name the font in your CSS:

				

					
code, pre { font-family: 'Lisnoti Code', monospace; }

					
				

				
Pages fetch only the subsets they need: about 26 KB per style for English text.

			

			

				
3. Host it yourself

				

					Download LisnotiCode-woff2.zip,
					copy the folder into your site and link its lisnoti-code.css. Keep the
					stylesheet in the folder with its font files.
				

				

					For one file per style, use
					LisnotiCode-woff2-monolithic.zip
					and its lisnoti-code-monolithic.css.