Hướng dẫn Typography chuyên nghiệp cho lập trình viên Rails

Sử dụng typography chuyên nghiệp trong ứng dụng Rails của bạn có thể tạo ra sự khác biệt lớn giữa một sản phẩm trông tạm ổn và một sản phẩm trông thực sự chuyên nghiệp. Mặc dù có rất nhiều thông tin về chủ đề này, nhưng ít có nội dung cụ thể cho các lập trình viên Rails đang xây dựng ứng dụng hoặc SSG dựa trên Rails.

Khái niệm cơ bản về typography

Trước tiên, cần phân biệt giữa "phông chữ" và "kiểu chữ". Kiểu chữ (typeface) là thiết kế tổng thể của một bộ ký tự, chẳng hạn như Inter hoặc Helvetica, trong khi phông chữ (font) là một phiên bản cụ thể (chẳng hạn như Inter Bold 16px).

Sự khác biệt giữa phông chữ và kiểu chữ

• Kiểu chữ: Thiết kế tổng thể của một bộ ký tự, ví dụ: Helvetica, Inter, San Francisco.
• Phông chữ: Một phiên bản cụ thể của kiểu chữ, bao gồm kích thước (12px), độ dày (bold) và kiểu (italic). Ví dụ: Helvetica Bold 12px, Inter italic 14px.

Mặc dù hầu hết mọi người (bao gồm cả nhà thiết kế) có thể hiểu bạn khi sử dụng từ "phông chữ", nhưng nếu bạn muốn gây ấn tượng với bạn bè là nhà thiết kế, hãy biết khi nào nên sử dụng từng thuật ngữ cho điểm cộng!

Các định dạng phông chữ

Các phông chữ web hiện đại có nhiều định dạng, nhưng hầu hết đều là định dạng cũ mà bạn không nên sử dụng nữa:

• TTF/OTF: Định dạng dành cho máy tính để bàn, quá lớn để sử dụng trên web.
• WOFF: Định dạng web nén, nhưng đã lỗi thời.
• WOFF2: Định dạng nén hiện đại, nhỏ hơn khoảng 30% so với WOFF.

Sử dụng WOFF2 một cách độc quyền. Tất cả các trình duyệt hiện đại đều hỗ trợ nó, và việc tiết kiệm kích thước tệp là rất đáng kể.

Kiểu chữ chuyên nghiệp như Inter, Source Sans Pro và phông chữ hệ thống hỗ trợ các tính năng OpenType thông qua CSS font-feature-settings. Điều này mở khóa các tính năng typography như ligatures, kerning và số liệu tabular:

body {
  font-feature-settings:
    "liga" 1,    /* ligatures (kết hợp fi, fl) */
    "kern" 1,    /* kerning (khoảng cách chữ) */
    "tnum" 1;    /* số liệu tabular (cùng chiều rộng) */
}

Ngăn xếp mặc định

Trước khi đi vào phông chữ tùy chỉnh, hãy nói về các phông chữ hệ thống. Cách tiếp cận hiện đại sử dụng các từ khóa CSS ánh xạ tới các phông chữ mặc định của từng nền tảng:

body {
  font-family: system-ui, sans-serif;
}

Từ khóa system-ui tự động sử dụng:

• San Francisco trên macOS/iOS;
• Segoe UI trên Windows;
• Roboto trên Android;
• Ubuntu trên Linux.

Để có nhiều quyền kiểm soát hơn, bạn có thể sử dụng ngăn xếp phông chữ hệ thống đầy đủ:

body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

Chọn kiểu chữ chuyên nghiệp

Khi các phông chữ hệ thống không đủ, Google Fonts là điểm khởi đầu hiển nhiên. Đối với các lập trình viên quan tâm đến quyền riêng tư, Bunny Fonts cung cấp những phông chữ tương tự mà không có theo dõi từ Google.

Điều cần tìm trong một kiểu chữ chuyên nghiệp:

