Đổi điểm (pt) sang pixel (px)

Nội dung được kiểm tra lần cuối:

12 pt bằng 16 px. Một inch chứa 72 điểm và 96 pixel CSS, nên bạn chỉ cần nhân số điểm với 4/3. Văn bản cỡ chữ 13 trong tài liệu bằng 17,33 pixel trên trang web, còn tiêu đề 18 điểm bằng 24 pixel. Gõ số điểm vào ô đầu tiên, số pixel hiện ngay bên cạnh.

pt
px
sang

Điểm (pt) là gì và pixel (px) là gì?

Điểm là đơn vị của ngành in dùng để đo cỡ chữ. Các phần mềm ngày nay tính theo điểm DTP, bằng 1/72 inch hay khoảng 0,3528 mm[1], và CSS cũng định nghĩa như vậy[2]. Nghề sắp chữ chì ở châu Âu lục địa lại dùng điểm Didot, khoảng 0,376 mm[1].

Pixel, hay điểm ảnh, là một điểm vật lý trong một hình ảnh raster và là đơn vị cơ bản nhất tạo nên một bức ảnh kỹ thuật số[3]. Trong CSS, pixel còn là một đơn vị độ dài: 1/96 inch[2]. Vì một inch chứa 72 điểm và 96 pixel, cùng một độ dài viết theo pixel sẽ cho con số lớn gấp 4/3 so với viết theo điểm.

Cửa sổ phần mềm quản lý phông với ô cỡ chữ ghi 38 pt và các mẫu chữ cái
Phần mềm quản lý phông hiển thị mẫu chữ ở cỡ 38 điểm, con số ghi trong ô cỡ chữ phía trên cửa sổ. Theo cách tính của CSS, cỡ đó bằng 50,67 pixel, vì một điểm bằng 4/3 pixel. Ảnh: Markus Spiske, Unsplash.

12 điểm bằng bao nhiêu pixel?

12 điểm bằng 16 pixel. Muốn ra số pixel, bạn nhân số điểm với 96 rồi chia cho 72, tức là nhân với 4/3. 18 điểm bằng 24 pixel, còn 72 điểm, đúng một inch, bằng 96 pixel. Trên giấy, 12 điểm chiếm 4,23 mm.

Tỷ lệ này đến từ chuẩn CSS, trong đó một inch bằng 96 pixel và một điểm bằng 1/72 inch[2]. Vì vậy chữ viết bằng font-size: 12pt và chữ viết bằng font-size: 16px có cùng cỡ trên mọi trình duyệt. 16 pixel cũng là cỡ chữ mặc định thường gặp của trình duyệt[4]. Khi mang cỡ chữ từ tài liệu Word sang trang web, bạn đổi điểm sang pixel trước.

Khi ghi kết quả vào tệp CSS, hãy để ý dấu thập phân. Tiếng Việt ngăn phần thập phân bằng dấu phẩy, nên 11 điểm bằng 14,67 pixel, nhưng CSS chỉ nhận dấu chấm[2]: trong tệp bạn phải viết 14.67px. Vì thế nút “Sao chép kết quả” chép con số với dấu chấm và không kèm đơn vị.

Đổi điểm sang pixel thế nào?

Công thức là px = pt × 96 ÷ 72, tức là nhân với 4/3. 9 điểm bằng 12 pixel, 24 điểm bằng 32 pixel và 36 điểm bằng 48 pixel. Số điểm chia hết cho 3 cho pixel chẵn, các số còn lại cho phần thập phân: 10 điểm bằng 13,33 pixel và 11 điểm bằng 14,67 pixel.

Công thức đó cũng đúng với độ dày nét: 0,75 điểm bằng đúng một pixel và 1,5 điểm bằng hai pixel. Muốn tính ngược, bạn dùng công cụ đổi px sang pt, ở đó pixel được nhân với 0,75. Pica, bằng 12 điểm, được đổi bằng công cụ đổi pica sang px, còn rem, vốn theo cỡ chữ của trình duyệt, bằng công cụ đổi rem sang px.

Con số 96 đến từ Windows. Microsoft tính rằng màn hình đặt xa mắt hơn tờ giấy cầm trên tay khoảng một phần ba, nên quyết định báo độ phân giải của những màn hình quanh mức 72 PPI thành 96 PPI[5]. Chuẩn CSS cũng định nghĩa pixel tham chiếu là pixel của màn hình 96 dpi nhìn từ khoảng cách một cánh tay duỗi thẳng[2].

