Lựa chọn phông chữ là quan trọng
Việc chọn đúng phông chữ có tác động rất lớn đến cách người đọc trải nghiệm một trang web.

Phông chữ phù hợp có thể tạo ra bản sắc mạnh mẽ cho thương hiệu của bạn.

Sử dụng phông chữ dễ đọc là điều quan trọng. Phông chữ thêm giá trị cho văn bản của bạn. Điều quan trọng nữa là chọn đúng màu sắc và kích thước văn bản cho phông chữ.

Generic Font Families

Trong CSS có năm họ phông chữ chung:

Phông chữ Serif có một nét nhỏ ở rìa mỗi chữ cái. Chúng tạo cảm giác trang trọng và sang trọng.
Phông chữ Sans-serif có đường nét rõ ràng (không có nét nhỏ kèm theo). Chúng tạo ra một cái nhìn hiện đại và tối giản.
Phông chữ đơn cách – ở đây tất cả các chữ cái đều có cùng chiều rộng cố định. Họ tạo ra một cái nhìn máy móc.
Phông chữ chữ thảo bắt chước chữ viết tay của con người.
Phông chữ tưởng tượng là phông chữ trang trí/vui tươi.
Tất cả các tên phông chữ khác nhau đều thuộc về một trong các họ phông chữ chung.

Difference Between Serif and Sans-serif Fonts

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

Font Style

Thuộc tính kiểu phông chữ chủ yếu được sử dụng để chỉ định văn bản in nghiêng.

Thuộc tính này có ba giá trị:

normal – Văn bản được hiển thị bình thường
italic – Văn bản được hiển thị in nghiêng
oblique – Văn bản “nghiêng” (xiên rất giống với chữ nghiêng, nhưng ít được hỗ trợ hơn)

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Font Weight

Thuộc tính font-weight chỉ định độ dày của phông chữ:

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Font Variant

Thuộc tính font-variant chỉ định xem văn bản có được hiển thị bằng phông chữ viết hoa nhỏ hay không.

Trong phông chữ viết hoa nhỏ, tất cả các chữ cái viết thường đều được chuyển thành chữ in hoa. Tuy nhiên, các chữ in hoa được chuyển đổi sẽ xuất hiện ở cỡ chữ nhỏ hơn các chữ in hoa ban đầu trong văn bản.

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Font Size

Thuộc tính font-size thiết lập kích thước của văn bản.

Khả năng quản lý kích thước văn bản rất quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng chức năng điều chỉnh cỡ chữ để đoạn văn trông giống tiêu đề, hoặc tiêu đề giống đoạn văn.

Luôn sử dụng các thẻ HTML thích hợp, như <h1> — <h6> cho tiêu đề và <p> cho các đoạn văn.

Giá trị kích thước phông chữ có thể là kích thước tuyệt đối hoặc tương đối.

Kích thước tuyệt đối:

Đặt văn bản theo kích thước được chỉ định
Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (không tốt vì lý do khả năng truy cập)
Kích thước tuyệt đối rất hữu ích khi biết kích thước vật lý của đầu ra
Kích thước tương đối:

Đặt kích thước tương ứng với các phần tử xung quanh
Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt

Đặt cỡ chữ bằng pixel
Đặt kích thước văn bản bằng pixel cho phép bạn kiểm soát hoàn toàn kích thước văn bản:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Đặt cỡ chữ bằng Em

Để cho phép người dùng thay đổi kích thước văn bản (trong menu trình duyệt), nhiều nhà phát triển sử dụng em thay vì pixel.

1em bằng cỡ chữ hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, kích thước mặc định của 1em là 16px.

Kích thước có thể được tính từ pixel đến em bằng công thức sau: pixels/16=em

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}