20 web font HTML tốt nhất năm 2021
Trong bài viết này, chúng tôi sẽ đem đến cho bạn 20 web font HTML tốt nhất cho trang web. Nếu dùng một trong số đó, bạn sẽ cải thiện đáng kể thiết kế cũng như sự dễ đọc của trang web.
Tại sao bạn nên quan tâm đến web font HTML?
Không biết bạn biết không nhưng font HTML đóng vai trò quan trọng trên trang web. Nếu chọn đúng font có thể cải thiện thẩm mỹ tổng thể của trang và cho phép khách truy cập đọc nội dung dễ dàng hơn.
Nhưng nếu bạn bất cẩn chọn font chữ ngẫu nhiên và không phù hợp có thể tác động tiêu cực. Nó ảnh hưởng xấu đến tính thẩm mỹ tổng thể của trang và khả năng đọc được nội dung của người xem.
Hơn nữa, font web cũng có thể ảnh hưởng đến hiệu suất của trang, cả tích cực lẫn tiêu cực. Nó phụ thuộc bạn có chọn font an toàn cho web hay không. Chúng tôi sẽ thảo luận về vấn đề này sâu hơn sau nên bạn cứ tiếp tục đọc nhé.
Cách thay đổi web font thông qua code HTML?
Để thay đổi font HTML, bạn có thể sử dụng thuộc tính style trong thẻ <p> để xác định đoạn văn bản. Dưới đây là ví dụ:
<p style = "font-family:courier,arial,helvetica;"> Write your text here </p>
Có 3 loại font trong ví dụ này – Courier, Arial, và Helvetica. Font thứ hai và thứ ba là bản sao lưu trong trường hợp font thứ nhất không được tìm thấy hoặc không được cài đặt đúng cách.
“Web Font an toàn” là gì?
Thuật ngữ này được sử dụng để mô tả font đã được cài đặt chung trên tất cả các thiết bị. Vì chúng được lưu trữ cục bộ, trang web của bạn sẽ tải nhanh hơn khi bạn sử dụng web font an toàn.
Điều này sẽ ảnh hưởng đến SEO vì tốc độ tải trang là một trong những yếu tố được tính khi xếp hạng trang trên SERP.
Đó là lý do tại sao chúng tôi khuyên bạn nên sử dụng web font an toàn – để đảm bảo người đọc có thể xem nội dung dễ dàng và hiệu suất của trang web không bị ảnh hưởng tiêu cực.
Hãy nhớ rằng có những lựa chọn thay thế cho web font an toàn, thường chung đặc điểm như kiểu chữ phổ biến. Ví dụ, font thay thế cho font Sans Serif như Helvetica là Acumin và Univers.
Nhưng không giống như các web font an toàn còn lại, font thay thế thường không có sẵn trên tất cả hệ điều hành. Mặc dù nói vậy, bạn vẫn muốn sử dụng một trong số đó vì có vẻ như font phổ biến thường bị lạm dụng. Chỉ cần nhớ là bạn cần hy sinh tốc độ trang web để đổi lấy.
5 họ font là những font nào?
Trong typography, mỗi font chữ là thành viên của 1 trong 5 họ font được phân loại dựa trên sự tương đồng về thiết kế. Chúng gồm:
Cursive (ví dụ như Zapf-Chancery)
Các font trong họ Cursive bắt chước chữ viết tay của con người và các chữ cái thường được nối với nhau một cách mượt mà. Nhiều người liên kết font Cursive với viết tay nha hơn và chữ thư pháp.
Fantasy (ví dụ như Star Wars)
Họ Fantasy đều mang sắc thái thiết kế trong mỗi chữ cái nhưng vẫn đại diện cho các ký tự. Nhiều cuốn sách hoặc phim giả tưởng sử dụng kiểu chữ từ họ font này làm tiêu đề để tăng cường sắc thái cho nội dung.
Serif (ví dụ Times New Roman)
Điểm đáng chú ý nhất của họ font này là dấu gạch chân ở cuối mỗi nét lớn trong một chữ cái hoặc ký hiệu, tạo ra cảm giác trang trọng và thanh lịch. Các trang web khác nhau chủ yếu sử dụng font Serif cho phần thân bài.
Sans-serif (ví dụ như Helvetica)
Khác với serif, Sans-serif không có dấu gạch chân ở mỗi chữ cái. Ngoài ra, hầu hết các font trong họ font này thường có chiều rộng nét bằng nhau, khiến nó trông hiện đại và tối giản.
Monospace (ví dụ như Courier)
Mỗi chữ cái và biểu tượng của font Monospace chiếm cùng không gian theo chiều ngang. Vì các phông chữ rắn chắc và dễ phân biệt, chúng thường được sử dụng trong máy đánh chữ và terminal của máy tính.
Tôi nên sử dụng font HTML nào cho web?
Chúng tôi khuyên bạn nên sử dụng web safe font (font an toàn) vì nó tương thích trên nhiều thiết bị khác nhau theo mặc định.
Điều cũng quan trọng là cần chọn font phù hợp với phong cách và tone chữ viết trên trang web. Nó sẽ tạo sự chuyên nghiệp hơn và cải thiện trải nghiệm đọc của người dùng.
Tin tuyệt vời là, bạn có thể dễ dàng tìm thấy web font phù hợp nhất cho mình trong các đề xuất dưới đây!
Các Web font an toàn tốt nhất
Tất cả fonts trong danh sách của chúng tôi đều an toàn trên web, vì vậy bạn không phải lo lắng về vấn đề tương thích hoặc hiệu suất. Bây giờ, hãy cùng khám phá 20 web font HTML tốt nhất:
1. Arial
Arial là một trong những font nổi tiếng nhất cho cả ấn phẩm online và bản in. Hơn nữa, đó là font mặc định trong Google Docs, bộ ứng dụng văn phòng online phổ biến. Nhiều nhà phê bình nói rằng font thuộc họ sans-serif này là bản an toàn cho bất cứ ai.
2. Times New Roman
Times New Roman là một biến thể của phông chữ Times cũ từ nhóm Serif. Với giao diện chuyên nghiệp, nó trở thành lựa chọn yêu thích cho ấn phẩm in và nội dung trang trọng hơn. Ngoài ra, kiểu chữ này được ưa chuộng bởi các trang tin tức và các tổ chức tương tự.
3. Helvetica
Các designers thích HTML Font Helvetica vì nó trung tính và phù hợp với mọi loại hình kinh doanh. Đó là lý do tại sao nhiều thương hiệu nổi tiếng như Jeep, Kawasaki, Motorola, và BMW, đã chọn font này. Chúng tôi chắc chắn sẽ không sai nếu chọn Helvetica, bất kể mục đích là gì.
4. Times
Ban đầu, Times được dùng khi in báo, và nó được kết nối với báo chí và văn bản học thuật kể từ đó. Do đó, nếu bạn muốn thêm cảm giác truyền thống hoặc trang trọng vào trang web thì font này là lựa chọn hoàn hảo.
5. Courier New
Font này thay thế cho Courier nhưng mỏng và đẹp hơn cho màn hình. Vì lý do đó, các thiết bị điện tử chủ yếu chọn Courier New. Nhưng vì cũng là font máy đánh chữ nên nó tốt cho các trang web theo thiết kế trường phái cũ.
6. Verdana
Kiểu chữ này dễ đọc ở cả size nhỏ hoặc khi hiển thị trên màn hình độ phân giải thấp. Điều này đưa Verdana thành font tuyệt vời cho màn hình. Công ty lớn như IKEA không chỉ dùng Verdana trên trang web mà còn cho bản in catalog. Nếu bạn đang tìm kiếm web font dễ đọc thì nên thử font này.
7. Courier
Có thể nói Courier là font nổi tiếng nhất trong họ monospace – tất cả các hệ điều hành đều dùng font này. Font HTML này cũng là font tiêu chuẩn cho màn chiếu phim. Do đó, nếu trang web của bạn thuộc những chủ đề trên, hãy xem xét thêm Courier cho trang.
8. Arial Narrow
Đây là một trong những phiên bản Arial được thiết kế đẹp hơn so với bản gốc. Người dùng có thể tìm thấy font chữ thay thế này trên nhiều hệ điều hành vì nó được cài đặt sẵn. Giống như phiên bản trước, Arial Narrow rất linh hoạt và phù hợp với bất kỳ loại trang web.
9. Candara
Microsoft Vista là hệ điều hành đầu tiên đưa Candara trở nên thịnh hành. Nó hỗ trợ hệ thống kết xuất văn bản Windows ClearType, giúp cải thiện việc đọc văn bản trên màn hình LCD.
10. Geneva
Geneva thuộc nhóm Sans-serif và được phát triển bởi Apple. Tương tự như các kiểu chữ trong họ font này, Geneva giúp trang web hoặc blog trông rõ ràng và hiện đại.
11. Calibri
Đây là font mặc định của Microsoft Office. Với việc Microsoft Windows vẫn đứng top thị phần hệ điều hành desktop, mọi người sẽ không gặp vấn đề gì khi đọc font HTML này trên trình duyệt.
12. Optima
Optima bắt nguồn từ các chữ La Mã cổ điển. Nó được sử dụng ở nhiều nơi khác nhau – từ biển hiệu chỉ đường đến logo các sản phẩm làm đẹp. Web font này thanh lịch và dễ nhìn, giúp nội dung được nổi bật.
13. Cambria
Calibri, Candara và Cambria đều thuộc kiểu font ClearType của Microsoft. Với tỷ lệ rất đồng đều, Cambria là web font an toàn được thiết kế dễ đọc trên màn hình, ngay cả khi hiển thị ở size nhỏ.
14. Garamond
Garamond là loại font cổ điển trên nhiều bản in sách. Các nhà thiết kế bản in xem nó là một trong những lựa chọn tốt nhất nhờ vẻ ngoài vượt thời gian và dễ đọc. Chúng tôi khuyên bạn nên dùng Garamond để thêm cảm giác cổ xưa vào trang web hoặc blog.
15. Perpetua
Font này xuất phát từ ý tưởng của điêu khắc gia người Anh, người chịu ảnh hưởng từ tượng đài và chữ tưởng niệm. Nhờ đặc tính trang trọng của Perpetua đã khuyến khích Penguin Classics và Đại học Pennsylvania dùng nó trong các ấn phẩm. Nói chung, trang giáo dục hoặc thông tin chắc chắn phù hợp với web font HTML này.
16. Monaco
MacOS X dùng Monaco, một font thuộc họ font monospace, cho Terminal và Xcode. Nó có thiết kế đặc biệt, giúp các chữ cái trông khác biệt so với bình thường. Hãy dùng thử Monaco cho trang web nếu bạn thường viết code và không muốn người đọc bị nhầm lẫn dù chỉ một chữ cái.
17. Didot
Didot là font serif được nhiều nhà phê bình mô tả là tân cổ điển – nghĩa là mang thiết kế cổ điển thêm nét hiện đại. Nó được CBS News và The Late Show với Stephen Colbert sử dụng. Kiểu chữ này được biết đến với độ tương phản cao và tăng điểm nhấn, giúp nó nổi bật.
18. Brush Script MT
Font này mang phong cách thư pháp dựa trên kỹ thuật viết tay. Bằng cách này, Brush Script MT trở thành web font HTML đẹp nhưng dễ đọc cho trang web. Mặc dù Brush Script MT nhìn thanh lịch và tinh xảo, nhưng nó phù hợp nhất cho các editor ghi chú và công dụng tương tự.
19. Lucida Bright
Lucida Bright là một trong những phiên bản font Lucida có độ tương phản cao hơn. Kiểu chữ này hẹp nên cho phép dùng không gian hiệu quả và phù hợp cho bài hướng dẫn sử dụng hoặc tạp chí. Trang nổi tiếng dùng kiểu chữ này là Tạp chí Khoa học Mỹ.
20. Copperplate
Các designer của Copperplate chỉ dùng font này cho header hoặc title vì nó chỉ có kiểu chữ in hoa. Kiểu chữ trở này trở nên nổi tiếng sau khi Ai là triệu phú biến phông chữ này thành thương hiệu của mình.
Một font bị cười nhạo (Comic Sans)
Người dùng Internet chia sẻ điểm chung là họ ghét phông chữ Comic Sans. Họ thấy kiểu chữ này trẻ con, không chuyên nghiệp, không hấp dẫn và trông ngớ ngẩn.
Nó đã trở thành meme những năm qua. Vì vậy, chúng tôi không khuyên bạn sử dụng nó. Mặc dù nó là web font an toàn, nhưng vẫn còn nhiều tùy chọn khác có thể giúp trang web của bạn tốt hơn hơn nhiều so với Comic Sans.
Tóm lại
Chúng tôi đã đem đến cho bạn 20 web font HTML tốt nhất cho trang web. Bây giờ bạn đã biết đặc trưng cũng như cách sử dụng của mỗi loại, đã đến lúc lựa chọn cái phù hợp nhất cho phong cách trang web của bạn.
Chúc bạn may mắn và hãy nhớ – Comic Sans chưa bao giờ là một web font an toàn.
32 Comments
avanda
22 October, 2022
May I simply just say what a comfort to uncover someone who actually understands what they are discussing on the net. You definitely understand how to bring an issue to light and make it important. More people ought to look at this and understand this side of the story. I can’t believe you aren’t more popular since you definitely possess the gift.
https://avanda.id
car detailing
31 October, 2022
Im grateful for the blog post.Much thanks again.
https://www.blogger.com/profile/13398427768952641562
Kelvin Kaemingk loanDepot
6 November, 2022
Hey, thanks for the article post.Really thank you! Cool.
https://woodburymag.com/todd-frazier-susan-frazier-jennifer-kaemingk-kelvin-kaemingk
mp3quack
18 November, 2022
Your style is really unique compared to other people I’ve read stuff from. Many thanks for posting when you have the opportunity, Guess I will just book mark this web site.
https://mp3quack.pro
jegeg bulan care bebek mp3
19 November, 2022
Can I just say what a relief to discover someone that truly knows what they are discussing online. You actually realize how to bring a problem to light and make it important. More people have to read this and understand this side of your story. I was surprised you’re not more popular since you definitely have the gift.
http://web.if.unila.ac.id/gudanglagu/download-lagu-jegeg-bulan-care-bebek.html
rv fab shop
21 November, 2022
This is a topic that is near to my heart… Best wishes! Where are your contact details though?
https://www.feedroll.com/rssviewer/feed2js.php?src=https://ocrvcenter.com/rv-remodel-near-me/
mp3
26 November, 2022
This web site really has all of the info I wanted concerning this subject and didn’t know who to ask.
https://app.glosbe.com/profile/7001963144872463557
Berkshire removal
26 November, 2022
Thanks so much for the article.Really looking forward to read more. Want more.
https://en-gb.facebook.com/RemovalsBerkshire
Tubidy
27 November, 2022
Howdy! This post could not be written much better! Looking at this article reminds me of my previous roommate! He constantly kept preaching about this. I’ll forward this article to him. Fairly certain he’ll have a good read. Thank you for sharing!
http://www.amzjc.com/home.php?mod=space&uid=512540
Look At This
28 November, 2022
Good article. I’m going through a few of these issues as well..
http://channingtatumunwrapped.com/2009/03/ctu-news-and-the-winners-of-the-battle-in-seattle-dvds-are/
download lagu usai tiara andini
29 November, 2022
bookmarked!!, I love your website!
http://webblogkkn.unsyiah.ac.id/keudeunga16/mp3/download-lagu-tiara-andini-usai-mp3/
Tubidy
30 November, 2022
Hi! I simply would like to offer you a big thumbs up for the excellent information you’ve got right here on this post. I am returning to your website for more soon.
https://guardian.ng/saturday-magazine/weekend-beats/easy-ways-to-download-tubidy-and-get-access-to-unlimited-musicE2808D/
south africa mp3 download
3 December, 2022
Hi, I do think this is a great web site. I stumbledupon it 😉 I may revisit yet again since I saved as a favorite it. Money and freedom is the greatest way to change, may you be rich and continue to help others.
https://alexisdvjui.blog5.net/56150741/top-tips-of-music
click site
3 December, 2022
Nice post. I learn something new and challenging on sites I stumbleupon on a daily basis. It’s always helpful to read through content from other authors and practice something from other websites.
https://emilioidzsl.develop-blog.com/20055733/new-step-by-step-map-for-download-mp3-south-african
Daliwonga Abo Mvelo Mp3 Download
4 December, 2022
This is the perfect web site for anyone who hopes to understand this topic. You know so much its almost hard to argue with you (not that I really will need to…HaHa). You definitely put a brand new spin on a topic which has been written about for many years. Great stuff, just great.
http://biodoma.by/forums/users/paulglove6/
letsmix
5 December, 2022
You are so cool! I don’t suppose I’ve truly read through something like this before. So great to discover someone with some unique thoughts on this subject. Seriously.. many thanks for starting this up. This web site is something that is needed on the web, someone with some originality.
https://letsmix.com
Download South African Songs
6 December, 2022
Everything is very open with a clear explanation of the issues. It was definitely informative. Your website is extremely helpful. Many thanks for sharing!
https://franciscohvfnv.blogpayz.com/15825178/the-intelligent-technique-of-south-africa-mp3-download-that-no-person-is-actually-discussing
https://letsmix.com
6 December, 2022
I was pretty pleased to discover this great site. I need to to thank you for ones time for this particularly fantastic read!! I definitely loved every bit of it and I have you bookmarked to see new information in your website.
https://cse.google.com.lb/url?q=https://letsmix.com
Stop Youtube Ads
9 December, 2022
Way cool! Some extremely valid points! I appreciate you penning this write-up and also the rest of the site is also really good.
https://www.ident.de/adserver/www/delivery/ck.php?ct=1&oaparams=2__bannerid=76__zoneid=2__cb=8a18c95a9e__oadest=http://www.globalmkg.com
RV Generator Service Near Me
14 December, 2022
After going over a handful of the blog posts on your website, I honestly like your way of writing a blog. I book marked it to my bookmark site list and will be checking back soon. Take a look at my website as well and tell me what you think.
http://www.tm-flavor.com/shop00/calendar.cgi?m=55&b=https://ocrvempire.com/motorhome-window-repair-near-me/
Authorized Sprinter Repair Shop
29 December, 2022
Phenomenal is an all-in-one life management tool that will certainly help you obtain more carried out in much less time.
https://cse.google.bf/url?sa=j&source=web&rct=j&url=https3A2F2Focrv.art/news&sa=D&sntz=1&usg=AFQjCNGaY_nlK9ozc51fqwjiVdMaYZL7rg
diesel truck maintenance
2 January, 2023
Discover the best method to boost your life forever.
http://www.local.google.be/url?sa=t&source=web&rct=j&url=https://oc-rv.com/rv-sound-system-repair-near-me
Camper Renovations Near Me
11 January, 2023
You might find that you are doing every little thing quicker, far better and also more successfully than ever before in your life!
https://belyevik.ru/bitrix/redirect.php?event1=catalog_out&event2=http2F2F__media__2Fnetsoltrademark.php3Dlogin.ezproxy.lib.usf.edu3Furl2FJoniHa.n.s.e.N.4.9.7.7740Zanele40i.nsult.i.ngp.a.T.l40hu.fe.ng.k.ua.ngniu.bi..uk4140silvia.woodw.o.r.t.h40meli.s.a.ri.c.h422340re.d.u.cti.o.n.n.gy.m40w.a.l.rus.c.v.k.d40faul.ty.b.e.a.m.d.u.l.l.t.n.d.e.r.w.e.a.r.e.r.t.w.e.s.e40www.emekaolisa40e.xped.it.io.n.eg.d.g40e.xped.it.io.n.eg.d.g40Gal.EHi.Nt.on78.8.2740WWW.EMEKAOLISA40britni.vieth_15104540n.oc.no.x.p.A.rk.e40ex.p.lo.si.v.edhq.g40coolh.ottartmassflawles.s.p.a.n.e.r.e.e40www.zaneleF0EEEC+E0E1E8EEE3EEEAE5E3E8F1E0EEF7E8+E1E5+EFEEE7E2E4EB29&goto=http://www.oc-rv.com/rv-repair-shop-san-juan-capistrano-california/
ford transit van conversion kits
21 January, 2023
I will make your life so much less complicated, you won’t understand how to thank me.
https://tooth-extraction-smoking20011.widblog.com/70238646/the-leading-10-practical-ways-to-pick-a-camper-van-builders-and-any-warnings-to-look-for-prior-to-purchasing
RV Service Shops Near Me
21 January, 2023
Discover the best habits of successful people.
https://multiple-bio-links61471.blogaritma.com/18410507/the-top-things-to-look-for-when-choosing-an-rv-center-for-your-rv-requirements
Truck Body Shop
22 January, 2023
You will certainly be able to obtain even more done, really feel far better, and live a more remarkable life!
https://biolinkme34677.ka-blogs.com/69273770/what-to-try-to-find-when-picking-the-best-truck-repair-center-near-you
RV Company Near Here
16 February, 2023
Appreciate the benefits of a healthy, luxurious and pleased life with this impressive product.
http://finants.wraptight.com/__media__/js/netsoltrademark.php?d=ocrvcenter.com/rv-frame-repair-near-me
RV Repair Company
16 February, 2023
Achieve much more as well as do it better with Amazingness!
https://media.stellantisnorthamerica.com/securedredirect.do?redirect=http://ocrvcenter.com/rv-repair-shop-brea-california
truck repair shop near me
5 March, 2023
Amazing is a exclusive formula for assisting you complete a lot more and really feel much better concerning your life.
http://www.hellotw.com/gate/big5/www.fleettruckrepairshop.com/semi-truck-repair-shop-near-me-2/
Motorhome Repair Shop Nearby
8 March, 2023
This amazingness is a life changer!
http://inwap.com/mf/reboot/goto.cgi?http://ocrvcenter.com/motorhome-leak-repair-near-me
autobody repair shop near me
23 March, 2023
Amazingness is the performance app that will transform your life.
https://encrypted.google.com/url?sa=i&source=web&rct=j&url=https://ocrv.xyz/emergency-truck-collision-repair-shop-near-me
RV Repair Oc California
27 March, 2023
I will make your life so much less complicated, you won’t recognize exactly how to thank me.
http://big5.chinaso.com/big5/www.claytonwkleh.blogdemls.com/18101075/the-main-10-important-ways-to-opt-for-a-dyno-tuning-enterprise-and-any-pink-flags-to-look-for-ahead-of-paying-for/