Bảng tra px ↔ rem nhanh | 16px = 1rem, Figma → CSS trong 30 giây
Cần số ngay thì tra bảng — đừng đọc lại bài lý thuyết. Root mặc định 16px → 1rem. Công thức: rem = px ÷ 16, px = rem × 16. Mốc hay dùng: 8→0.5, 12→0.75, 16→1, 24→1.5, 32→2. Số lẻ hoặc base khác 16 → PX ↔ REM (chạy trên trình duyệt, chỉnh base 8–32). Muốn hiểu sâu vì sao 62.5% / a11y / border: xem px vs rem trong CSS.
Designer gửi Figma: padding 24, font 18, gap 12. Bạn đang giữa PR, không muốn mở calculator Windows hay chia nhẩm 18/16 = 1.125. Đó là lúc cần bảng tra px rem — một trang bookmark, không phải essay về root font.
Bài css-units-px-rem đã giải thích convention 16 vs 62.5% và khi nào giữ px cho border. Bài này chỉ làm một việc: đưa số. Bảng chuẩn base 16, map Tailwind, workflow Figma → CSS, và máy tính khi số không nằm trong bảng.
Bài viết này giúp bạn
- Tra px → rem (và ngược) ở base 16 trong vài giây
- Nhớ công thức + 10 mốc hay gặp trên Figma
- Map nhanh sang Tailwind spacing / text
- Biết khi nào bảng đủ, khi nào mở tool PX ↔ REM
- Tránh dán bảng 16 vào repo đang dùng base khác
Công thức chỉ cần nhớ
rem = px ÷ base
px = rem × baseVới hầu hết site hiện đại (không đụng html { font-size: 62.5% }):
base = 16
1rem = 16pxVí dụ nhanh:
| px | rem (÷16) |
|---|---|
| 8 | 0.5 |
| 14 | 0.875 |
| 18 | 1.125 |
| 24 | 1.5 |
| 40 | 2.5 |
Nếu reviewer hỏi “sao 1.125?”, trả lời: 18 ÷ 16. Không cần giải thích lại toàn bộ a11y trong mỗi PR.
Bảng tra nhanh (bookmark) — base 16
| px | rem | Gợi ý dùng |
|---|---|---|
| 4 | 0.25 | Hairline gap, icon nudge |
| 8 | 0.5 | Padding nhỏ, gap chặt |
| 12 | 0.75 | Caption / meta spacing |
| 14 | 0.875 | Secondary text |
| 16 | 1 | Body mặc định |
| 18 | 1.125 | Lead / intro |
| 20 | 1.25 | H4 / text-xl |
| 24 | 1.5 | H3 / padding section nhỏ |
| 32 | 2 | H2 / card padding |
| 40 | 2.5 | Hero sub / section gap |
| 48 | 3 | H1 mobile / block lớn |
| 64 | 4 | Hero desktop / section |
In bảng này cạnh monitor hoặc pin tab. 80% ticket Figma chỉ cần các dòng trên.
Chiều ngược: rem → px
| rem | px (×16) |
|---|---|
| 0.25 | 4 |
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
Khi QA báo “chữ to hơn mock 4px”, đổi rem → px để đối chiếu với Figma Inspect.
Map Tailwind (scale mặc định)
Tailwind mặc định: 1 = 0.25rem = 4px (base 16).
| Figma (px) | rem | Class gợi ý |
|---|---|---|
| 4 | 0.25 | p-1 / gap-1 |
| 8 | 0.5 | p-2 / gap-2 |
| 12 | 0.75 | p-3 / gap-3 |
| 16 | 1 | p-4 / text-base |
| 20 | 1.25 | p-5 / text-xl |
| 24 | 1.5 | p-6 / text-2xl |
| 32 | 2 | p-8 / text-3xl |
| 48 | 3 | p-12 |
Số không khớp scale (ví dụ 18px, 22px) → đừng ép class gần đúng rồi “nhìn cũng được”. Hoặc text-[1.125rem], hoặc token custom — tính bằng tool trước khi viết arbitrary value.
Thử trên máy tính (base tùy chỉnh)
🔄 Chuyển đổi px và rem ngay tại đây
PX ↔ REM trên Kawa cho phép:
- Nhập px → xem rem (3 chữ số thập phân)
- Nhập rem → xem px
- Đổi base bằng slider (8–32), mặc định 16
- Reset về 16 khi thử base tạm
Không cần đăng ký, xử lý trên trình duyệt — phù hợp khi đang pair trên máy khách hoặc lab trường (Chrome only).
Khi nào mở tool thay vì bảng:
- Số lẻ: 13, 17, 19, 28, 36…
- Base project ≠ 16 (repo khách set
html { font-size: 10px }hoặc 62.5%) - Cần đối chiếu nhanh “1.875rem = ? px” lúc review
Khi nào bảng đủ: spacing 8-multiple và font 14/16/20/24/32.
Workflow Figma → CSS (5 phút)
- Mở Inspect trên frame — ghi danh sách px (font, padding, gap, radius riêng).
- Chốt base trong README /
globals.css. Nếu chưa chắc, DevTools → chọn<html>→ Computedfont-size. - Tra bảng các mốc chẵn; số lẻ → tool.
- Ghi token một lần (
--space-md: 1.5rem) thay vì copy24pxrải rác. - Smoke test: Settings trình duyệt → font size lớn hơn mặc định. Layout rem sẽ scale; chỗ nào “kẹt” thường là px cứng trên font.
Case: freelance nhận file Figma chỉ ghi px
Khách (thường agency / startup VN) gửi frame không có design token. Bạn liệt kê:
H1 40 → 2.5rem
Body 16 → 1rem
Card pad 24 → 1.5rem
Gap 12 → 0.75rem
Border 1 → 1px (giữ px)Gửi lại khách bảng trên trong PR description — reviewer không phải hỏi “1.5rem là bao nhiêu nữa?”.
Case: số lệch 2px sau khi merge
Designer: “padding phải 22px”. Dev viết 1.375rem (22÷16). QA đo được 21.99… do làm tròn subpixel. Thực tế: thống nhất làm tròn 3 chữ số như tool (1.375), hoặc kéo design về mốc 20/24 trong scale. Đừng “sửa mắt” bằng 21px cứng trên font.
Quy tắc chọn đơn vị (nhắc ngắn — không đi sâu 62.5%)
| Thành phần | Ưu tiên | Ghi chú |
|---|---|---|
| Font size | rem | Zoom chữ user |
| Padding / margin / gap | rem | Scale cùng typography |
| Border / outline mỏng | px | 1px, 2px ổn định |
| box-shadow blur nhỏ | px hoặc rem | Team convention |
| Media query breakpoint | px (thường) | Nhiều codebase giữ px |
Chi tiết root 16 vs trick 62.5%, rủi ro mix Tailwind: px vs rem trong CSS.
Checklist trước khi merge token
- Base root đã xác nhận (Computed trên
<html>) - Bảng / tool dùng đúng base đó
- Border 1–2px vẫn px (trừ khi design system bắt rem)
- Arbitrary Tailwind có
[…]khớp số đã tính, không đoán - Không copy bảng base 16 vào file đang
font-size: 62.5%
Câu hỏi thường gặp (tóm tắt)
Chia nhẩm hay dùng tool? Mốc bảng → nhẩm. Còn lại → tool, đỡ sai 18/16.
Có cần thuộc 62.5% không? Không để tra bảng hàng ngày. Chỉ cần biết: nếu thấy 1rem ≈ 10px trong DevTools thì đổi base tool sang 10, đừng dùng cột “rem @16” của bài này.
em khác rem chỗ nào? em theo parent — lồng nhau dễ nhân đôi. Bảng này và tool Kawa tính rem (root).
Liên kết liên quan
- Công cụ PX ↔ REM — đổi hai chiều, chỉnh base
- px vs rem trong CSS — convention, 62.5%, a11y
- Fluid typography clamp — khi rem cố định chưa đủ
- Danh sách công cụ
Bookmark lý do: một trang đủ bảng 4→64px, map Tailwind, và link máy tính khi số lẻ / base lệch — không phải đọc lại lý thuyết mỗi lần Figma gửi 18px.