Những lợi ích có thể đạt được từ phông chữ chất lượng cao

• Các tính năng ẩn của phông chữ: trục biến thiên, glyph thay thế, thay thế kiểu, swash, chữ số, chữ hoa cỡ nhỏ (Small Caps), thay thế theo ngữ cảnh

Trục biến thiên

• Phông chữ OpenType có thể có một hoặc nhiều trục, và có thể thay đổi giá trị trục để thay đổi diện mạo của phông chữ
• Trục phổ biến nhất là wght, dùng để điều chỉnh độ đậm của phông chữ
• Các trục phổ biến khác gồm wdth (độ rộng), slnt (độ nghiêng), ital (in nghiêng), opsz (kích thước quang học)
• Có thể dùng thuộc tính CSS để điều khiển các trục
• Thuộc tính font-variation-settings có thể gây ra vấn đề về kế thừa, vì vậy nếu có thể thì nên dùng các thuộc tính CSS chuyên biệt

Glyph thay thế

• Phông chữ có thể chứa các glyph thay thế cho những ký tự cụ thể
• Glyph thay thế có thể bao gồm nhiều kiểu khác nhau như chữ số, swash, ligature, v.v.

Thay thế kiểu

• Thay thế kiểu là tính năng kích hoạt các dạng thay thế cho những ký tự cụ thể
• salt kích hoạt thay thế kiểu cho mọi ký tự
• Các bộ kiểu như ss01, ss02 thay thế những tập ký tự cụ thể
• Các biến thể ký tự như cv01, cv02 thay thế từng ký tự riêng lẻ
• Có thể kích hoạt glyph thay thế bằng các thuộc tính CSS font-feature-settings và font-variant-alternates

Swash

• Một số phông chữ có kèm swash, có thể dùng để thêm chút cá tính cho tiêu đề
• Swash là yếu tố trang trí có thể làm tiêu đề trở nên cá tính hơn
• Có thể kích hoạt swash bằng font-feature-settings và font-variant-alternates

Chữ số

• Phông chữ có thể bao gồm nhiều bộ glyph chữ số khác nhau
• Chữ số được chia thành lining hoặc old-style, dạng tabular hoặc proportional
• Chữ số tabular có cùng độ rộng, còn chữ số proportional có độ rộng khác nhau
• Chữ số lining có chiều cao bằng chữ in hoa, còn chữ số old-style có chiều cao giống chữ thường
• Có thể dùng thuộc tính font-variant-numeric để đặt kiểu chữ số mong muốn

Chữ hoa cỡ nhỏ

• Chữ hoa cỡ nhỏ là biến thể chữ in hoa dùng để thay thế chữ thường
• Có thể kích hoạt chữ hoa cỡ nhỏ bằng thuộc tính font-variant-caps
• Nếu phông chữ không có chữ hoa cỡ nhỏ, trình duyệt có thể tự tổng hợp chúng

Thay thế theo ngữ cảnh

• Thay thế theo ngữ cảnh là tính năng tự động thay glyph tùy theo các ký tự xung quanh
• Ví dụ, có thể thay -> bằng mũi tên, hoặc điều chỉnh vị trí của @ khi nó nằm giữa các chữ in hoa
• Thay thế theo ngữ cảnh được bật mặc định, và có thể tắt bằng thuộc tính font-variant-ligatures

Tóm tắt của GN⁺

• Phông chữ chất lượng cao cung cấp nhiều tính năng, và nếu tận dụng tốt thì có thể cải thiện đáng kể chất lượng typography
• Trục biến thiên và tính năng glyph thay thế của phông chữ OpenType đặc biệt hữu ích
• Các tính năng như thay thế theo ngữ cảnh mang lại sự tiện lợi cho cả nhà phát triển lẫn người dùng

[halfenif]

Tôi thắc mắc vì sao việc hỗ trợ đúng các tính năng của phông chữ lại khó đến vậy

Đây là vấn đề đã tồn tại cùng toàn bộ lịch sử nhân loại mà.. thì có biết bao nhiêu thứ phải xử lý chứ!

[seunggi]

Lợi ích bạn có thể nhận được từ phông chữ chất lượng cao

Kết xuất phông chữ là việc khó

https://faultlore.com/blah/text-hates-you/

[wedding]

Mình mãi vẫn không quen được với ligature..

[GN⁺]

Ý kiến trên Hacker News

• Hữu ích khi các con số cần được căn chỉnh qua nhiều dòng
• Cũng hữu ích cho những thứ như đồng hồ hoặc đếm ngược
• Việc thời gian nhảy trên màn hình thực sự rất khó chịu
• Nếu muốn tìm hiểu font, khuyên dùng Wakamai Fondue
• Chữ số dạng bảng là một tính năng cực kỳ hữu ích
• Google Fonts gần như loại bỏ các tính năng OpenType nâng cao để giảm kích thước tệp
  • Ví dụ: phiên bản Inter trên Google cung cấp 11 tính năng, trong khi bản đầy đủ cung cấp 44 tính năng
• Font chữ của trang này rất đẹp
• Dùng small caps rất đẹp, mong sẽ có nhiều website dùng hơn
• Kiểm tra xem Berkeley Mono v2 đã phát hành chưa, vẫn chưa phát hành
• Cách hoạt động của trục wght (weight) khá lạ: khi kéo xuống dưới 400, văn bản mảnh đi và bị nén lại, nhưng khi kéo lên trên 400 thì văn bản chỉ dày hơn thôi
• Để hỗ trợ dùng font khác trong VSCode cho comment, jsdocs và các kiểu tô sáng cú pháp khác, cần dùng extension vscode-custom-css
  • Ví dụ:

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • Tính năng xử lý font của VSCode có khá nhiều bug nên cần thử nghiệm nhiều
• Thắc mắc vì sao việc hỗ trợ đúng các tính năng font lại khó đến vậy
• Nếu quan tâm đến typography, khuyên đọc Butterick's Practical Typography
  • Có rất nhiều lời khuyên thực tế để làm tài liệu in và tài liệu số trở nên đẹp hơn
  • Giấy phép font của ông ấy rất thoáng, không có giới hạn về số lượt xem trang
  • Font của ông ấy không phải mã nguồn mở, nhưng rất đẹp
  • Đã mua font Valkyrie và Concourse, và Concourse rất linh hoạt với các contextual alternates