Các con chữ kim loại xếp sát nhau thành hàng, chụp cận cảnh
Các con chữ kim loại xếp sát nhau thành hàng. Với kiểu sắp chữ này, cỡ chữ chính là kích thước của thân kim loại đúc chữ, và được ghi bằng điểm[1]. Thân con chữ 10 điểm cao 3,53 mm, còn trên màn hình cỡ đó bằng 13,33 pixel. Ảnh: Alex Zaj, Unsplash.

Mỗi cỡ chữ bằng bao nhiêu pixel?

Bảng này có 30 cỡ từ 6 đến 96 điểm, tính theo pixel ở 96 DPI và theo milimét trên giấy. Các dòng được đánh dấu là 12 điểm, 18 điểm — mức mà hướng dẫn WCAG bắt đầu coi là chữ cỡ lớn (hoặc 14 điểm nếu chữ đậm)[6] — và 72 điểm, đúng một inch.
Cỡ chữPixel (96 DPI)Milimét
6 pt8 px2,117 mm
7 pt9,33 px2,469 mm
8 pt10,67 px2,822 mm
9 pt12 px3,175 mm
10 pt13,33 px3,528 mm
10,5 pt14 px3,704 mm
11 pt14,67 px3,881 mm
12 pt16 px4,233 mm
13 pt17,33 px4,586 mm
14 pt18,67 px4,939 mm
15 pt20 px5,292 mm
16 pt21,33 px5,644 mm
18 pt24 px6,350 mm
20 pt26,67 px7,056 mm
21 pt28 px7,408 mm
22 pt29,33 px7,761 mm
24 pt32 px8,467 mm
26 pt34,67 px9,172 mm
28 pt37,33 px9,878 mm
30 pt40 px10,583 mm
32 pt42,67 px11,289 mm
34 pt45,33 px11,994 mm
36 pt48 px12,700 mm
40 pt53,33 px14,111 mm
44 pt58,67 px15,522 mm
48 pt64 px16,933 mm
54 pt72 px19,050 mm
60 pt80 px21,167 mm
72 pt96 px25,400 mm
96 pt128 px33,867 mm
Cột pixel được tính đúng như trong công cụ và hiển thị tới hai chữ số thập phân. Milimét tính theo 1 điểm = 25,4/72 mm.

Độ dày nét bằng bao nhiêu pixel?

Trong phần mềm dàn trang, độ dày của nét và khung cũng ghi bằng điểm. Khoảng giá trị hẹp hơn nhiều so với cỡ chữ, nên chúng tôi để riêng một bảng. Nét 0,75 điểm bằng đúng một pixel, tức bằng border: 1px trong tệp CSS.
Độ dày nétPixel (96 DPI)Milimét
0,25 pt0,33 px0,088 mm
0,5 pt0,67 px0,176 mm
0,75 pt1 px0,265 mm
1 pt1,33 px0,353 mm
1,5 pt2 px0,529 mm
2 pt2,67 px0,706 mm
3 pt4 px1,058 mm
4 pt5,33 px1,411 mm
5 pt6,67 px1,764 mm
6 pt8 px2,117 mm
8 pt10,67 px2,822 mm
10 pt13,33 px3,528 mm
12 pt16 px4,233 mm
Trên màn hình, nét từ 0,5 điểm trở xuống không đủ một pixel. Cột pixel hiển thị tới hai chữ số thập phân.

Điểm Didot có giống điểm trong Word không?

Không. Điểm Didot của nghề sắp chữ chì ở châu Âu lục địa bằng khoảng 0,376 mm, còn điểm DTP trong Word và trong phần lớn phần mềm bằng 0,3528 mm[1]. Ở cỡ 12 điểm, chênh lệch lên tới 0,28 mm, tức khoảng một pixel trên màn hình. TeX và LaTeX viết “pt” cho 1/72,27 inch và viết “bp” cho 1/72 inch[1].
Điểm1 điểm12 điểm12 điểm theo pixelBạn gặp ở đâu
Điểm DTP (PostScript)0,3528 mm4,233 mm16 pxWord, InDesign, PDF, CSS; điểm mà công cụ này dùng
Điểm Didot0,3760 mm4,512 mm17,05 pxnghề sắp chữ chì ở châu Âu lục địa
Điểm TeX0,3515 mm4,218 mm15,94 px“pt” trong TeX và LaTeX
Cột pixel cho thấy mỗi độ dài quy ra pixel ở 96 DPI. Công cụ này tính theo điểm ở dòng đầu tiên.

