px ↔ rem ↔ em ↔ pt — nhập vào ô nào, tự tính ô còn lại
Với base font-size mặc định 16px: 16px = 1rem. Công thức: rem = px ÷ base-font-size. Nếu bạn đặt html{ font-size: 10px } thì 1rem = 10px và 16px = 1.6rem.
rem (root em) = luôn tương đối với font-size của thẻ <html> — nhất quán, không bị kế thừa. em = tương đối với font-size của phần tử CHA gần nhất — có thể bị nhân nhiều lần nếu lồng nhau. Dùng rem cho font-size, em cho padding/margin theo font.
pt (point) là đơn vị in ấn: 1pt = 1/72 inch ≈ 1.333px (màn hình 96dpi). Dùng chủ yếu trong CSS @media print hoặc khi thiết kế tài liệu in. Không nên dùng pt cho web.
px là đơn vị tuyệt đối, không thay đổi khi user thay đổi cỡ chữ trình duyệt. rem là tương đối, tự co/giãn theo accessibility settings. Dùng rem cải thiện trải nghiệm cho người dùng cần chữ to hơn (người già, người khiếm thị một phần).