- Một trò chơi tương tác trên web cho phép so sánh nhiều phông chữ monospace khác nhau để tìm ra phông chữ lập trình dễ đọc nhất với bạn
- Ở mỗi vòng, hai phông chữ sẽ được đưa ra và khi người dùng chọn phông chữ mình thích hơn, hệ thống sẽ tạo kết quả gợi ý được cá nhân hóa
- Có thể tự điều chỉnh các yếu tố hiển thị như Font Ligatures, điều chỉnh cỡ chữ, đổi giao diện để đánh giá trong điều kiện gần giống môi trường phát triển thực tế
- Ví dụ mã có chứa các tổ hợp ký tự dễ nhầm lẫn như
0, O, l, 1 để kiểm tra khả năng phân biệt ký tự của từng phông chữ
- Tích hợp với Studio của Typogram và hỗ trợ khám phá, so sánh phông chữ qua giao diện đơn giản chạy trực tiếp trên trình duyệt
Tính năng chính
- Có thể bật hoặc tắt tùy chọn Font Ligatures để so sánh phông chữ có hỗ trợ ligature và không hỗ trợ ligature
- Có thể điều chỉnh cỡ chữ (Font Size) trong khoảng 8~36 để trực tiếp kiểm tra độ dễ đọc trong nhiều môi trường màn hình khác nhau
- Có thể thay đổi việc hiển thị tên phông chữ và giao diện màn hình thông qua thiết lập Show Name và Theme
- Mỗi phông chữ đều được so sánh bằng cùng một ví dụ mã JavaScript, giúp đánh giá trong điều kiện gần với môi trường phát triển thực tế
Cấu trúc ví dụ mã
- Mã ví dụ bao gồm chú thích một dòng (
//) và chú thích nhiều dòng (/* ... */)
- Hàm
isMultipleOf được định nghĩa bằng cú pháp arrow function, bao gồm logic đơn giản để so sánh số và bội số
- Tên biến sử dụng các tổ hợp ký tự trông giống nhau như
0, o, O, l, 1, I, giúp kiểm tra mức độ phân biệt rõ ràng giữa các ký tự của từng phông chữ
- Kết quả gọi hàm được in ra console, và có thể kiểm tra khả năng phân biệt ký tự qua ví dụ xử lý khác nhau giữa
0 và 1
Tương tác và luồng sử dụng
- Ở mỗi vòng, người dùng chọn phông chữ hoặc di chuyển bằng phím mũi tên (
⇽, ⇾) để tiếp tục so sánh
- Sau khi hoàn tất lựa chọn, hệ thống chuyển sang cặp phông chữ tiếp theo, qua nhiều lần lặp sẽ dần xác định sở thích về độ dễ đọc của từng cá nhân
- Có thể khởi động lại trò chơi ngay bằng nút Restart Game để bắt đầu một phiên so sánh mới
Tính năng bổ sung và khám phá
- Có thể trực tiếp khám phá nhiều phông chữ lập trình khác nhau qua tab Browse trên menu phía trên
- Có thể chuyển đến công cụ thiết kế phông chữ của Typogram qua liên kết Studio
- Toàn bộ giao diện được xây dựng dưới dạng UI nền web đơn giản, có thể chạy trực tiếp trên trình duyệt mà không cần cài đặt
1 bình luận
Ý kiến trên Hacker News
Điều tôi không thích ở trò chơi này là trình duyệt tự render font
Chrome vẽ font khác với Freetype hay DirectWrite, nên không hoàn toàn khớp với Windows hay macOS
Tôi nghĩ sẽ chính xác hơn nếu hiển thị ảnh chụp màn hình không mất dữ liệu từ quá trình render thực tế của ứng dụng
Với mỗi font, độ dễ đọc thay đổi theo kích cỡ, và kết quả cũng khác nhau tùy renderer
Tôi đã thử nhiều font, lấy Fira Code làm chuẩn thì có 8 font tốt hơn và 17 font tệ hơn
Liên kết kết quả thử nghiệm
Tôi rất thích chất lượng render font trên macOS, nhưng trên Linux thì chưa thể tái hiện tương tự
Tôi loại ngay khi thấy
<=bị biến thành ligatureMong là đừng đùa nghịch với các ký tự trong code
Cuối cùng tôi lại quay về Ubuntu Mono vốn dùng từ trước. Ít ra vẫn giữ được sự nhất quán
Tôi có một gợi ý cho những ai thấy chưa có font ưng ý — đó là MAPLE MONO
Nó rất dễ đọc và cũng tương thích Nerd Font tốt
Người xung quanh cũng từng khen font tôi đang dùng
Đặc biệt khác biệt đó hiện rõ trong các từ như “null”
Dễ thương, gọn gàng mà vẫn dễ đọc
Tuy vậy, nó thiếu những khác biệt tinh tế như kiểu trụ giữa của chữ “m” ngắn hơn
Tôi rất thích trò này, nhưng giá mà so sánh theo kiểu “Hot or Not” thay vì đấu loại
Rất khó chọn giữa những font giống nhau, và tôi muốn xem phần trăm mức độ ưa thích
Những font tôi thích như Berkeley Mono, Iosevka, Cascadia Code lại không có
Thay vào đó có Roboto Mono, nhưng nếu không thích cách render của chữ “m” và “r” thì cả font sẽ trông kỳ cục
Nó gần như hoàn hảo, và công cụ tùy biến cũng rất tuyệt
Để dùng trong môi trường Nix thì cần một chút thiết lập kiểu hack, nhưng tôi vẫn dùng rất thích
Liên kết bản chỉnh sửa của tôi
Tôi cảm thấy các font mã nguồn mở mặc định cũng đã đủ tốt
Font coding tôi dùng là comic-shanns-mono
Nhưng có lỗi là ký hiệu ‘+’ lại hiển thị thành khoảng trắng
Cuối cùng tôi chọn Victor Mono, một font mà trước đây tôi cũng đã dùng trong vài năm
Trên iPhone, giá mà có thanh tiến trình, và cũng nên có tùy chọn kiểu “tôi sẽ không bao giờ dùng font này”
Cứ vài năm tôi lại đổi qua lại giữa font hẹp (Iosevka) và font rộng (Azeret Mono)
Trong terminal thì ổn, nên có vẻ là vấn đề khác biệt giữa các renderer
Dạo này tôi chủ yếu dùng Iosevka, nhưng trước đây cũng đã dùng Ubuntu Mono, JetBrains Mono, PT Mono, Terminus và nhiều font khác
Trong số đó, Liberation Mono là dễ đọc nhất
Gần đây tôi cũng thấy Cascadia Code hợp ý một cách bất ngờ
Sau vài tuần dùng thử, tôi thấy nó dễ đọc hơn hẳn nên cứ tưởng là font lớn hơn, nhưng thực ra nhỏ hơn mà vẫn dễ đọc hơn
Ban đầu tôi nghĩ mình không quá quan tâm đến font, nhưng khi thấy Xanh Mono thì lại có cảm giác phản đối ngay lập tức
Cuối cùng tôi nhận ra font mặc định của VS Code là Droid Sans Mono và Roboto Mono gần như giống nhau
Có vẻ weight của font và hỗ trợ emoji sẽ tốt hơn
Trò này khá vui, nhưng giá mà có hiển thị tiến độ
Cũng sẽ hay nếu cho xem kết quả như hạng 1, hạng 2, bán kết, tứ kết