Font chữ cho Lập Trình Viên

Và xu hướng ligature trong code font

Posted by Thanh Tran on March 27, 2017

Bạn có biết trình soạn code của mình đang dùng font chữ gì không? Ít người quan tâm đến điều này nhưng việc lựa chọn font chữ cho code editor cũng ảnh hưởng ít nhiều đến hiệu suất công việc của lập trình viên vì bạn phải nhìn những dòng code nhiều giờ trong một ngày làm việc.

Sau nhiều năm làm việc với nhiều code editor và font khác nhau, tôi rút ra được một số đặc điểm của một font chữ tốt dành cho trình soạn code như sau:

  • Monospace: tất cả các ký tự và khoảng trắng đều cùng một cỡ, điều này cho phép canh cột và lề dễ dàng và code dễ đọc hơn với những đoạn logic lặp lại. Các font mặc định cho code editor và terminal đều là monospace.
  • Dễ dàng phân biệt các ký tự Il1i, 0Oo, CG: có nhiều font monospace hiển thị các ký tự kể trên rất giống nhau, khiến cho việc đọc code khó khăn hơn. Với tiêu chí này, tôi đã loại một số font monospace khá phổ biến như Courier New, Noto Mono, Droid Sans Mono…
  • Các ký tự đặc biệt cho cú pháp phải rõ, dễ đọc: () [] {} =+-<>:;,."'
  • Và riêng đối với người Việt mình, thì font cho code cũng cần hỗ trợ tiếng Việt Unicode để hiển thị các chuỗi văn bản hoặc ghi chú bằng tiếng Việt (nếu có). Tiêu chí này cũng loại khá nhiều font mono đẹp và phổ biến khác như: Ubuntu Mono, Menlo, Operator Mono… Nếu bạn không lo vấn đề tiếng Việt, bạn có thể tìm và thử các font kể trên.

Sau đây tôi sẽ liệt kê một số font tiêu biểu cho code editor đáp ứng tất cả các tiêu chí trên:

Consolas

Font này không miễn phí nhưng có sẵn trong Windows hoặc được cài theo bộ Microsoft Office. font-consolasFont Consolas hiển thị trên Sublime Text kích cỡ 15px

Monaco

Font này có sẵn trên macOS. font-monacoFont Monaco hiển thị trên Sublime Text kích cỡ 15px

Roboto Mono

Font monospace của bộ Roboto, font mặc định cho HĐH Android và material design. Download font tại đây.

font-roboto-monoFont Roboto Mono (Regular) hiển thị trên Sublime Text kích cỡ 15px

SF Mono

Font SF Mono dùng để hiển thị code bên trong XCode 8+. Bạn có thể download và dùng cho mục đích cá nhân tại trang github này.

font-sf-monoFont SF Mono (Regular) hiển thị trên Sublime Text kích cỡ 15px

Source Code Pro

Font monospace được dựng bởi Adobe dành riêng cho việc hiển thị code nên rất dễ đọc và tròn trịa. Đây là font yêu thích nhất của tôi. Download font tại đây.

font-source-code-proFont Source Code Pro (Regular) hiển thị trên Sublime Text kích cỡ 15px

Space Mono

Font monospace được dựng bởi Colophon Foundry cho Google Fonts. Font này có dáng chữ khá lạ và mang hơi hướng mỹ thuật hơn là cho code. Có thể download tại đây.

font-space-monoFont Space Mono hiển thị trên Sublime Text kích cỡ 15px

Xu hướng code font mới: Programming Ligature (nối chữ)

Ligature: đây là hiện tượng nối nhiều chữ thành một xuất hiện cùng với kỹ thuật in ấn trong một số ngôn ngữ tự nhiên. Trong thời đại số hóa, ligature cũng được mô phỏng lại (chủ yếu là vì lý do mỹ thuật) thông qua một số font chữ có hỗ trợ. Ligature cũng đã được hỗ trợ trên các trình duyệt hiện đại và đặc biệt là từ IE 10 trở về sau.

ligatureVí dụ ligature

Các ngôn ngữ lập trình sử dụng rất nhiều biểu tượng và toán tử tuy nhiên chúng thường được tổ hợp từ nhiều ký tự đơn giản có sẵn trên bàn phím (VD. >=, ===, =>, !==…). Điều này bắt buộc người đọc code phải có một quá trình giải mã những tổ hợp ký tự đó thành biểu tượng toán mà chúng đang mô phỏng. (“≥”, “≡”, “⇒”, “≢”)

Một số font code mới đây đã bắt đầu hỗ trợ ligature cho tổ hợp các ký tự toán tử và ký hiệu giúp cho việc hiển thị chúng trực quan hơn. Trong số đó là bộ font Fira Code được dựng với rất nhiều tổ hợp ligature cho lập trình.

Fira Code ligature in VSCodeFont Fira Code và ligature

Tuy nhiên Fira Code (và cả Fira Mono mà nó dựa trên) không có các ký tự tiếng Việt Unicode. Để khắc phục, bạn có thể sử dụng một font khác làm fallback khá giống Fira Code đó là Roboto Mono.

Hiện nay đã có một số code editor hỗ trợ ligature, trong đó có VSCodeAtom. Rất tiếc là Sublime Text 3 chưa hỗ trợ, và tính năng này đang được đặt hàng cho nhà phát triển ST3.

Sau khi cài Fira Code vào hệ thống, với VSCode, cần cài đặt các settings sau để bật ligature và font Fira Code với Roboto Mono làm fallback:

{
    "editor.fontFamily": "Fira Code, Roboto Mono, monospace",
    "editor.fontLigatures": true
}

Xem thêm:

Updated on 30/03/2017.