Ô điểm của công cụ này nhận những cách viết nào?

Ô điểm nhận và tính mọi cách viết trong bảng này, nên bạn không phải sửa giá trị trước khi dán. Giá trị chép từ Word hay từ tệp CSS gõ kèm đơn vị được, kèm dấu phẩy hay dấu chấm thập phân cũng được. Giá trị ghi bằng đơn vị khác, chẳng hạn pixel, sẽ được đổi sang điểm trước và bên dưới ô hiện một dòng như “Giá trị đã dán 16px tương ứng với 12 pt trong ô này.”. Cột giữa là kết quả do chính công cụ tính.
Điều bạn gõ hoặc dánKết quả của công cụÔ đọc cách viết này thế nào
1216 pxNếu bạn chỉ gõ con số, ô sẽ đọc nó theo điểm.
10,514 pxNhư cách viết số trong tiếng Việt, dấu phẩy ngăn phần thập phân; ô tính 10,5 điểm.
10.514 pxDấu chấm theo sau một hoặc hai chữ số cũng được coi là dấu thập phân.
1 0001333,33 pxKhoảng trắng giữa các nhóm hàng nghìn được bỏ qua, nên ô tính 1 000 điểm. Nếu bạn gõ số này với dấu chấm thay cho khoảng trắng, ô sẽ đọc là 1 vì một dấu chấm đơn lẻ luôn là dấu thập phân, và bên dưới ô sẽ hiện một dòng nhắc.
12 điểm16 pxBạn có thể gõ tên đơn vị kèm con số; ô vẫn tính 12 điểm.
12pt16 pxKý hiệu chép từ Word hay từ tệp CSS chính là đơn vị của ô này, nên giá trị không đổi.
font-size: 16px;16 pxDòng lấy từ tệp CSS được ghi bằng pixel: giá trị được đổi sang điểm trước, rồi số 12 vào ô. Tên thuộc tính và dấu chấm phẩy được bỏ qua.
16 điểm ảnh16 pxGiá trị ghi bằng pixel kèm tên đơn vị tiếng Việt cũng đọc được: số vào ô là 12.
cỡ chữ 1317,33 pxChữ ở đầu dòng được bỏ qua, ô tính 13 điểm.
3 mm11,34 pxMilimét được đổi sang điểm trước: số vào ô là 8,503937.
3/41 pxPhân số cũng dùng được: 0,75 điểm bằng đúng một pixel.
Trước khi viết bảng này, chúng tôi đã thử từng cách viết trong ô thật. Những cách viết mà ô pixel nhận nằm trong bảng trên trang công cụ đổi px sang pt.

Đổi đơn vị giữa điểm và pixel trong các phần mềm thế nào?

  1. Adobe InDesign

    Trên Windows, bạn mở Edit › Preferences › Units & Increments, trên macOS mở InDesign › Preferences › Units & Increments, rồi ở Ruler Units chọn Pixels cho Horizontal và Vertical[7] (tên lấy từ giao diện tiếng Anh, vì phần mềm không có tiếng Việt). Dù chọn đơn vị nào, trong mọi ô bạn vẫn gõ được giá trị kèm đơn vị, chẳng hạn “6pt”, “6ap” hay “5px”, và InDesign đổi sang đơn vị của tài liệu[7].

  2. Adobe Photoshop

    Trên Windows, bạn chọn Edit › Preferences › Units & Rulers, trên macOS chọn Photoshop › Preferences › Units & Rulers; nhấp đúp vào thước cũng mở đúng cửa sổ đó[8] (tên lấy từ giao diện tiếng Anh). Nếu ở Point/Pica Size bạn chọn “PostScript (72 points per inch)”, điểm của Photoshop trùng với điểm của công cụ này; lựa chọn “Traditional” tính 72,27 điểm trên một inch[8].

  3. Microsoft Word

    Word ghi cỡ chữ bằng điểm, trong hộp “Cỡ Phông” trên tab “Trang đầu”, và nhận cỡ từ 1 đến 1638 theo bội số của 0,5, chẳng hạn 10,5[9]. Muốn cỡ bằng chữ 16 pixel trên trang web, bạn gõ 12; muốn bằng 14 pixel, gõ 10,5. Các giá trị khác được đổi bằng công cụ đổi px sang pt.

