Convert layout and typography metrics across PX, REM, EM, %, PT, VW, VH, and Container Query units (CQW). Features live interactive font preview, fine-tuning steppers, customizable root & parent baselines, and complete Tailwind typography ramp comparison.

How It Works

  1. Type any value into the PX, REM, EM, %, or PT input fields or drag the pixel slider.
  2. Inspect the live rendered typography canvas to visualize font size and proportions.
  3. Click any row in the Tailwind Typography Ramp table to test standard framework sizes.
  4. Copy the generated CSS rule, Tailwind arbitrary class, or SCSS function in 1 click.

Frequently Asked Questions

What is the difference between REM and EM?

REM (Root EM) is always calculated relative to the root <html> font-size (typically 16px). EM is calculated relative to the font-size of its immediate parent element, which can compound nested font sizes.

How does PT (Points) convert to CSS pixels?

1 CSS pixel equals 0.75 points (1pt = 1.333px) based on 72 points per inch vs 96 CSS pixels per inch standard. This is critical when building print stylesheets or exporting PDFs.

Why are container query units (CQW/CQH) important?

Container query units (like 1cqw = 1% of container width) allow components to scale based on their parent card width rather than the entire browser viewport width.

How do I change the root baseline size?

Use the Root <html> Font setting slider to test projects using custom resets (such as 62.5% html font-size where 1rem = 10px).

Air-Gapped Client-Side Processing

FrontendYogi processes all code, text, documents, and media entirely inside your browser memory. No data is logged, uploaded, or transmitted to any remote servers.