Ngày 17 / Tiết 1 / Thời lượng 30 phút. Mục lục khóa 100 ngày làm web.
Dù bạn đọc ở bất cứ đâu, ở trên website, hay sách báo giấy, thì văn bản bao giờ cũng sử dụng một font (phông) chữ nào đó. Font chữ có thể hiểu nôm na là ‘phong cách thời trang’ của chữ.
PS: bài viết có nhiều hình, bạn có thể click vào hình để nhìn rõ hơn.
Để hiểu về font chữ, bạn hãy truy cập trang web này của Google Fonts. Đầu tiên, hãy gõ câu tiếng Việt nào đó vào ô Type something, để bạn nhìn các font chữ được thể hiện khác nhau như thế nào:
Chẳng hạn: “Tôi đang tìm hiểu về phông chữ trên website 100ngaylamweb.com”, kết quả:
Bạn nhìn sang phía trái, ngoài cùng, có chữ Serif, đó là nơi người ta phân loại các kiểu font cơ bản. Click vào đó bạn sẽ thấy:
Trong đó:
- Serif: chỉ một nhóm các font chữ có chân, tức là ở rìa các chữ sẽ có những cái “chân” nhỏ, ví dụ:
- Sans Serif: chỉ một nhóm các font chữ không chân, tức là ở rìa các chữ không có cái ‘chân’ nào cả, ví dụ:
Ở trên là 2 kiểu font chữ phổ biến nhất trên web. Còn Handwriting là kiểu font mô phỏng chữ viết tay, thường chỉ được dùng trong các trường hợp đặc biệt, ví dụ trong các văn bản cần cách điệu như làm thiệp cưới chẳng hạn.
Font handwriting hiếm khi được dùng để làm phông cho phần nội dung chính, bởi nó khó đọc, đặc biệt trên các thiết bị màn hình nhỏ như di động. Cùng lắm thì nó có thể được dùng để cách điệu Logo hoặc làm các tiêu đề chính (với cỡ chữ to).
Với Monospace, đây là font chữ kiểu cũ, hiện ít dùng (nơi còn dùng nhiều font này là các phần mềm viết mã dành cho lập trình viên), ngày xưa các máy đánh chữ hay dùng font này.
Còn font chữ Display là kiểu font chữ thiên cho việc dùng trong các tiêu đề lớn, mục tiêu của font này là để tạo ấn tượng, hay dùng trong đồ họa hơn (ví dụ chữ trên các banner quảng cáo):
Bạn sẽ gặp rất nhiều kiểu dáng chữ kỳ lạ, nhiều khi là quái dị với font display, và thực tế nó không tiện cho việc đọc với cỡ chữ thông thường, cho nên font dạng này rất hiếm khi được sử dụng cho phần nội dung chính trên website.
–
Website ngày nay rất ưa dùng các font chữ không chân (sans serif), vì nó hiển thị rõ chữ, trông thoáng và đơn giản hơn. Điều đó không có nghĩa là font chữ có chân (serif) ít được dùng trên web, ngược lại, nó vẫn được dùng khá nhiều, nhưng thế giới mà nó áp đảo là sách in.
Về mặt biểu cảm, font chữ có chân mang dáng dấp hoài cổ, bay bổng hơn, còn font chữ không chân mang dáng dấp hiện đại hơn.
Tên của font
Các font đều có tên cụ thể của nó, ví dụ đây là tên một vài font không chân dành cho tiếng Việt (được đánh dấu trong hình elip viền vàng):
Một số font không chân phổ biến cho font chữ tiếng Việt trên web bao gồm:
- Roboto
- Arial
- Open Sans
Một số font có chân phổ biến:
- Times New Roman
- Georgia
Kích cỡ font chữ
Phông chữ có kích cỡ của nó, và một trong các đơn vị đo phổ biến là px (pixel, giống đơn vị đo của ảnh).
Phần lớn các font chữ ngày nay trên web có kích cỡ nằm trong khoảng 15 – 20px cho phần nội dung chính, còn tiêu đề có thể lên đến 28 – 36px. Font chữ nhỏ quá sẽ khó đọc, còn font chữ to quá sẽ thô và chiếm không gian, vì thế chọn kích cỡ font chữ ‘vừa phải’ cũng là điều quan trọng trong cài đặt cho giao diện website sau này.
Các ví dụ về cỡ chữ:
Đây là cỡ chữ 14px: Tôi đang nghe ‘Vào hạ’, Suni Hạ Linh hát
Đây là cỡ chữ 15px: Tôi đang nghe ‘Vào hạ’, Suni Hạ Linh hát
Đây là cỡ chữ 16px: Tôi đang nghe ‘Vào hạ’, Suni Hạ Linh hát
Đây là cỡ chữ 17px: Tôi đang nghe ‘Vào hạ’, Suni Hạ Linh hát
Đây là cỡ chữ 18px: Tôi đang nghe ‘Vào hạ’, Suni Hạ Linh hát
Đây là cỡ chữ 19px: Tôi đang nghe ‘Vào hạ’, Suni Hạ Linh hát
Đây là cỡ chữ 20px: Tôi đang nghe ‘Vào hạ’, Suni Hạ Linh hát
Một điều cần lưu ý, cùng một kích cỡ nhưng các font chữ khác nhau sẽ cho ra các kích cỡ thật trông không giống nhau. Ví dụ cùng 16px nhưng font A thì nhìn ổn, font B lại hơi nhỏ. Đây là lý do bạn luôn phải kiểm tra thực tế khi thử nghiệm kích cỡ font phù hợp (khi bạn điều chỉnh giao diện web bạn có khả năng chọn cả font, kích cỡ, và màu sắc theo ý muốn).
Độ đậm nhạt của font chữ
2 văn bản cùng kiểu font, cùng kích cỡ vẫn có thể trông khác nhau nếu mức độ đậm (font weight) của nó khác nhau.
Một font bao giờ cũng có 3 mức độ đậm cơ bản:
- Mảnh (lighter): bạn sẽ thấy chữ trông ‘gầy’ hơn bình thường.
- Đậm (bold): bạn sẽ thấy chữ trông ‘béo’ hơn bình thường.
- Bình thường (normal): đây là font weight thường được dùng nhất của font, nó không ‘gầy’ cũng không ‘béo’.
Trong thực tế, một font có thể có mức độ gầy béo trải dài từ giá trị 100 đến 900, trong đó 500 là bình thường. Ví dụ hình bên dưới là độ đậm của font Roboto thay đổi từ 300 cho đến 900:
Dĩ nhiên mức độ đậm của chữ có ảnh hưởng đến cảm nhận của chúng ta. Ví dụ chữ có mức độ đậm cao (bold) thường đem lại cảm giác chắc chắn, quan trọng, trong khi chữ mảnh (light) cho cảm giác nhẹ nhàng, mỏng manh.
Một website có thể dùng nhiều font
Một trang web có thể dùng nhiều font, nhưng thường không quá 2 font (gồm một font chính, một font phụ), bởi nhiều font sẽ gây rối mắt.
Ngay cả khi dùng nhiều font, website cũng thường có quy tắc rõ ràng, tức là khu vực nào dùng kiểu font nào thì điều đó sẽ được thống nhất trên toàn website, ví dụ phần tiêu đề dùng font A, phần nội dung chính dùng font B, thì toàn bộ website sẽ thống nhất như vậy chứ không phải mỗi nơi một kiểu.
Ví dụ trang vnexpress.net dùng 2 font khác nhau cho nội dung, nhưng được thiết kế rõ ràng, tiêu đề dùng font có chân (Merriweather), nội dung chính dùng font không chân (Arial):
Kênh 14 dùng tới 3 font, nhưng các khu vực cũng được phân loại rõ ràng:
Font chữ mà các website sử dụng nằm ở đâu?
Font chữ dùng để hiển thị website thường nằm ngay trong thiết bị của người dùng. Ví dụ như những font phổ biến như Arial, Roboto, Times New Roman. Nếu thiết bị người dùng không có thì website có thể tích hợp sẵn font cần thiết để hiển thị.
Người phát triển web chỉ việc chỉ định khu vực văn bản nào dùng font gì bằng cách gọi tên nó. Về sau khi bạn điều chỉnh giao diện cho website, bạn cũng có khả năng thiết lập các font cho văn bản trên website theo ý thích, tuy nhiên, không phải font nào bạn muốn cũng có sẵn, một giao diện sẽ tích hợp sẵn nhưng có giới hạn một số font mà thôi.
Font hiển thị lỗi tiếng Việt là gì?
Cái này có thể bạn đã gặp trước đây rồi, không phải font nào cũng hiển thị tốt tiếng Việt, nhiều ký tự có dấu sẽ bị lỗi, trông không ra chữ gì cả hoặc nhìn ra nhưng nó to nhỏ hoặc méo. Đó là những font chưa hỗ trợ tiếng Việt (đơn giản là vì người tạo ra font đó chưa thiết kế các chữ cái có dấu).
Do vậy trong quá trình lựa chọn thiết kế sau này, khi chọn font bạn nên kiểm tra xem nó có hiển thị tốt với tiếng Việt không.
Font miễn phí và font trả phí
Đa số các font mà các website sử dụng hiện nay đều miễn phí, các font trên Google fonts cũng free. Tuy nhiên cũng có các font trả phí, mà các chủ website cần phải mua mới được phép xài. Trong thực tế rất hiếm website cần mua font, vì số lượng, kiểu dáng font miễn phí là quá đủ dùng rồi.
Bài tiếp >>> Các website lớn hiện sử dụng font và kích cỡ chữ như thế nào?