Font chữ web đơn điệu chán ngắt, có cách nào làm đẹp hơn?

Submitted by superthin on 25/10/2017 - 08:43:41
Google Font logo

Một số người mới bước vào làm các trang web sẽ cảm thấy thật buồn bã khi các font chữ trông quá đơn điệu, tẻ ngắt, chẳng có chút nào nghệ thuật, ngay người làm web còn thấy xấu, làm sao khiến người khác cảm thấy thích thú cho được.

Trong quá khứ, việc nhúng font chữ đẹp cho một trang web là điều khó khăn, thậm chí có thể nói là không thể. Nhưng ngày nay, việc đó cực kỳ đơn giản. Bài viết này hướng dẫn bạn cách thực hiện, chỉ mất 5 phút để có thể dùng font chữ đẹp cho web của bạn.

Điểm qua về lý thuyết

Trong quá khứ, khi thiết kế một trang web, người thiết kế phải lựa chọn font sao đó để máy tính có thể hiện thị đúng ý đồ về mỹ thuật của mình. Lý do phải làm việc đó là do font chữ trên mỗi máy tính là không hoàn toàn giống nhau. Nếu người thiết kế không quan tâm hoặc không hiểu biết sẽ có thể làm ra một trang web trông thật bắt mắt, nghệ thuật chữ tuyệt vời trên máy tính của mình, nhưng ôi thôi, khi đưa lên Internet, người khác vào xem sẽ là một mớ hỗn độn.

Chính vì thế, các nhà thiết kế web để an toàn khi hiển thị, chỉ chọn một số font chữ phổ biến trên các hệ điều hành khác nhau, được gọi là Web Safe Font (hoặc (Safe web font). Cuối cùng là chỉ có chưa tới chục font chữ được sử dụng.

web safe fonts

Với chừng đó font, quả thật lắm lúc người ta phải than thở "gì mà xấu đui xấu điếc".

Thật may mắn đó là hầu hết người dùng sử dụng hệ điều hành Windows nên vấn đề cũng không quá phức tạp, một số nhà thiết kế đã thử dùng thêm một số font mà họ biết chắc rằng sẽ hiển thị tốt trên máy tính người dùng. Dần dần, theo sự phát triển của công nghệ làm web, ngày nay người ta gần như sử dụng bất cứ font chữ nào cho trang web của mình, kể cả việc trên máy tính người dùng có đến 100% không tồn tại font mà nhà thiết kế sử dụng.

Tại sao việc dùng font không có trên máy tính lại khả thi?

Khi CSS level 3 được đưa ra, cho phép nhà thiết kế web nhúng font vào trong trang web. Mạng Internet cũng có tốc độ cao nên việc nạp xuống một font chữ không còn là vấn đề khiến cho người truy cập cảm thấy bức xúc bỏ cuộc nữa. Như vậy, cho đến thời điểm 2017 này, về mặt lý thuyết mà nói, người thiết kế web có thể áp dụng mọi font chữ cho trang web mà mình thiết kế, lúc này vấn đề chỉ còn là việc sử dụng font có vi phạm bản quyền gì không.

Nào, giờ dùng ngay font chữ gì đó đẹp đẹp, thực hành ngay và luôn

Truy cập vào trang web https://fonts.google.com/ để xem các font cớ sẵn tiện sử dụng. Chúng ta sẽ thấy:

Google Fonts

Chỉ cần click chuột vào một vùng bất kỳ, sửa các chữ đó xem diện mạo ra sao, nhất là có hỗ trợ tiếng Việt có dấu hay không (nếu bạn muốn dùng tiếng Việt cần để ý điều này). Trông giông giống như sau:

Chọn font chữ Google

Khi ưng ý rồi, chỉ cần click vào biểu tượng dấu cộng màu trắng trong vòng tròn màu đỏ để lựa font đó sử dụng cho trang web của chúng ta. Lựa xong, ở đáy màn hình hiển thị lên một thanh màu đen cho biết font đã chọn, click vào thanh màu đen này sẽ ra như sau:

Chọn được font Google

Đến đây, nếu bạn đã là người từng làm một vài trang web, Thin không cần phải nói gì thêm vì chắc chắn bạn biết sẽ làm gì tiếp theo, bạn tự làm nhé.

Tuy nhiên, nếu bạn là người mới học làm web chưa được bao lâu, mới chỉ làm được một vài trang web rất đơn giản, Thin có đưa một đoạn mã vào bên dưới đây, bạn có thể copy về, save lại thành một file google-font-demo.html chẳng hạn, rồi mở trình duyệt lên, bấm Ctrl + O (chữ o trong ò ó o chứ không phải số không nhé) để mở file đó ra xem.

Đoạn mã:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
  <head>
    <meta charset="utf-8">
   
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
   
    <style>
      body {
        font-family: Roboto, serif;
        font-size: 24px;
      }
      
    </style>
    <title>Thử nghiệm làm web với font chữ do Google cung cấp</title>
  </head>
  <body>
    <p>Đây là một ví dụ về việc sử dụng font chữ do Google 
    cung cấp để làm web trông cho đẹp. Font này trông không 
    đến nỗi tệ phải không nào?</p>
  </body>
</html>

Như vậy, bạn đã có thể tự làm được những trang web với font chữ đẹp mắt rồi, có phải không nào?