Typographic Unit Converter
Convert between px, rem, em, pt, and vw with a customizable base size.
Value to convert
Results
| Unit | Value |
|---|---|
| px (pixels) | 16 px |
| rem | 1 rem |
| em | 1 em |
| pt (points) | 12.003 pt |
| vw (viewport width) | 0.8333 vw |
Conversion formulas
- 1 rem = 16 px (base size)
- 1 em = 16 px (base size)
- 1 pt = 1.333 px
- 1 vw = 19.2 px (viewport: 1920px)
Reference table
Common values (base: 16px, viewport: 1920px)
| px | rem | em | pt | vw |
|---|---|---|---|---|
| 12 | 0.75 | 0.75 | 9.0023 | 0.625 |
| 14 | 0.875 | 0.875 | 10.5026 | 0.7292 |
| 16 | 1 | 1 | 12.003 | 0.8333 |
| 18 | 1.125 | 1.125 | 13.5034 | 0.9375 |
| 20 | 1.25 | 1.25 | 15.0038 | 1.0417 |
| 24 | 1.5 | 1.5 | 18.0045 | 1.25 |
| 32 | 2 | 2 | 24.006 | 1.6667 |
| 48 | 3 | 3 | 36.009 | 2.5 |
| 64 | 4 | 4 | 48.012 | 3.3333 |
Typographic unit converter: px, rem, em, pt, vw
Why convert between CSS units?
Modern browsers support over 15 CSS length units, but the most common in web typography are px, rem, em, pt, and vw. Converting between them manually requires knowing the base size (16 px by default) and the viewport width. This tool performs those calculations in real time.
Using relative units (rem, em, vw) instead of fixed pixels improves your site's accessibility: users who increase text size in their browser get proportional scaling. WCAG 2.1 recommends relative units for text sizing.
All calculations run entirely in your browser. No data is sent to any server. The reference table gives you the equivalents for the 9 most common sizes (12, 14, 16, 18, 20, 24, 32, 48, 64 px) at a glance.
Who uses this tool?
- Front-end developers
- Quickly convert px values from a Figma or Sketch mockup to rem for your CSS stylesheet. Set the base size to your project value (16 px by default) and get equivalences instantly.
- UI/UX designers
- Check the correspondence between pt values used in your design files and the px or rem needed in the code. Streamline communication with developers using a shared reference table.
- CSS learners
- Understand the relationships between CSS units by experimenting with different values. Change the base size and viewport width to see how conversions shift, and learn the formulas hands-on.
- Web accessibility specialists
- Verify that your project's text sizes meet WCAG recommendations by converting px values to rem. Simulate different base sizes to anticipate behavior for users who adjust their browser settings.
How to use the converter?
Enter a numeric value and select its source unit (px, rem, em, pt, or vw). The tool instantly converts to all 4 other units. You can adjust the base size (for rem/em) and viewport width (for vw).
The "Conversion formulas" section shows the exact equivalences with your current settings: 1 rem = X px, 1 pt = 1.333 px, 1 vw = Y px. These formulas update in real time when you change the base or viewport.
The reference table displays the 9 most common px sizes (12 to 64 px) with their rem, em, pt, and vw equivalents. Use it as a cheat sheet when integrating your mockups.
Frequently asked questions
- What is the difference between rem and em in CSS?
- rem (root em) is relative to the font size of the root element (html), typically 16 px by default. em is relative to the font size of the parent element. In practice, 1 rem = 16 px if the base hasn't been changed, while 1 em varies with context. For consistency, most CSS frameworks recommend rem for global sizes and em for internal spacing.
- How do you convert px to vw for responsive design?
- The formula is: vw = (px / viewport width) x 100. For example, with a 1920 px viewport, 32 px = (32 / 1920) x 100 = 1.6667 vw. This tool performs that calculation automatically with the viewport width you set.
- Why use rem instead of px in CSS?
- rem units respect the text size preferences set by users in their browsers. If a visually impaired user increases the base size to 20 px, all your rem-based elements scale proportionally. px values are fixed and ignore this setting, which creates accessibility issues.
- Is my data sent to a server?
- No. All conversions are calculated locally in your browser via JavaScript. No data is transmitted or stored on any server.