Question 1

What is the difference between px and pt?

Accepted Answer

Pixels (px) are a digital measurement designed for screens, representing exactly 1/96th of an inch in the CSS specification. Points (pt) are a physical measurement designed for print typography, representing exactly 1/72nd of an inch. While you can mathematically convert between them (1 point equals roughly 1.333 pixels), you should never use points for digital screen design, as operating systems and browsers render them unpredictably based on hardware pixel density. Points should be strictly reserved for CSS @media print stylesheets.

Question 2

Why does my text get unexpectedly huge or tiny when using em units?

Accepted Answer

This is caused by the compounding mathematical nature of the em unit. Because an em calculates its size based on its immediate parent container, deeply nested HTML elements multiply the effect. If you have a parent div set to 1.2em, and a child p set to 1.2em, and a grandchild span set to 1.2em, the browser calculates 1.2 * 1.2 * 1.2. This exponential multiplication quickly causes text to balloon out of control or shrink to illegible sizes. To fix this, switch your typography units to rem, which always references the stable root element instead of the parent.

Question 3

Is it safe to use viewport units (vw) for all my typography?

Accepted Answer

No, using pure viewport units for typography is highly dangerous and considered an anti-pattern. Because vw units scale infinitely with the width of the screen, text will become unreadably tiny on narrow mobile phones and comically massive on ultrawide desktop monitors. Furthermore, pure vw units do not respect user accessibility settings; if a user increases their default browser font size, vw text will completely ignore the preference. You must always combine vw units with rem units using the CSS calc() or clamp() functions to ensure minimum readable sizes and accessibility compliance.

Question 4

What exactly is a "CSS Pixel" compared to a hardware pixel?

Accepted Answer

A hardware pixel is a physical, microscopic LED or OLED square built into your physical monitor or smartphone screen. A "CSS Pixel" is a virtual, mathematical unit defined by the World Wide Web Consortium. Because modern screens have incredibly high pixel densities (like Apple's Retina displays), mapping one CSS pixel to one hardware pixel would result in microscopic websites. Therefore, browsers use a Device Pixel Ratio (DPR) to map one virtual CSS pixel across multiple physical hardware pixels, ensuring that a 16px font looks roughly the same physical size on a low-resolution monitor and a high-resolution smartphone.

Question 5

Is the "62.5% font-size trick" still considered a best practice?

Accepted Answer

While the 62.5% trick (setting html { font-size: 62.5%; } to make 1rem equal 10px) was incredibly popular in the 2010s, modern accessibility experts and CSS architects generally discourage it. It forces you to explicitly override the body font size back to a readable baseline, and it frequently causes severe compatibility issues when importing third-party UI libraries that expect a standard 16px root. Today, developers are encouraged to leave the root font size alone (100%) and use CSS preprocessors or native calc() functions to handle the mathematical conversions automatically.

Question 6

How do I handle minimum font sizes for mobile devices?

Accepted Answer

When converting desktop designs to mobile, you must establish a hard floor for legibility. The industry standard minimum for body text on mobile devices is 16 pixels (1rem). Even if your mathematical scaling system suggests the text should shrink to 14px or 12px on a small screen, you must override this calculation to maintain usability. You can achieve this by using CSS media queries to reset the base font size on small screens, or by utilizing the CSS clamp() function to mathematically guarantee the font size never drops below 1rem regardless of the viewport width.

Font Size Converter

Command Palette