Công Cụ Chuyển Đổi Cỡ Chữ
Chuyển đổi cỡ chữ giữa điểm, pixel, em, rem, phần trăm, milimét, inch và pica. Công cụ tuân theo định nghĩa CSS — 96 pixel và 72 điểm trên mỗi inch — và cho phép bạn đặt cỡ chữ gốc và cỡ chữ của phần tử cha, hai giá trị mà em, rem và % phụ thuộc vào.
Trình duyệt bắt đầu ở 16 px. Hãy thay đổi các giá trị này nếu stylesheet của bạn đặt cỡ chữ khác cho phần tử html hoặc phần tử cha.
12 pt theo mọi đơn vị
| Đơn vị | Cỡ chữ | CSS | Sao chép |
|---|---|---|---|
| Điểm (pt) | 12 | 12pt | |
| Pixel (px) | 16 | 16px | |
| em | 1 | 1em | |
| rem | 1 | 1rem | |
| Phần trăm (%) | 100 | 100% | |
| Milimét (mm) | 4,2333 | 4.2333mm | |
| Xentimét (cm) | 0,4233 | 0.4233cm | |
| Inch (in) | 0,1667 | 0.1667in | |
| Pica (pc) | 1 | 1pc |
Cách tính
- 12 pt × 96 ÷ 72 = 16 px
- 16 px ÷ 16 px = 1 em
- 16 px ÷ 16 px = 1 rem
- 16 px × 25,4 ÷ 96 = 4,2333 mm
Word trên Windows và Google Docs đo cỡ chữ bằng điểm và coi một inch bằng 96 pixel, nên ở mức phóng to 100%, chữ 12 điểm được vẽ có cùng kích thước với chữ 16 px trong trình duyệt.
Các cỡ chữ điểm thông dụng
em, rem và % dùng cỡ chữ gốc và cỡ chữ của phần tử cha ở trên.
| Điểm | Pixel | em | rem | % | mm |
|---|---|---|---|---|---|
| 6 | 8 | 0,5 | 0,5 | 50 | 2,12 |
| 7 | 9,33 | 0,583 | 0,583 | 58,3 | 2,47 |
| 8 | 10,67 | 0,667 | 0,667 | 66,7 | 2,82 |
| 9 | 12 | 0,75 | 0,75 | 75 | 3,18 |
| 10 | 13,33 | 0,833 | 0,833 | 83,3 | 3,53 |
| 10,5 | 14 | 0,875 | 0,875 | 87,5 | 3,7 |
| 11 | 14,67 | 0,917 | 0,917 | 91,7 | 3,88 |
| 12 | 16 | 1 | 1 | 100 | 4,23 |
| 14 | 18,67 | 1,167 | 1,167 | 116,7 | 4,94 |
| 16 | 21,33 | 1,333 | 1,333 | 133,3 | 5,64 |
| 18 | 24 | 1,5 | 1,5 | 150 | 6,35 |
| 20 | 26,67 | 1,667 | 1,667 | 166,7 | 7,06 |
| 22 | 29,33 | 1,833 | 1,833 | 183,3 | 7,76 |
| 24 | 32 | 2 | 2 | 200 | 8,47 |
| 28 | 37,33 | 2,333 | 2,333 | 233,3 | 9,88 |
| 32 | 42,67 | 2,667 | 2,667 | 266,7 | 11,29 |
| 36 | 48 | 3 | 3 | 300 | 12,7 |
| 48 | 64 | 4 | 4 | 400 | 16,93 |
| 72 | 96 | 6 | 6 | 600 | 25,4 |
Cách Sử Dụng Công Cụ Chuyển Đổi Cỡ Chữ
- 1. Nhập cỡ chữ và đơn vị. Gõ 12 rồi chọn điểm, hoặc 24 rồi chọn pixel — bất kỳ đơn vị nào trong chín đơn vị đều có thể là điểm xuất phát.
- 2. Đặt cỡ chữ tham chiếu nếu cần. rem được tính theo cỡ chữ gốc (
html), còn em và % tính theo cỡ chữ của phần tử cha. Cả hai đều bắt đầu ở 16 px, mặc định của trình duyệt. - 3. Đọc cỡ chữ theo mọi đơn vị. Mỗi dòng cho giá trị và đoạn CSS để dán, kèm nút sao chép; phần cách tính thể hiện từng phép chuyển đổi qua pixel.
- 4. Xem bảng cỡ chữ thông dụng. Các cỡ chữ điểm trong menu của trình soạn thảo văn bản, từ 6 đến 72, được liệt kê cùng giá trị tương đương theo pixel, em, rem, phần trăm và milimét.
Quy Tắc Chuyển Đổi
CSS cố định quan hệ giữa các đơn vị vật lý: một inch bằng 96 pixel, 72 điểm, 6 pica hoặc 25,4 milimét. Vì vậy một điểm đúng bằng 4/3 pixel. Các đơn vị tương đối cần thêm một con số nữa — cỡ chữ mà chúng được tính theo.
| Đơn vị | Sang pixel | Từ pixel |
|---|---|---|
| Điểm (pt) | px = pt × 96 ÷ 72 | pt = px × 72 ÷ 96 |
| Pica (pc) | px = pc × 16 | pc = px ÷ 16 |
| Milimét (mm) | px = mm × 96 ÷ 25,4 | mm = px × 25,4 ÷ 96 |
| Inch (in) | px = in × 96 | in = px ÷ 96 |
| em | px = em × cỡ chữ cha | em = px ÷ cỡ chữ cha |
| rem | px = rem × cỡ chữ gốc | rem = px ÷ cỡ chữ gốc |
| Phần trăm (%) | px = % × cỡ chữ cha ÷ 100 | % = px ÷ cỡ chữ cha × 100 |
Cỡ chữ gốc và cỡ chữ cha tính bằng pixel; cả hai đều là 16 px trừ khi stylesheet thay đổi chúng.
Với mặc định, 12 pt là 12 × 96 ÷ 72 = 16 px. Khi đó 16 ÷ 16 cho 1 em, 1 rem và 100%, còn 16 × 25,4 ÷ 96 cho 4,2333 mm. Đặt cỡ chữ cha là 20 px thì cùng 16 px trở thành 0,8 em và 80% — nhưng vẫn là 1 rem, vì rem bỏ qua phần tử cha.
Vì Sao 12 pt Bằng 16 px
Một điểm bằng 1/72 inch và một pixel CSS bằng 1/96 inch, nên 12 điểm bằng 12/72 = 1/6 inch, tức là 96 ÷ 6 = 16 pixel. Word trên Windows và Google Docs cũng coi một inch bằng 96 pixel trên màn hình, nên ở mức phóng to 100%, chữ 12 điểm trông có cùng kích thước với chữ 16 px trong trình duyệt — và 16 px là cỡ chữ trình duyệt dùng cho văn bản mà không stylesheet nào đặt cỡ.
Một pixel CSS không nhất thiết là một chấm trên màn hình của bạn. Trên màn hình mật độ điểm ảnh cao, một pixel CSS bao phủ nhiều điểm ảnh vật lý, và trình duyệt co giãn mọi đơn vị cùng lúc, nên các tỷ lệ trên luôn đúng. LaTeX là ngoại lệ phổ biến duy nhất so với inch 72 điểm: pt của nó là điểm của nhà in, 72,27 điểm trên mỗi inch, nên 12pt trong LaTeX nhỏ hơn 12 pt trong Word hoặc CSS khoảng 0,4%. bp của TeX (“big point”) là điểm 72 trên mỗi inch mà công cụ này dùng.
Cỡ Chữ Cho Bài Viết Học Thuật
Các hướng dẫn trình bày đặt cỡ chữ theo điểm, nên cỡ chữ của bài viết không bao giờ cần chuyển đổi — nhưng nên biết mỗi hướng dẫn thực sự yêu cầu gì:
- APA 7 nêu các cặp phông chữ và cỡ chữ thay vì một cỡ duy nhất: Calibri 11 pt, Arial 11 pt, Lucida Sans Unicode 10 pt, Times New Roman 12 pt, Georgia 11 pt hoặc Computer Modern 10 pt.
- MLA 9 yêu cầu một kiểu chữ dễ đọc, có chữ nghiêng tương phản với chữ thường, cỡ từ 11 đến 13 pt trừ khi giảng viên của bạn có yêu cầu khác.
- Turabian (kiểu Chicago dành cho sinh viên): tờ hướng dẫn chính thức gợi ý Times New Roman 12 pt hoặc Calibri, hoặc Arial 11 pt.
Các phông chữ trông khác nhau ở cùng cỡ điểm — Arial đọc có vẻ lớn hơn Times New Roman — đó là lý do APA ghép mỗi phông chữ với cỡ riêng của nó. Về lề, khoảng cách, tiêu đề đầu trang và phần còn lại của trang, xem Cách định dạng bài viết học thuật theo APA, MLA và Chicago.
Câu Hỏi Thường Gặp
- 12 pt bằng bao nhiêu pixel?
- 16 pixel. CSS định nghĩa một inch bằng 96 pixel và bằng 72 điểm, nên một điểm bằng 4/3 pixel và 12 × 4/3 = 16. Cùng quy tắc đó cho 10 pt là 13,33 px, 11 pt là 14,67 px và 14 pt là 18,67 px.
- Làm thế nào để chuyển px sang rem?
- Chia cho cỡ chữ gốc. Với mặc định 16 px, 24 px bằng 24 ÷ 16 = 1,5rem và 14 px bằng 0,875rem. Nếu stylesheet của bạn đặt phần tử
htmlcó cỡ khác, hãy nhập cỡ đó làm cỡ chữ gốc và công cụ sẽ dùng giá trị đó. - Khác nhau giữa em và rem là gì?
- Cả hai đều tương đối với một cỡ chữ, nhưng khác nhau về cỡ nào. rem luôn tính theo phần tử gốc (
html), nên 1,5rem có cùng kích thước ở mọi nơi trên trang. em tính theo phần tử cha, nên 1,5em bên trong một khung có chữ đã là 1,5em sẽ bằng 2,25 lần cỡ gốc — em cộng dồn, còn rem thì không. - 1em có luôn bằng 16px không?
- Chỉ khi ở mặc định. 1em bằng cỡ chữ của phần tử cha và 1rem bằng cỡ chữ gốc, và trình duyệt đều bắt đầu ở 16 px. Người đọc tăng cỡ chữ mặc định trong cài đặt trình duyệt sẽ thay đổi điểm xuất phát đó, nên chữ đặt bằng rem hoặc em theo lựa chọn của họ, còn chữ đặt bằng px thì không.
- 12 pt bằng bao nhiêu milimét?
- 12 điểm bằng 1/6 inch, hay khoảng 4,23 mm. Đó là kích thước của hộp em của phông chữ — không gian thiết kế mà mỗi chữ cái được vẽ trong đó — chứ không phải chiều cao của chữ in hoa, vốn trong các phông chữ văn bản thông dụng xấp xỉ hai phần ba hộp đó.
- Vì sao cùng một cỡ điểm mà một số phông chữ trông lớn hơn?
- Cỡ điểm quy định hộp em, không phải các chữ nhìn thấy. Mỗi phông chữ vẽ chữ với tỷ lệ khác nhau bên trong hộp đó — Arial có chữ thường cao hơn Times New Roman — nên Arial 12 pt trông lớn hơn. Đó là lý do APA 7 ghép Arial 11 pt với Times New Roman 12 pt thay vì đặt một cỡ cho mọi phông chữ.