Công cụ chuyển đổi PT sang PX

Công cụ chuyển đổi PT sang PX chuyển point thành pixel — và chuyển pixel ngược lại thành point — cho cả công việc trên màn hình và bản in. Hầu hết các công cụ chuyển đổi chỉ cho một con số dựa trên tỷ lệ CSS cố định 1pt = 1.3333px. Kết quả đó đúng trong trình duyệt nhưng sai ở gần như mọi nơi khác, vì point là một đơn vị vật lý và số pixel trong đó phụ thuộc vào độ phân giải đầu ra. Công cụ này cung cấp cả hai: giá trị CSS mà trình duyệt thực sự hiển thị và giá trị pixel thiết bị ở 72, 150, 300, 600 hoặc DPI tùy chỉnh, cùng kích thước vật lý thực theo milimét và inch trên thước thật.

Công thức PT sang PX

Một point được định nghĩa chính xác bằng một phần bảy mươi hai inch. Một inch chứa số pixel đúng bằng độ phân giải đầu ra. Kết hợp hai sự thật đó, ta có công thức chuyển đổi:

Trên web, độ phân giải không phải là biến số. Đặc tả CSS quy định 1in = 96px theo định nghĩa, nên trình duyệt luôn dùng 96 và công thức trở thành một hằng số:

Đó là lý do 12pt bằng 16px trong mọi trình duyệt trên mọi thiết bị, dù đó là màn hình laptop 1× hay màn hình điện thoại 3×. Pixel CSS là đơn vị tham chiếu, không phải pixel phần cứng.

Một inch, ba tên gọi

Cách dễ nhất để ghi nhớ các đơn vị là nhớ rằng chúng đều mô tả cùng một khoảng cách vật lý. Mỗi thanh bên dưới rộng chính xác một inch:

Bảng chuyển đổi PT sang PX

Cột web là cột bạn cần cho CSS. Cột 300 DPI là cột bạn cần khi xuất PDF thành hình ảnh raster, dàn trang tệp in hoặc định cỡ chữ trong bitmap sẽ được in.

Vì sao cùng một cỡ point lại cho số pixel khác nhau

Đây là điều duy nhất khiến mọi người dễ nhầm lẫn, vì vậy cần nói rõ. Kích thước vật lý không bao giờ thay đổi: 12pt luôn bằng một phần sáu inch. Điều thay đổi là mức độ chi tiết khi lấy mẫu inch đó.

• 72 DPI — độ phân giải màn hình Macintosh lịch sử, được chọn chính xác để 1pt = 1px. Vẫn là mặc định trong một số quy trình hình ảnh cũ, đó là lý do văn bản 12pt đôi khi chỉ xuất thành 12 pixel đáng thất vọng.
• 96 DPI — mặc định Windows và độ phân giải tham chiếu mà CSS được định nghĩa dựa trên. Đây là kết quả trên web và là giá trị trình duyệt của bạn sử dụng.
• 150 DPI — chất lượng in nháp hoặc công việc khổ lớn dành cho việc đọc từ xa.
• 300 DPI — tiêu chuẩn in thương mại. Chú thích 12pt trong bản xuất 300 DPI cần chiều cao 50 pixel, không phải 16.
• 600 DPI — nét vẽ mảnh, công việc in cao cấp và đầu ra laser khi các đường nét mảnh rất quan trọng.

Nếu bạn từng xuất tác phẩm ở "đúng kích thước" nhưng phát hiện chữ bị mềm và vỡ pixel, tỷ lệ này gần như luôn là nguyên nhân: bố cục được đo theo point nhưng ảnh raster lại được tạo ở 72 hoặc 96 DPI thay vì 300.

Cỡ point thực sự đo điều gì

Một phông chữ 12pt không phải là một chữ cái cao 12 point. Cỡ point mô tả ô em — lưới thiết kế vô hình mà kiểu chữ được vẽ trên đó. Việc chữ cái chiếm bao nhiêu phần của ô đó hoàn toàn do nhà thiết kế kiểu chữ quyết định, vì vậy hai phông chữ cùng cỡ point có thể trông rất khác nhau về tỷ lệ.

Bạn nên dùng pt hay px trong CSS?

Đối với kiểu hiển thị trên màn hình, hãy dùng px hoặc rem. Point là một đơn vị tuyệt đối trong CSS, chính xác như px, nên chúng có cùng nhược điểm về khả năng tiếp cận: văn bản đặt theo pt bỏ qua tùy chọn cỡ chữ trình duyệt của khách truy cập. Việc dùng pt cũng dễ gây nhầm lẫn, vì đồng nghiệp đọc stylesheet có thể nghĩ đó là point vật lý trên thiết bị đầu ra, trong khi không phải vậy.

Nơi pt thực sự phù hợp là stylesheet in, vì đầu ra thực sự được đo theo inch:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

Trình duyệt quy đổi các point đó theo kích thước giấy thực khi tạo lệnh in, vì vậy nội dung 11pt thực sự được in ra ở cỡ 11pt trên trang — cùng kích thước mà một trình xử lý văn bản tạo ra.

Chuyển tài liệu Word hoặc InDesign sang web

