Points (pt) are a fixed unit of measurement primarily used in print design. They are defined as 1/72 of an inch, meaning that 1pt is always equal to a specific physical size, regardless of the screen or resolution. In digital design, pt can be used to define font sizes, especially when creating print-focused content, but it is not as common as other units like px, em, or rem. For example, if you set an element to 12pt in CSS, the size will always be 12 points regardless of the device or screen resolution, since it is based on the physical size rather than the screen’s pixel density.
Root em (rem) is a relative unit of measurement that scales based on the font size of the root HTML element (). By default, most browsers set this root size to 12pt, so 1rem typically equals 12pt. What makes rem powerful is its ability to create scalable and responsive layouts. When a user changes their browser’s default font size or zoom level, elements using rem automatically adjust, ensuring better accessibility and a more flexible design. This makes rem ideal for font sizes, padding, margins, and other components that need to respond to various screen sizes and user preferences.