PX to REM Converter
Enter a value in any unit, set your base font size and viewport width, and see it in every other unit with a table of common sizes.
Este contenido está en inglés.
Common sizes
| Pixels | Rem | Em | Points | Vw |
|---|
Ejemplos resueltos
Pixels to rem for a heading
24px with the base font size left at 16px
1.5rem
Rem is based on the root font size, so 24 divided by 16 gives 1.5.
Rem back to pixels
1.25rem with the base font size at 16px
20px
Multiplying 1.25 by 16 gives 20, which is the same size in pixels.
Sobre PX to REM Converter
Designers often think in pixels, but modern stylesheets use relative units such as rem, em and vw so that text and spacing adapt to the reader. A rem is a multiple of the root font size, which is usually 16px in a browser. An em is a multiple of the font size of the element itself. A vw is a share of the screen width, and points, pt, are a print unit that is 1.3333 pixels on screen. This converter lets you enter a value in any of these units and see it in all the others at once.
Set your base font size if your site uses something other than 16px, and set the viewport width you want to measure against, which is useful when you plan a layout for a particular screen. The table lists common sizes from 8px to 96px in every unit, so you can pick the right value for a heading, body text or spacing and copy it into your stylesheet. The results are rounded to four decimal places. Keep the table open while you work, because it shows the common sizes in every unit at the same time.
Cómo usar PX to REM Converter
- Type the value you want to convert and choose its unit.
- Set the base font size, usually 16px, and the viewport width you are planning for.
- Read the results for pixels, rem, em, points and vw.
- Use the table to pick common sizes, then copy the value you need.
Usos habituales
- Converting a design file measured in pixels into rem for a stylesheet
- Checking how a font size will scale when a visitor changes their text size
- Choosing points for a print stylesheet or a PDF export
- Working out vw values for a fluid heading or hero section
Preguntas frecuentes
How many pixels is 1rem?
By default 1rem equals 16 pixels, because most browsers set the root font size to 16px. If you have changed the base font size in your site or browser settings, enter that value in the base font size box and the converter will use it. Because rem follows the root size, it is the unit to use when you want text to respect the reader's settings.
What is the difference between rem and em?
Rem is always measured against the root font size, so it is the same everywhere on the page. Em is measured against the font size of the element it is used on, so it changes when a parent element has a different size. Using em for spacing around text can be helpful, but rem is more predictable for most font sizes and layouts.
How many pixels are in a point?
In CSS, one point is 1/72 of an inch and one inch is 96 pixels, so 1pt equals 1.3333px. This means 12pt equals 16px. Points are mainly used for print and PDF documents, where they describe physical size. On screen, pixel and rem values are usually better for web layouts because they adapt to different devices.
What does vw mean in CSS?
A vw is one hundredth of the width of the viewport, which is the browser window or screen width. At a viewport width of 1440px, 1vw equals 14.4px, so 10vw is 144px. The converter uses the viewport width you enter to work out the vw value. Viewport units change as the window resizes, so combine them with a minimum and maximum for text that must stay readable.
Which unit should I use for font sizes?
Rem is the most common choice for font sizes on websites, because it scales with the root size and respects text settings in the browser. Pixels are simpler but fix the size, and vw is useful for fluid headings when combined with clamp(). Use the table and the converter together to find the right size, then keep the scale consistent across headings and body text.