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.

image

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.

image

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.

image

The font design looks good for me, except number 7 and letter f looks inconsistent with others:

image

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

image

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 image
  • U+E0A1 image
  • U+E0A2 image
  • U+E0B0 image
  • U+E0B1 image
  • U+E0B2 image
  • U+E0B3 image

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..

Screenshot from 2020-05-31 03-35-25

In Windows Terminal, the default font is Cascadia Mono.

image

Open settings. In the JSON configuration, under profiles/defaults, add "fontFace": "Cascadia Code PL", and save. The terminal instantly becomes:

image

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”:

image

image

In Visual Studio, to use Cascadia Code, In Tools/Options, search for font, change it to Cascadia:

image

In Visual Studio Code, open File/Preferences/Settings, search for font, and add it to the head:

image 

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.

7 Comments

  • Thank you for this information. It will be help me.

  • Hello Dixin.

    I speak another thing in here. Because I can't find your email.

    Many urls on `https://hanziyuan.net/` site are 404. like below:
    - [Why study Chinese Etymology 中国文字的历史](https://dixin.github.io/Etymology/why-study-chinese-etymology)
    - [Spoken Chinese and Other Languages](https://dixin.github.io/Etymology/spoken-chinese-and-other-languages)
    - etc

    A frendly reminder.

  • Found the information to be informative and the blog detailed enough that it answered all my questions. Thank you.

  • 9Anime Watch Anime Online in high quality with English SUB,
    watch Online 9 anime videos and Download High
    Shadowverse (TV) Episode English SUB..
    The (Re Zero Season 2) television anime was a huge hit during its first season,
    so much so that it was dubbed as a huge hit as well. The show is produced by Silver Link,
    a studio known for its Magical girl and Shounen series.
    The anime is based off of an original light novel written by Re:
    Zero writer Takashi Takeuchi. Re Zero Season 2 Kara Hajimeru Isekai Seikatsu Full Episode List 2020 Watch online (9 anime) TV HD Quality.

  • After the previous season of Colors Bigg Boss, the show is back
    with a new season. Bigg Boss Season 14 Auditions 2020


  • After the previous season of Colors Bigg Boss, the show is back
    with a new season. Bigg Boss Season 14 Auditions 2020

  • pencuri movie

    pencuri movie is a sub malay top rated drama broadcast on
    voot tv,at a time on aired at best website pencurimoviedfm2u.com

Add a Comment

As it will appear on the website

Not displayed

Your website