Để định nghĩa kích thước font chữ cho văn bản trong 1 trang web, bạn có thể dùng thuộc tính font-size, ví dụ:
<p style="font-size:12pt">Xin chào các bạn! Đây là website dammio.com...</p>
Trong ví dụ trên chúng ta định nghĩa đoạn văn có kích thước là 12pt (point). Có rất nhiều đơn vị để định nghĩa kích thước font như: px, pt, em, % hay thậm chí là đơn vị vw (1vw = 1% độ rộng viewport, tức là độ rộng của cổng xem trang web). Việc chứa có nhiều đơn vị, khiến cho người thiết kế Web khó khăn trong việc chuyển đổi và nên sử dụng đơn vị nào, bảng sau đưa ra các so sánh các đơn vị kèm theo ví dụ:
| Point (pt) | Pixel (px) | Em (em) | Phần trăm (%) | Từ khóa | Ví dụ |
|---|---|---|---|---|---|
| 6pt | 8px | 0.5em | 50% | Sample | |
| 7pt | 9px | 0.55em | 55% | Sample | |
| 7.5pt | 10px | 0.625em | 62.5% | x-small | Sample |
| 8pt | 11px | 0.7em | 70% | Sample | |
| 9pt | 12px | 0.75em | 75% | Sample | |
| 10pt | 13px | 0.8em | 80% | small | Sample |
| 10.5pt | 14px | 0.875em | 87.5% | Sample | |
| 11pt | 15px | 0.95em | 95% | Sample | |
| 12pt | 16px | 1em | 100% | medium | Sample |
| 13pt | 17px | 1.05em | 105% | Sample | |
| 13.5pt | 18px | 1.125em | 112.5% | large | Sample |
| 14pt | 19px | 1.2em | 120% | Sample | |
| 14.5pt | 20px | 1.25em | 125% | Sample | |
| 15pt | 21px | 1.3em | 130% | Sample | |
| 16pt | 22px | 1.4em | 140% | Sample | |
| 17pt | 23px | 1.45em | 145% | Sample | |
| 18pt | 24px | 1.5em | 150% | x-large | Sample |
| 20pt | 26px | 1.6em | 160% | Sample | |
| 22pt | 29px | 1.8em | 180% | Sample | |
| 24pt | 32px | 2em | 200% | xx-large | Sample |
| 26pt | 35px | 2.2em | 220% | Sample | |
| 27pt | 36px | 2.25em | 225% | Sample | |
| 28pt | 37px | 2.3em | 230% | Sample | |
| 29pt | 38px | 2.35em | 235% | Sample | |
| 30pt | 40px | 2.45em | 245% | Sample | |
| 32pt | 42px | 2.55em | 255% | Sample | |
| 34pt | 45px | 2.75em | 275% | Sample | |
| 36pt | 48px | 3em | 300% | Sample |
Bảng trên giúp bạn so sánh các đơn vị kích thước văn bản, chẳng hạn 12 pt tương ứng 16 px hay 1 em. Nếu bạn muốn dùng font chữ cố định thì có thể dùng pt, nếu bạn muốn font chữ thay đổi theo kích thước màn hình có thể dùng px hay em. Việc áp dụng đơn vị font chữ nào là tùy thuộc nội dung, bố cục trang web và các tình huống cụ thể.
- APA:
Dammio. (2018). So sánh các đơn vị đo kích thước font trong HTML. https://www.dammio.com/2018/04/26/so-sanh-cac-don-vi-do-kich-thuoc-font-trong-html. - BibTeX:
@misc{dammio,
author = {Dammio},
title = {So sánh các đơn vị đo kích thước font trong HTML},
year = {2018},
url = {https://www.dammio.com/2018/04/26/so-sanh-cac-don-vi-do-kich-thuoc-font-trong-html},
urldate = {2025-04-18}
}
![[Bootstrap] Phần 14: Nhóm danh sách](https://www.dammio.com/wp-content/uploads/2016/11/no-image-410x260.png "[Bootstrap] Phần 14: Nhóm danh sách")
![[AngularJS] Phần 10: Dịch vụ trong AngularJS](https://www.dammio.com/wp-content/uploads/2017/01/banner-angularjs-410x260.jpg "[AngularJS] Phần 10: Dịch vụ trong AngularJS")
![[HTML/HTML5] Phần 24: Bố cục trang web HTML cơ bản](https://www.dammio.com/wp-content/uploads/2017/09/layout-004-410x260.jpg "[HTML/HTML5] Phần 24: Bố cục trang web HTML cơ bản")
[…] Để canh lề cho Spinner, bạn buộc phải sử dụng một số lớp canh lề như theo khoảng trắng như .m, .m-1,…,.m-5 (margin) và .p, .p-1,…, .p-5 (padding). Ví dụ canh lề bằng lớp .m-5 có nghĩa bạn cách lề theo thuộc tính margin: 3rem!important;. Trong đó rem là 1 đơn vị kích thước font chữ, bạn thêm tìm hiểu thêm ở bài So sánh các đơn vị đo kích thước font trong HTM…. […]