3 Typeface thông dụng trong thiết kế Web
Đăng trong danh mục Graphic Design, Web Design bởi admin | Tags: font, monospace, sans-serif, serif, typeface, web font

Chắn hẳn trong số mọi người ai cũng đã từng làm việc với Word và cũng đã biết khái niệm font chữ. Nói về font chữ thì mọi người cũng biết là có cả ngàn font chữ khác nhau, tuy nhiên không ít người chưa biết là chỉ có vài loại font chữ mà thôi. Theo Adobe định nghĩa có 8 loại font chữ (gọi là Typeface) đang tồn tại.
Nói đến thiết kế là sẽ nói đến sử dụng chữ và tất nhiên đi kèm font chữ nào cho đẹp, diễn tả đúng hiệu ứng thiết kế…Như đề cập ở trên có khoảng 8 Typeface cho ứng dụng thiết kế. Tuy nhiên trên web thì mình thấy nổi bật nhất là 3 Typeface: Serif, Sans-serif và Monospace. Mọi người đã gặp 3 typeface này hoài mà không để ý thôi. Mình sẽ giới thiệu sơ qua về 3 Typeface này cho các bạn làm quen. Nào hãy cùng khám phá !
1> Serif
Đây là font chữ có lịch sử lâu đời và được sử dụng khá quen thuộc trong nhiều văn bản in. Trong thành phần của mỗi ký tự có một chi tiết gọi là serif. Serif chính là một nét thừa ra ở cuối mỗi nét khi vẽ 1 ký tự. Hình dưới đây sử dụng font chữ Times News Roman – một font chữ Serif điển hình. Chú ý các nét kết thúc ở các chữ thuộc typeface này.

2> Sans-serif
Typeface thứ 2 thông dụng không kém đó chính là Sans-serif. Trong tiếng Latin, “sans” có nghĩa là “không có”, do đó typeface này bao gồm các font chữ mà cuối các nét không có phần đuôi ’serif’. Font chữ này được sử dụng phổ biến trên website vì tính chất rõ ràng của các ký tự. Có 2 font chữ đang rất nổi tiếng thuộc typeface này chính là font chữ Helvetica, Myriad Pro(của Adobe). Hình dưới đây sử dụng font chữ Arial vì đó là font sans-serif chuẩn cho web.

3> Monospace
Typeface cuối cùng trong nhóm 3 typeface thông dụng nhất. Sử dụng không rộng rãi như 2 loại trên nhưng các font chữ dạng này có 1 ý nghĩa đặc biệt riêng của nó. Đối với làm việc với Code thì sẽ gặp font chữ monospace hằng giờ, hằng ngày. Một đặc điểm để phân biệt typeface này chính là độ rộng của các ký tự trong 1 font chữ là như nhau, giúp hiển thị những đoạn Code được ngay ngắn và rõ ràng hơn. Hình dưới đây sử dụng font chữ Courier New, 1 font chữ monospace thông dụng.

Như vậy là bây giờ các bạn có thể phân biệt được ít nhất 3 Typeface trên web. Bây giờ lướt 1 website thì bạn có thể biết nó sử dụng loại Typeface nào rồi nhé! Muốn tìm hiểu các typeface còn lại để dành cho mục đích đồ họa (banner, photo, poster, video…) thì có thể google để tìm hiểu nhé. Chúc mọi người thấy thú vị với nghệ thuật của các font chữ (Typography).
Bài viết liên quan:
7 Lời bình cho bài viết “3 Typeface thông dụng trong thiết kế Web”
Viết lời bình
Bình luận mới nhất
- phpmailer gởi mail SMTP bằng Gmail/Google Apps
"@trung, nếu vậy thì thử tes" - admin - phpmailer gởi mail SMTP bằng Gmail/Google Apps
"SMTP Error: Could not connect to SMTP host. mình đã làm đủ cách như e" - trung - Cấu hình domain ảo ở localhost
"Chào Cho mình hỏi mình co 1 server window dang chay IIS web asp.net " - Minh Phuong - dotProject - Online Project Management
"@tùng, lỗi quá rõ ràng rồi " - admin - dotProject - Online Project Management
"mình install báo lỗi: not create database.Mình không biết xử lý thế nà" - tùng - Review sách: Hiểu về trái tim - Minh Niệm
"may ban cho minh hoi la : minh nho` nguoi nha di mua sach dum, vi minh" - Tracy - Làm IT nên đọc ebook của nhà xuất bản nào?
"@Lê Hoàng Dũng, Mình cũng" - long - Hội thảo: Heavy Web Optimization – Back-end
"Đã là slide thì sao mà chi tiết được, thế mới gọi là thuyết trình chứ," - DaiGiaCaiBang - Hội thảo: Heavy Web Optimization – Back-end
"Nếu có thể thì anh Tuấn nên viết slide chi tiết hơn tí để mọi người kh" - ichuot - FBNC - Kênh truyền hình TPHCM "pro" nhất hiện nay!
"neu ban dung cap SCTV, ban co the xem SCTV8, day la kenh VITV phat son" - nga
Danh mục
- android (3)
- Business (24)
- Flash (1)
- Graphic Design (16)
- IT Guys (1)
- Javascript (9)
- Miscellaneous (58)
- Photography (9)
- PHP (41)
- Review sách (13)
- Search Engine Optimization (2)
- security (3)
- software (5)
- User Interface Design & Usability (8)
- Web Design (28)
- Web Programming (50)
Lưu trữ
- May 2012 (1)
- March 2012 (2)
- February 2012 (1)
- January 2012 (1)
- December 2011 (1)
- November 2011 (2)
- September 2011 (2)
- August 2011 (1)
- July 2011 (4)
- June 2011 (2)
- May 2011 (2)
- April 2011 (2)
- March 2011 (2)
- February 2011 (2)
- January 2011 (4)
- December 2010 (6)
- November 2010 (3)
- October 2010 (3)
- September 2010 (5)
- August 2010 (6)
- July 2010 (5)
- June 2010 (2)
- May 2010 (5)
- April 2010 (7)
- March 2010 (8)
- February 2010 (4)
- January 2010 (10)
- December 2009 (12)
- November 2009 (12)
- October 2009 (15)
- September 2009 (16)
- August 2009 (11)
- July 2009 (15)
- November 2008 (1)
- October 2008 (1)
- September 2008 (3)


November 20, 2009 at 9:37 am
Bài rất hay, thanks Tuấn đã bổ sung kiến thức cho mình
[Reply]
December 8, 2009 at 5:08 pm
Mình đọc cũng hiểu chút xiu’ ^^
Cám ơn ban nhiều !
[Reply]
February 4, 2010 at 5:38 pm
cho xin bài này về công bố trên onvn… – site chia sẻ đồ họa nhé
[Reply]
admin Reply:
February 4th, 2010 at 10:47 pm
Bạn có thể copy nhưng mong bạn ghi lại nguồn là bloghoctap thì mình cảm ơn
[Reply]
July 12, 2011 at 4:33 pm
bài viết bổ ích, mình cũng học hỏi thêm được nhiều điều
[Reply]
August 23, 2011 at 11:10 am
tks chủ blog ! bài viết rất hay. lại bít thêm đc một tí ^^
[Reply]
September 18, 2011 at 5:57 pm
hay quá, mình cũng có đọc qua mấy cái này nhưng chưa biết về monospace ^^, thanks vì bài viết hay
[Reply]