Những font chữ dùng trong thiết kế website

Để một website có được nhiều lượt tương tác, truy cập thì ngoài giao diện website, hình ảnh, font chữ cũng là điều mà bạn cần phải lưu ý. Ngày nay, font chữ dùng để thiết kế website có rất nhiều, với nhiều phong cách độc đáo và cá tính. Vậy có những font chữ nào thích hợp để thiết kế website. Các bạn hãy cùng với Web Khởi Nghiệp tìm hiểu trong bài viết dưới đây.

Arial – Kiểu font tiêu chuẩn khi thiết kế web

Được xem là kiểu font tiêu chuẩn khi lập trình web, và được sử dụng phổ biến nhất trong nhóm sans-serif. Font này được lựa chọn để có thể thay thế cho các kiểu font khác trên thiết bị Windows

font chữ arial - font phổ biến dùng trong thiết kế website

Helvetica

Font sử dụng kiểu chữ sans-serif phổ biến, được phát triển bởi Max Miedinger – nhà thiết kế font chữ nổi tiếng người Thụy Sĩ vào năm 1957. Font chữ này có chiều cao x (x-height), giúp người dùng dễ đọc hơn khi nó ở kích thước nhỏ, cũng như khoảng cách giữa các ký tự khá gần.

font helvetica trong thiết kế web

Những phiên bản của Helvetica được sử dụng cho các thứ tiếng: Latin, Hebrew, Nhật, Cyrillic, Hàn, Hindi, Hàn, Khmer, Urdu và Việt Nam.

Verdana

Là kiểu font chữ dành cho menu thuộc nhóm sans-serif, có kích thước lớn. Ký tự của font thường kéo dài, nó giúp bạn có thể dễ có thể đọc được dễ dàng.

font chữ verdana

Times New Roman

Là một trong những font chữ phổ biến nhất trên thiết bị Windows. Font chữ phù hợp với các trang tài liệu, báo chí,…. Và nó cũng hỗ trợ ngôn ngữ tiếng Việt

font chữ có chân thông dụng times new roman trong thiết kế web

Courier New

Một kiểu font tương tự Times New Roman, một biến thể của kiểu cổ điển khác, và được xem là font chữ đơn cách

font chữ courier new - một trong những font phổ biến

Tahoma

Là một trong những kiểu font thông dụng, kiểu chữ đẹp mắt, rõ ràng. Tác dụng của font này rất đa dạng, có thể được dùng làm menu, tiêu đề chính, tiêu đề phụ cũng như nội dung bài viết.

font tahoma - font chữ tròn đẹp

Georgia

Font chữ tương tự như Verdana có ký tự font lớn hơn so với các font có cùng kích cỡ. Đây sẽ là sự lựa chọn tuyệt vời trong một số trường hợp nhất định. Bạn cũng cần lưu ý một điều là không nên ghép font này với font khác, vì có thể font này sẽ trông to hơn font được ghép đôi.

font georgia font chữ phổ biến sau arial

Calibri

Là font chữ mặc định trong Word, vì nó rất phù hợp với việc soạn thảo văn bản, và cũng có thể dùng trong thiết kế web với kích thước 12 pt (point) trở lên

calibri font mặc định trong word

Garamond

Là font được dùng ở các trường học vào thế kỷ XVI ở Paris – Pháp. Đối với phiên bản mới thì nó đã được tích hợp sẵn trên những thiết bị chạy Windows. Thế nhưng, font này lại có một nhược điểm là nó không hỗ trợ tốt cho tiếng Việt.

garamond font chữ có chân thuộc dạng chữ mảnh

Bookman (Bookman Old Style)

Nếu bạn đang băn khoăn không biết nên chọn font gì để làm tiêu đề, thì Bookman là một sự lựa chọn tuyệt vời đấy

font bookman, font chữ nét đậm chuyên dùng định dạng tiêu đề

Làm thế nào để nhúng font vào trang web?

Để nhúng font vào web khi thực hiện thiết kế website thì có rất nhiều cách, trong bài viết này xin hướng dẫn các bạn 2 cách nhúng font vào website:

Nhúng trực tiếp bằng CSS

Đầu tiên các bạn tải font từ trên Internet về máy tính

Tiếp theo, bạn truy cập vào thư mục CSS của bạn trên hosting và tải font bạn vừa download về máy tính lên

Bạn mở file CSS chính của bạn lên và thêm vào dòng sau, vị trí thêm là ở đầu file css.

cách nhúng font bằng @font face

@font-face giúp bạn định nghĩa 1 font mới cho website của bạn, với nhiều thuộc tính font khác:

  • src:url(đường dẫn): Đây là đường dẫn đến font của bạn. Bạn có thể dùng đường dẫn trực tiếp hoặc đường dẫn gián tiếp để website có thể nhận được font của bạn. Mình thường hay sử dụng đường dẫn trực tiếp để dẫn link đến font mình cần (mình sẽ nói rõ hơn về đường dẫn trực tiếp và được dẫn giá tiếp ở những bài viết sau)
  • font-family: Tên font bạn muốn: Thuộc tính này sẽ giúp bạn đặt tên cho font mà bạn nhúng vào

Bạn có thể thêm các thuộc tính khác vào để giúp font trông đẹp hơn, font chữ to hơn….

Dùng Google font với cách nhúng thẻ Link HTML

Bạn truy cập vào đường dẫn https://fonts.google.com để chọn font mà bạn thích

Sau khi bạn chọn được font mà bạn thích bạn nhấn chuột trái thẳng vào font đó.

Sau đó bạn chọn Select this style

sử dụng google font để thay đổi font cho website

Một hộp thoại Select Family sẽ hiện lên, bạn nhấp vào tab Embed.

cách nhúng google font bằng code embed

Sau đấy copy đoạn code <link> và dán vào trong cặp thẻ <head></head> của mã nguồn.

nhúng font google bằng html

Để sử dụng được font bạn chuyển qua file CSS chính thêm đoạn code font-family và nơi mà bạn muốn thay đổi font.

them css font-family cho google font

Vậy là xong rồi đấy, nhúng font rất dễ dàng phải không nào. Bạn có thể thử với những kiểu font khác mà bạn muốn đấy.

Trên đây là bài viết về font chữ dùng trong thiết kế website, cũng như các nhúng font vào website. Xin chào và hẹn gặp lại các bạn ở những bài viết sau.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0792.189.189