Chuyển đổi đơn vị khác sang Pixel

Đổi rem sang pxĐổi cm sang pxĐổi mm sang pxĐổi inch sang pxĐổi mét sang px

Nguồn tham khảo

  1. Point (typography) — Wikipedia (tiếng Anh)
  2. CSS Values and Units Module Level 4 — W3C (tiếng Anh)
  3. Pixel — Wikipedia
  4. <length> - CSS — MDN Web Docs (tiếng Anh)
  5. Where does 96 DPI come from in Windows? — Microsoft Learn (tiếng Anh)
  6. Web Content Accessibility Guidelines (WCAG) 2.2 — W3C (tiếng Anh)
  7. Rulers and measurement units — Adobe InDesign Help (tiếng Anh)
  8. Rulers — Adobe Photoshop Help (tiếng Anh)
  9. Thay đổi cỡ phông — Hỗ trợ của Microsoft

Mọi giá trị trong bảng đều được chúng tôi tính từ định nghĩa của các đơn vị và kiểm tra lại bằng phép tính trước khi đăng. Dữ liệu lịch sử và tên các đơn vị địa phương dựa trên các nguồn nêu ở trên.

Nội dung được kiểm tra lần cuối: · biên soạn và kiểm tra bởi đội ngũ Arteon

Câu hỏi thường gặp về việc đổi điểm sang pixel

Cỡ chữ 13 pt bằng bao nhiêu px?

17,33 pixel, vì 13 × 4/3 = 17,333…. Một số trang ghi 17,29 pixel, con số đó sai. Trong tệp CSS bạn viết 17.33px.

Cỡ chữ 14 pt bằng bao nhiêu px?

Khoảng 18,67 pixel, vì 14 × 4/3 = 18,666…. Trong tệp CSS bạn viết 18.67px.

1 điểm bằng bao nhiêu milimét?

Điểm trong Word và trong CSS bằng 1/72 inch, tức khoảng 0,3528 mm. Điểm Didot bằng khoảng 0,376 mm[1]. Vậy 12 điểm trong Word bằng 4,23 mm, còn 12 điểm Didot bằng 4,51 mm. Muốn đổi milimét sang pixel ở một độ phân giải nhất định, bạn dùng công cụ đổi mm sang px.

12 px và 12 pt có cùng cỡ không?

Không. 12 điểm bằng 16 pixel, còn 12 pixel bằng 9 điểm. Điểm dùng trong Word và InDesign, pixel dùng trong tệp CSS, nên cùng một con số lại là cỡ khác nhau.

10 điểm bằng bao nhiêu pixel?

13,33 pixel. Vì 10 không chia hết cho 3 nên kết quả có phần thập phân; CSS cũng nhận giá trị thập phân.

72 điểm bằng bao nhiêu pixel?

Đúng 96 pixel, tức một inch hay 25,4 mm. Chuẩn CSS cũng đặt một inch bằng 96 pixel và một điểm bằng 1/72 inch[2].

Điểm trong LaTeX có giống điểm trong công cụ này không?

Không. Trong TeX và LaTeX, “pt” là 1/72,27 inch, còn điểm 1/72 inch ở đó viết là “bp”[1]. Chênh lệch khoảng 0,4%, tức 0,016 mm ở cỡ 12 điểm. Công cụ này tính theo điểm DTP, tương ứng với “bp”.

Nét 0,5 điểm bằng bao nhiêu pixel?

Khoảng 0,67 pixel. Nét 0,75 điểm bằng đúng một pixel và nét 1,5 điểm bằng hai pixel.

Ảnh chụp màn hình công cụ miễn phí của Arteon: Đổi điểm (pt) sang pixel (px)

Giúp chúng tôi hoàn thiện công cụ này

Bạn tìm thấy giá trị mà phần mềm của bạn cho kết quả khác, hay có ý tưởng? Hãy viết cho chúng tôi.