Font Size Converter

Every conversion here hangs off one anchor in the CSS specification: one inch is defined as exactly 96 pixels. The rest follows arithmetically. A point is one seventy-second of an inch, so one pixel equals 0.75pt and 16px equals 12pt. A centimetre is 96 divided by 2.54, or about 37.795px. The relative units work differently. One rem is the computed font size of the root html element, which defaults to 16px in Chrome, Firefox, Safari and Edge, so 24px is 1.5rem at default settings. One em is the font size of the parent, which means ems compound: a list nested three levels deep at 0.9em per level renders at roughly 0.73 of the original size, the runaway shrinkage that rem was introduced to avoid. The key limitation is that the CSS pixel is a reference unit, not a hardware pixel. It is defined against a visual angle of about 0.0213 degrees, so on a device with a 3x pixel ratio one CSS pixel covers nine physical pixels. The same reasoning means the physical units are honest only in print stylesheets; asking a screen for 1cm gives 37.795 CSS pixels, not a centimetre you could measure. For practical typography, 16px remains the standard body size, roughly 12px is the floor for legibility on screen, and captions sit at 12 to 14px. Sizing in rem matters for accessibility because absolute pixel values ignore a user's browser font size preference entirely.

The point in this converter carries several centuries of drift. Pierre Simon Fournier proposed a typographic point in France in the 1730s, Francois-Ambroise Didot revised it in the 1780s on a different base inch, and Continental Europe and Britain consequently used incompatible points for a century. American type founders settled the Anglo-American point in 1886 at approximately 1/72.27 of an inch. The clean value of exactly 1/72 inch used by CSS arrived with Adobe PostScript in 1984 and the desktop publishing systems built on it, which also established 72 dots per inch as an early screen convention. The web units were defined in CSS1, published as a W3C Recommendation in December 1996, which specified px, em, ex, pt, pc, in, cm and mm. In that first version px meant a device pixel, which broke down as screen densities diverged, so CSS2 in 1998 recast it as a reference pixel tied to viewing angle and distance rather than to hardware. Later work in CSS Values and Units Level 3 pinned the anchor at 1in equals 96px. The rem unit came from the same module and shipped in Firefox 3.6 and Safari 5 around 2010, then Internet Explorer 9 in 2011, which is when rem-based sizing became practical in production. Advocacy for relative sizing on accessibility grounds predates that support, notably Richard Rutter's 2007 article on sizing text in CSS.