Update code font from Consolas to Cascadia Code with ligature
A decade ago, I blogged that I switched my code font from Courier New to Consolas. They are both monospaced. The difference is:
- Courier New is an old font introduced in Windows 3.1.
- Consolas is introduced with Windows Vista/Office 2007/Visual Studio 2010. It always uses ClearType, which is designed for LCD screens and other flat panels which arrange their pixels in vertical stripes of red, green and blue.
After using Consolas for 10+ years, now I am switching code font to Cascadia Code.
Cascadia and Windows Terminal
A week ago, Widows Terminal 1.0 is released by Microsoft, along with a dedicated Cascadia fonts. Cascadia is open source and is named after Widows Terminal’s code name. I personally prefer the name “Seattle”, where I live.
Microsoft actually released 2 Cascadia fonts along with Windows Terminal:
- Cascadia mono: the normal monospaced font
- Cascadia code: the fancy version of Cascadia mono, with programming ligatures
- Cascadia mono PL: Cascadia mono plus powerline symbols
- Cascadia code PL: Cascadia code plus powerline symbols
They are designed by Aaron Bell from Saja Typeworks. Microsoft recommends Cascadia Code for terminal apps and code editors.
The font design looks good for me, except number 7 and letter f looks inconsistent with others:
Text ligature
Ligature means two or more graphemes are joined as a single glyph. The most example is that e and t can be joined as &. The following are examples of joined letters:
Here are some ligatures examples in Unicode (Multiple letters/single ligature/Unicode/HTML):
- A E/Æ/U+00C6/Æ
- a e/æ/U+00E6/æ
- O E/Œ/U+0152/Œ
- o e/œ/U+0153/œ
- f f/ff/U+FB00/ff
- f i/fi/U+FB01/fi
- i j/ij/U+0133/ij
- s t/st/U+FB06/st
- f f i/ffi/U+FB03/ffi
CSS also support ligature with properties font-feature-settings and font-variant-ligatures.
I used to practice calligraphy in Chinese and English, but personally I am not in favor of ligatures.
Code ligature
Programing ligature means to join code symbols as a single glyph. For example, in terminal or code editor,
- “greater than or equal to” operator >= can be joined as ≥
- “not equal” operator != cam ne joined as ≠
- “double arrow”operator => can be joined as ⇒
Recently code ligature become popular because of the Fira Code font based on Fira Mono from Mozilla, Monoid font, Hasklig font, etc. Here is a detailed comparison.
Ligate in programming language is said to improve readability. Personally I do not have a strong preference. There are also some people who do not like ligature at all. In Cascadia Code, the following are some examples of how programming operator characters are joined as ligatures in this font:
++ -- ** && !! || %% ;; ??
+++ --- *** www
# ## ### ####
/= ^= =~ ~- -~ ~~ ~= ~@ ?.
#{ #( #_ #_( #[ ]# #? #: #= #!
<= >= <> <<< >>>
== != =/= === !== =!= =:=
<== ==> <=> => <<= =>> >>= =<< <=< >=>
<< >> -< >- <<- ->> >>- -<< <-- -->
<- <-> ->
<$ <$> $> <+ <+> +> <* <*> *> <~ <~> ~>
</ /> </> <!-- -->
<||| <|| <| <|> |> ||> |||>
.. ... :: ::: .- .= := ::= ..< <: :> :< >:
__ -| _|_ |- |= ||=
[| |] {| |}
0xFF 1x2
Powerline
Powerline was a status line plugin for vim. Powerline symbols (U+E0A0 to U+E0A2 and U+E0B0 to U+E0B3) are extra box-drawing characters that could be useful for displaying status.
- U+E0A0
- U+E0A1
- U+E0A2
- U+E0B0
- U+E0B1
- U+E0B2
- U+E0B3
Install and configure
Cascadia Code is installed along with Windows Terminal. You can also download and install Cascadia Code PL from official release page: https://github.com/microsoft/cascadia-code/releases. With chocolatey, it can be installed by: choco install cascadiacodepl. You can also manually install it for Linux etc..
In Windows Terminal, the default font is Cascadia Mono.
Open settings. In the JSON configuration, under profiles/defaults, add "fontFace": "Cascadia Code PL", and save. The terminal instantly becomes:
To make usage of powerline symbols, you can install oh-my-posh for PowerShell, and install oh-my-zsh for WSL then switch the theme to “agnoster”:
In Visual Studio, to use Cascadia Code, In Tools/Options, search for font, change it to Cascadia:
In Visual Studio Code, open File/Preferences/Settings, search for font, and add it to the head:
Then search for ligature, turn it on ("editor.fontLigatures": true). On Windows, the ligatures will be shown in VS Code. On Ubuntu, you need to restart VS Code.