Đổi rem sang pixel (px)

rem là đơn vị độ dài tương đối trong CSS. Giá trị của nó bằng cỡ chữ đã tính của phần tử gốc của trang, tức phần tử html[1]. Nếu cỡ chữ của html là 16 px, mỗi rem trên trang đó bằng 16 px. Khi cỡ chữ này thay đổi, mọi kích thước ghi bằng rem cũng thay đổi theo cùng lúc.

Pixel (px) trong CSS là đơn vị cố định, được tiêu chuẩn định nghĩa bằng 1/96 inch[1]. Vì vậy một inch trong CSS bằng 96 px, và công cụ đổi inch sang px mặc định dùng độ phân giải 96 điểm ảnh trên mỗi inch. Theo nghĩa chung, pixel hay điểm ảnh là đơn vị cơ bản nhất để tạo nên một bức ảnh kỹ thuật số[2]. Pixel trong CSS không đổi khi người đọc thay đổi cỡ chữ trong trình duyệt. Các phần mềm thiết kế như Figma cũng hiển thị kích thước bằng pixel, nên việc đổi rem sang pixel giúp bạn đối chiếu stylesheet với bản thiết kế.

1 rem bằng 16 px khi cỡ chữ gốc vẫn ở giá trị mặc định, và trong Chrome, Edge, Firefox giá trị đó là 16 px. Công thức chỉ có một phép nhân: px = rem × cỡ chữ gốc. Vậy 1,5 rem bằng 24 px. Còn 0,875 rem bằng 14 px, cũng là cỡ chữ text-sm của Tailwind CSS[3].

Số 16 chỉ là giá trị mặc định và có thể thay đổi từ hai phía. Phía thứ nhất là stylesheet: quy tắc html { font-size: 62.5% } làm cỡ chữ gốc thành 10 px, nên 1,5 rem thành 15 px. Phía thứ hai là chính người đọc. Khi chúng tôi chọn Lớn trong danh sách Cỡ chữ ở phần Cài đặt của Chrome, cỡ chữ của phần tử html thành 20 px, và 1 rem cũng thành 20 px.

Vì vậy công cụ có ô thứ ba cho cỡ chữ gốc. Hãy ghi vào đó cỡ chữ gốc mà trang của bạn dùng, và bạn sẽ có số pixel mà người đọc trang ấy nhìn thấy. Nếu chưa biết, hãy bắt đầu với số 16 có sẵn trong ô khi mở công cụ, vì đó là giá trị mặc định của cả ba trình duyệt.

Công thức là px = rem × font-size, trong đó font-size là cỡ chữ của phần tử html. Lấy ví dụ khoảng cách 1,25 rem. Ở cỡ chữ gốc mặc định 16 px, ta có 1,25 × 16 = 20 px. Ở cỡ chữ gốc 20 px, cùng khoảng cách đó thành 25 px.

Kỹ thuật 62,5% đặt cỡ chữ của html bằng 62,5% giá trị mặc định, nên cỡ chữ gốc thành 10 px, vì 62,5% của 16 là 10. Khi đó giá trị đọc được ngay: 2,4 rem bằng 24 px. Nếu người đọc tăng cỡ chữ trong trình duyệt lên 20 px, cỡ chữ gốc thành 12,5 px và 2,4 rem thành 30 px. Ô font-size gốc của công cụ nhận phần trăm như cách bạn ghi trong stylesheet và tính từ 16 px. Khi bạn nhập 62,5%, công cụ sẽ dùng cỡ chữ gốc 10 px.

Cùng công thức ấy dùng theo chiều ngược lại bằng phép chia, và đó là việc mà công cụ đổi px sang rem làm. Đơn vị em được tính từ cỡ chữ của phần tử cha, và cho nó có công cụ đổi em sang px với ô cho cỡ chữ của phần tử cha. Nếu kích thước được ghi bằng point (pt), đơn vị cỡ chữ trong các phần mềm soạn thảo văn bản, hãy đổi sang pixel trước bằng công cụ đổi pt sang px.

Chữ ghi bằng rem to lên khi người đọc tăng cỡ chữ trong trình duyệt, còn chữ ghi bằng pixel giữ nguyên. Điều này thuộc tiêu chí 1.4.4 Resize Text trong WCAG, bộ hướng dẫn của W3C về khả năng tiếp cận nội dung web: “Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”[5] Nghĩa là, trừ phụ đề và hình ảnh chứa chữ, văn bản có thể phóng to đến 200% mà không cần công nghệ hỗ trợ và không mất nội dung hay chức năng. Chúng tôi trích tiêu chí này bằng tiếng Anh, ngôn ngữ của bản gốc. Việc đổi sang pixel giúp đối chiếu với bản thiết kế, còn kích thước từ bản thiết kế thì bạn ghi vào stylesheet bằng rem với công cụ đổi px sang rem.