• Chiều cao x lớn hơn: Chiều cao của các chữ cái thường so với chữ hoa. Các phông chữ có chiều cao x lớn hơn (như Inter, Open Sans) dễ đọc hơn ở kích thước nhỏ, đặc biệt trên màn hình.
• Sans-serif cho UI: Phông chữ serif hoạt động tốt cho đọc văn bản dài, nhưng phông chữ sans-serif sạch sẽ hơn cho giao diện, nút và điều hướng.
• Nhiều độ dày: Các phông chữ chuyên nghiệp cung cấp các độ dày 400 (thông thường), 500 (trung bình), 600 (bán đậm) và 700 (đậm) để tạo ra thứ bậc mà không cần thay đổi kiểu chữ.
• Kết hợp phông chữ: Giữ lại một kiểu chữ cho các yếu tố giao diện. Nếu bạn cần sự tương phản, như trên blog, hãy kết hợp một kiểu sans-serif (tiêu đề/UI) với một kiểu serif (văn bản chính), nhưng giữ cho nó đơn giản.

Một số lựa chọn phổ biến:

• Inter;
• Source Sans Pro;
• Poppins;
• Lato.

Sử dụng kiểu chữ tùy chỉnh trong Rails

Rails giúp việc tải phông chữ trở nên đơn giản. Đặt các tệp WOFF2 của bạn vào app/assets/fonts/:

app/assets/fonts/
├── inter-regular.woff2
├── inter-medium.woff2
├── inter-semibold.woff2
└── inter-bold.woff2

Đừng sử dụng CDN cho phông chữ. Tự lưu trữ giúp loại bỏ các yêu cầu bên ngoài và cho bạn toàn quyền kiểm soát hành vi tải.

Phông chữ biến đổi là cách tiếp cận hiện đại. Thay vì nhiều tệp tĩnh, hãy sử dụng một tệp phông chữ biến đổi chứa tất cả các độ dày:

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: font-url("Inter-VariableFont_wght.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: font-url("Inter-Italic-VariableFont_wght.woff2") format("woff2-variations");
}

Mẹo tối ưu hóa hiệu suất

Phông chữ biến đổi mang lại:

• Một tệp thay vì 4-6 tệp trọng lượng riêng biệt.
• Kích thước tổng thể nhỏ hơn - Thường nhỏ hơn 50-70% so với nhiều phông chữ tĩnh.
• Chuyển đổi trọng lượng mượt mà - Bạn có thể sử dụng font-weight: 450 hoặc hoạt hình giữa các trọng lượng.
• Hiệu suất tốt hơn - Ít yêu cầu HTTP và tải nhanh hơn.

Nếu phông chữ biến đổi không khả dụng, hãy quay lại các phông chữ tĩnh với ánh xạ trọng lượng phù hợp:

@font-face {
  font-family: 'Inter';
  src: url('inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('inter-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

Giải quyết vấn đề

• Nếu bạn gặp vấn đề với việc hiển thị phông chữ, hãy kiểm tra xem tệp phông chữ đã được tải đúng cách chưa.
• Đảm bảo sử dụng font-display: swap để tránh văn bản vô hình trong quá trình tải.

Kết luận

Typography chuyên nghiệp không chỉ làm cho ứng dụng Rails của bạn trông bóng bẩy và đáng tin cậy. Sự khác biệt giữa phông chữ hệ thống và một kiểu chữ tùy chỉnh được chọn tốt sẽ ngay lập tức được người dùng nhận thấy, ngay cả khi họ không thể diễn đạt được lý do tại sao ứng dụng của bạn đột nhiên cảm thấy cao cấp hơn. Hãy bắt đầu áp dụng những mẹo này vào dự án của bạn ngay hôm nay!

Câu hỏi thường gặp (FAQ)

1. Sự khác biệt giữa phông chữ và kiểu chữ là gì?
   • Kiểu chữ là thiết kế tổng thể, phông chữ là một biến thể cụ thể của kiểu chữ.
2. Tại sao nên sử dụng phông chữ WOFF2?
   • WOFF2 giúp tiết kiệm dung lượng và hỗ trợ tốt trên các trình duyệt hiện đại.
3. Làm thế nào để thêm phông chữ tùy chỉnh vào Rails?
   • Đặt tệp phông chữ vào thư mục app/assets/fonts/ và sử dụng @font-face để khai báo.

Bắt tay vào việc tối ưu hóa typography cho ứng dụng của bạn ngay hôm nay!