挑 Coding 字型的網站

Hacker News Daily 上看到「Coding Font by Typogram – Find Your True Love of Coding Fonts」這個,可以直接用二選一的方式挑出自己喜歡的 coding 的字型...

不過我的習慣是偶而就會換個字型,對我來說更有用的是字型列表,另外網站也提供了界面可以看:

  • Anonymous Pro
  • Azeret Mono
  • B612 Mono
  • Courier Prime
  • Cousine
  • Cutive Mono
  • DM Mono
  • Fira Code
  • Fira Mono
  • IBM Plex Mono
  • Inconsolata
  • JetBrains Mono
  • Major Mono Display
  • Nanum Gothic Coding
  • Noto Sans Mono
  • Nova Mono
  • Overpass Mono
  • Oxygen Mono
  • PT Mono
  • Roboto Mono
  • Share Tech Mono
  • Source Code Pro
  • Space Mono
  • Syne Mono
  • Ubuntu Mono
  • VT323
  • Xanh Mono

裡面有些字型以前連用都沒用過,看起來可以找來用看看... 不過看了一輪發現有些字型應該不是為了 coding 用的,像是 Space Monofixed 就會把 fi 連在一起而且只佔一格:

然後我自己用 15px 玩了一輪選到了 Azeret Mono,看起來可以裝起來用看看...

LaTeX 的字型展示

Hacker News 首頁上看到「The LaTeX Font Catalogue (tug.org)」這個,提到 LaTeX 的字型:「The LaTeX Font Catalogue – Front Page」。

在 Hacker News 上的討論有人提到 LaTeX 的字型印出來很好看,但電腦上看就還好 (不差),這點我還蠻認同的,在螢幕上有其他更好看的字型可以用。

就目前看過的書籍來說,TeX 預設的字型 (Computer Modern 系列) 印出來真的超漂亮的,像是 Knuth 老大的 TAOCP

話說 Knuth 老大的 TAOCP... (說好不提 261?)

4px 寬的字型

也是在 Hacker News Daily 上看到的:「a pretty sweet 4px wide pixel font.」,看 commit log 似乎很久了,字本身長這樣:

作者有提到可以用在解析度不夠的螢幕上,馬上想到的是「Waveshare 3.2 inch Raspberry Pi LCD 320X240 Resistive Touch Screen TFT Display SPI LCD for Raspberry Pi 3 Model B/3B+/2 B/B/A Raspbian IMG Provided」這種東西:

另外用在小顆 LCD 單色顯示似乎也是個方法,不過看了一下是 5px:

出自「Real Time Clock On 20x4 I2C LCD Display with Arduino - Electronics-Lab.com」。

先記起來...

挑選開發者用的 Monospace 字型

Hacker News Daily 上看到的網站,直接使用對應的字型,讓使用者可以直接感覺:「Dev Fonts」。

目前上面有 33 種字型,大多都是免費的 (目前上面只有看到 Dank Mono 是收費的字型)。

在頁面上可以換 theme,以及選擇不同程式語言的 syntax highlighter,另外下方範例的程式碼也可以自己修改,這些都是讓使用者模擬實際的感受。

一些懷古的點陣字型

前幾天在 Hacker News 上看到的懷古字型:「The Ultimate Oldschool PC Font Pack」,在「FONT INDEX」這頁裡面有很多字型的圖片可以看。

比較有趣的是在「README」這頁提到的版權問題,點陣字體在美國是無法被版權化的:

Q. Is this even legal? The original fonts are not yours. Do you have the right to distribute these versions?

A. Short answer: as far as I was able to research, there is nothing illegal or infringing about this collection. The raw bitmap typefaces are not copyrightable, unlike fonts in specific formats such as .fon and TrueType (which qualify as software); at least this is the case in the US, where this site is based. For a longer and far more boring answer, see the legal stuff section below.

這點可以在維基百科上的「Intellectual property protection of typefaces」這篇看到對應的說明:

Typefaces cannot be protected by copyright in the United States (Code of Federal Regulations, Ch 37, Sec. 202.1(e); Eltra Corp. vs. Ringer). The idea that typefaces (rather than fonts, which are computer software) cannot be copyrighted in the United States is black letter law. 37 C.F.R. § 202.1(e). Under U.S. law, typefaces and their letter forms or glyphs are considered utilitarian objects whose public utility outweighs any private interest in protecting their creative elements. However, there is a distinction between a font and a typeface. The machine code used to display a stylized typeface (called a font) is protectable as copyright. In 1992, the US Copyright Office determined that digital outline fonts had elements that could be protected as software. Since that time, the Office has accepted registration of copyright for digital vector fonts, such as PostScript Type 1, TrueType, and OpenType format files.

有不少字型有提供 8x16 的大小,看起來之後還是可以找機會用看看?應該有機會搭 16px 的中文字...

Google Fonts 的加速方式

這邊講的是透過 css (以及 js) 使用的 Google Fonts,作者想要改善這塊,加速網頁的速度:「Should you self-host Google Fonts?」。

作者第一個提到的技巧是個懶人技巧,只要加上 preconnect 預先把 HTTPS 連線建好,就可以提昇不少速度。因為這可以降低先取得 css 後才建立連線的速度差異:

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

作者有提到 Google 在 css 檔案的
header 裡面本來就有加上 preconnect,但從前後比較可以看出,整個網頁的結束時間差了一秒 (這是作者在 Google Chrome 的 3G Slow 設定下模擬的):

另外一個技巧是增加 swap,讓 Google Fonts 還沒有讀進來之前先用系統有的字型呈現。這樣不會出現整頁只有圖,然後突然字都冒出來的情況,也就是把一般在用的:

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

加上 &display=swap

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

最後一招就是把字型放在自己家,差異就更大了:

另外一個好處是改善 privacy,不過好像沒特別提到...

JetBrains 釋出 Monospace 字型

JetBrains 釋出了一套 Monospace 字型 Jetbrains Mono 提供給大家使用:「JetBrains Mono: A free and open source typeface for developers」。

使用 Apache 2.0 License 授權,其他比較常見到的是 SIL Open Font License

JetBrains Mono typeface is available under the Apache 2.0 license and can be used free of charge, for both commercial and non-commercial purposes. You do not need to give credit to JetBrains, although we will appreciate it very much if you do.

雖然是個不常在字型上見到的授權,但 Apache 2.0 License 在軟體這塊蠻常見的,大家的熟悉度也還 ok,應該是沒有什麼大問題... 要注意 Apache 2.0 License 與 GPLv2 是不相容的就好,不能包在一起丟出來。

先換起來用看看,之後再看看有什麼想法...

美國政府發行的字型 Public Sans

Public Sans 是一套美國政府出資而產生的無襯線字型,專案放在 GitHub 上 (uswds/public-sans)。這套自行不是全部都自己刻,而是改自於 Libre Franklin Font (以 SIL Open Font License v1.1 授權,而 Public Sans 沿用同樣授權)。

第一個目標是授權:

Be available as a free, open source webfont on any platform.

另外是使用的廣度:

Have a broad range of weights and a good italic.
Perform well in headlines, text, and UI.

Have good multilingual support.
Allow for good data design with tabular figures.

在 GitHub 頁面上有整理與 Libre Franklin 的差異,可以看到配合現在的呈現媒體而做了不少調整。