Cách sử dụng
- Chọn đơn vị đang có (pt, px, mm, em hoặc %) và nhập cỡ.
- Mọi đơn vị còn lại cùng bản xem trước ở cỡ đó được hiển thị ngay.
- Với em, rem và %, đặt cỡ chữ cơ sở — trình duyệt mặc định là 16 px.
Giải thích tùy chọn
- Point và pixel
- Một point bằng 1/72 inch và CSS định nghĩa một pixel bằng 1/96 inch, nên 1 pt = 4/3 px và 12 pt = 16 px.
- Milimét
- 1 pt = 25,4 ÷ 72 ≈ 0,353 mm. Đây là kích thước vật lý của thân chữ và áp dụng khi in.
- em, rem và phần trăm
- Là bội số của cỡ chữ cơ sở. Với cơ sở 16 px, 1 em = 1 rem = 100% = 16 px = 12 pt.
- Cỡ chữ Hán (号)
- Trình soạn thảo tiếng Trung gọi cỡ bằng tên thay vì point, từ 初号 (42 pt) đến 八号 (5 pt). Công cụ đổi được cả hai chiều.
Các cỡ thường dùng
| pt | px | em (cơ sở 16 px) |
|---|---|---|
| 9 | 12 | 0,75 |
| 10,5 | 14 | 0,875 |
| 12 | 16 | 1 |
| 14 | 18,67 | 1,1667 |
| 18 | 24 | 1,5 |
| 24 | 32 | 2 |
Cỡ chữ web theo pixel, point và rem
Với mặc định của trình duyệt là 16 px làm cỡ cơ sở:
| Pixel | Point | rem / em | Cách dùng điển hình |
|---|---|---|---|
| 12 px | 9 pt | 0,75 rem | Chú thích, ghi chú cuối trang |
| 14 px | 10,5 pt | 0,875 rem | Chữ nhỏ, nhãn |
| 16 px | 12 pt | 1 rem | Nội dung chính |
| 18 px | 13,5 pt | 1,125 rem | Nội dung chính cỡ lớn, đoạn dẫn |
| 20 px | 15 pt | 1,25 rem | Tiêu đề nhỏ |
| 24 px | 18 pt | 1,5 rem | Tiêu đề |
| 32 px | 24 pt | 2 rem | Tiêu đề trang |
Nên dùng đơn vị nào
pt (point) dành cho in ấn và trình soạn thảo văn bản: 1 pt bằng 1/72 inch, nên chữ 12 pt có cùng kích thước vật lý trên mọi máy in.
px (pixel CSS) dành cho màn hình: 1 px được định nghĩa là 1/96 inch ở mức thu phóng bình thường, khiến 12 pt bằng 16 px.
rem và em là đơn vị tương đối. 1 rem là cỡ chữ gốc (thường là 16 px); 1 em là cỡ chữ của phần tử cha. Dùng rem cho chữ giúp những người đặt phông chữ mặc định lớn hơn trong trình duyệt có chữ to hơn ở mọi nơi.
Milimét hữu ích khi so khớp với một bản in mẫu: đo chiều cao của một chữ hoa và cỡ chữ nội dung xấp xỉ 1,4 lần số đó, tùy kiểu chữ.
Câu hỏi thường gặp
12 pt bằng bao nhiêu pixel?
16 px. Nhân point với 4/3 để ra pixel CSS, hoặc nhân pixel với 0,75 để ra point.
em và rem khác nhau thế nào?
rem dựa trên cỡ chữ gốc của phần tử html; em dựa trên cỡ chữ của phần tử cha. Nếu không đặt cỡ ở đâu, cả hai đều là 16 px.
Vì sao chữ đo trên màn hình không khớp quy đổi?
Pixel CSS là đơn vị logic được định nghĩa ở 96 DPI. Cỡ vật lý trên màn hình phụ thuộc mật độ điểm ảnh và mức phóng đại hệ thống. Point và milimét chỉ chính xác khi in.
Quyền riêng tư
Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Tệp và văn bản được xử lý ngay trên thiết bị và không bao giờ được tải lên máy chủ của chúng tôi.