1. Lấy các cỡ point trực tiếp từ bảng kiểu của tài liệu — thường là nội dung 11pt, tiêu đề phụ 16pt, tiêu đề 24pt.
2. Dán tất cả vào trường giá trị cùng lúc, ngăn cách bằng dấu phẩy, để độ phân giải ở 96.
3. Đọc cột pixel CSS. 11pt thành 14.67px, 16pt thành 21.33px, 24pt thành 32px.
4. Làm tròn thành thang gọn gàng trước khi triển khai. Kiểu chữ in chấp nhận phân số lẻ; thang cỡ chữ trên web dễ đọc hơn ở pixel nguyên hoặc nửa pixel, vì vậy 14.67px thường thành 15px hoặc 16px.
5. Chuyển các giá trị pixel cuối cùng sang rem nếu hệ thống thiết kế dùng đơn vị tương đối.

Các đơn vị CSS tuyệt đối liên quan

Point là một trong một nhóm nhỏ các đơn vị tuyệt đối mà CSS định nghĩa dựa trên cùng một inch 96 pixel. Biết cả nhóm sẽ giúp việc chuyển đổi trở nên đơn giản:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (một phần tư milimét) = 0.945px

Cách sử dụng công cụ chuyển đổi

1. Chọn hướng chuyển đổi: pt → px hoặc px → pt.
2. Nhập các giá trị: một số hoặc cả thang cỡ chữ được ngăn cách bằng dấu phẩy hoặc khoảng trắng (tối đa 20 giá trị mỗi lần). Các đơn vị ở cuối như 12pt được chấp nhận và bỏ qua.
3. Đặt độ phân giải đầu ra: giữ 96 DPI cho công việc CSS và web, hoặc chạm vào chip để chọn 72, 150, 300 hoặc 600 DPI.
4. Nhấn Chuyển đổi: đọc kết quả, so sánh DPI, xem trước cỡ chữ thực, thước milimét và thang tham chiếu.
5. Sao chép CSS: một nút sẽ sao chép mọi khai báo font-size, giữ giá trị point nguồn trong chú thích.

Câu hỏi thường gặp

Làm cách nào để chuyển đổi pt sang px?

Nhân giá trị point với độ phân giải đầu ra rồi chia cho 72, vì một point bằng một phần bảy mươi hai inch. Trên web, độ phân giải cố định ở 96 DPI, nên px = pt × 1.3333. Ví dụ 12pt bằng 16px.

12pt bằng bao nhiêu pixel?

Trong CSS và mọi trình duyệt, 12pt chính xác bằng 16px. Trong bản in hoặc tệp ảnh 300 DPI, cùng cỡ chữ 12pt cao 50 pixel, còn ở 600 DPI là 100 pixel, vì số pixel tăng theo độ phân giải trong khi kích thước vật lý giữ nguyên.

1pt có luôn bằng 1.3333px không?

Trong CSS, nó luôn bằng 1.3333px vì đặc tả CSS quy định chính xác một inch bằng 96 pixel. Điều này không đúng với đầu ra raster: ở 300 DPI, một point bằng 4.1667 pixel thiết bị, còn ở 72 DPI, một point chính xác bằng một pixel.

Sự khác nhau giữa pt và px là gì?

Point là một đơn vị kiểu chữ vật lý bằng một phần bảy mươi hai inch, được dùng trong in ấn, trình xử lý văn bản và xuất bản desktop. Pixel là một đơn vị hiển thị. Trong CSS, pixel cũng được gắn với tham chiếu vật lý một phần chín mươi sáu inch, đó là lý do hai đơn vị chuyển đổi theo một tỷ lệ cố định trên web nhưng không cố định trong tệp hình ảnh.

Bạn nên dùng pt hay px trong CSS?

Dùng px hoặc rem cho kiểu hiển thị trên màn hình và dành pt cho stylesheet in. Point là đơn vị vật lý tuyệt đối, vì vậy chữ đặt theo pt bỏ qua tùy chọn cỡ chữ trình duyệt của khách truy cập. Bên trong khối @media print, pt là đơn vị tự nhiên vì đầu ra thực sự được đo theo inch.

Nên dùng DPI nào cho bản in?

300 DPI là tiêu chuẩn cho in thương mại và đầu ra chất lượng ảnh, 150 DPI phù hợp cho bản nháp và công việc khổ lớn được đọc từ xa, còn 600 DPI được dùng cho nét vẽ mảnh và công việc in cao cấp. Đặt trường độ phân giải theo giá trị mà máy in hoặc hộp thoại xuất của bạn yêu cầu.

Vì sao văn bản 12pt không cao 12 point trên màn hình?

Cỡ point mô tả ô em của phông chữ, là lưới thiết kế mà các chữ cái được vẽ trên đó, chứ không phải chiều cao của từng glyph. Chiều cao chữ hoa thường khoảng 70% cỡ em và chiều cao x thường khoảng 50%, vì vậy chữ hoa 12pt chỉ cao khoảng 8.4pt.

Tỷ lệ pixel thiết bị có làm thay đổi chuyển đổi pt sang px không?

Không. Trên màn hình 2× hoặc 3×, trình duyệt vẫn báo 12pt là 16 pixel CSS rồi hiển thị 16 pixel CSS đó bằng 32 hoặc 48 pixel phần cứng. Pixel CSS là đơn vị tham chiếu, nên các con số trong stylesheet không đổi — số pixel phần cứng bổ sung chỉ làm cùng kích thước trông sắc nét hơn.

Tài nguyên bổ sung

• Đơn vị độ dài CSS - MDN
• Độ dài tuyệt đối - Giá trị CSS của W3C