CSS Unit Converter

What is this tool?

This CSS unit converter translates between px, rem, em, and pt using a configurable root / base font size (default 16px). It is built for front-end work where design specs, tokens, and browser rendering use different units.

rem is relative to the root element’s font-size. In real CSS, em is relative to the current element’s computed font-size (often inherited from a parent), so nested em values compound. This calculator uses the same base for both rem and em so you can do quick token math—treat em results as an approximation unless the element’s font-size equals the root.

pt follows the CSS screen convention of 96dpi (1pt = 96/72 px). That is not the same as print workflows at 72dpi or 300dpi.

When to use

• Convert Figma or handoff pixel values into rem spacing and type scales
• Check what 1.5rem or 12pt becomes when your root is not 16px
• Document design-token tables (px ↔ rem) for a style guide
• Sanity-check print-oriented pt sizes against screen CSS

How to use

1. Enter the numeric value and choose the source unit (px, rem, em, or pt).
2. Set the root / base font size in pixels (default 16). All rows update live.
3. Copy a single unit with the row button, or copy all values at once.
4. If you nest em in CSS, verify against the parent’s computed font-size—not only this table.

Examples

Practical pitfalls

• em is parent-dependent. A child with font-size: 1.2em inside a parent at 1.25em is not 1.2 × root; it compounds. This tool’s em column assumes font-size equals the base—an approximation.
• Changing html { font-size: 62.5% } (or similar) makes 1rem = 10px only if the browser default was 16px; set the base field to match your real root.
• pt here is the CSS absolute unit at 96dpi, not physical print points at an arbitrary DPI.

References

• MDN CSS values and units
• CSS Values and Units Module — absolute lengths

이 도구는 무엇인가요?

구성 가능한 루트 / 기준 글꼴 크기(기본 16px)로 CSS px·rem·em·pt를 서로 변환합니다. 디자인 토큰, 타이포 스케일, 반응형 spacing에 맞춥니다.

실제 CSS에서 rem은 루트, em은 현재(대개 부모) 요소의 font-size에 상대적입니다. 이 도구는 rem·em에 같은 기준을 쓰므로 em 결과는 근사값입니다. pt는 CSS 96dpi 규약(1pt = 96/72 px)을 따릅니다.

When to use

• 피그마·핸드오프 px를 rem spacing·타이포 스케일로 맞출 때
• root가 16px가 아닐 때 1.5rem / 12pt가 몇 px인지 확인할 때
• 스타일 가이드용 px ↔ rem 토큰 표를 정리할 때
• 인쇄용 pt를 화면 CSS와 대조할 때

사용 방법

1. 숫자와 출발 단위(px, rem, em, pt)를 선택합니다.
2. 루트 / 기준 글꼴 크기를 px로 설정합니다(기본 16). 모든 행이 즉시 갱신됩니다.
3. 행별 Copy 또는 전체 Copy로 값을 가져갑니다.
4. CSS에서 em을 중첩하면 부모의 computed font-size를 별도로 확인하세요.

예시

실무에서 흔한 실수

• em은 부모 의존. 부모 1.25em 안의 1.2em은 1.2 × root가 아니라 누적됩니다. 이 표의 em은 기준=요소 font-size라는 가정(근사)입니다.
• html { font-size: 62.5% }처럼 root를 바꾸면 base 필드를 실제 루트 px에 맞추세요.
• 여기 pt는 96dpi CSS 절대 단위이며, 임의 DPI 인쇄점과 다릅니다.

참고자료

• MDN CSS values and units
• CSS Values and Units Module — absolute lengths

このツールについて

設定可能なルート / 基準フォントサイズ（既定 16px）で CSS の px・rem・em・pt を換算します。デザイントークンやタイポグラフィ、レスポンシブ spacing 向けです。

実 CSS では rem はルート、em は現在（多くは親）要素の font-size 相対です。このツールは rem・em に同じ基準を使うため、em は近似値です。pt は CSS 96dpi（1pt = 96/72 px）に従います。

When to use

• Figma / ハンドオフの px を rem の spacing・スケールに合わせる
• root が 16px でないときの 1.5rem / 12pt を確認する
• スタイルガイド用の px ↔ rem トークン表を作る
• 印刷向け pt を画面 CSS と突き合わせる

使い方

1. 数値と元単位（px / rem / em / pt）を選びます。
2. ルート / 基準フォントサイズを px で設定します（既定 16）。全行が即時更新されます。
3. 行ごとの Copy、または一括 Copy で値を取ります。
4. CSS で em を入れ子にする場合は、親の computed font-size も確認してください。

例

実務での落とし穴

• em は親依存。 親 1.25em 内の 1.2em は 1.2 × root ではなく積み上がります。表の em は基準＝要素 font-size という近似です。
• html { font-size: 62.5% } などで root を変えたら、base を実際のルート px に合わせます。
• ここでの pt は 96dpi の CSS 絶対単位で、任意 DPI の印刷ポイントとは別です。

参考資料

• MDN CSS values and units
• CSS Values and Units Module — absolute lengths

¿Qué es esta herramienta?

Convierte px, rem, em y pt de CSS con un tamaño raíz / base configurable (por defecto 16px). Sirve para tokens de diseño, tipografía y spacing responsivo.

En CSS real, rem mira la raíz y em el font-size del elemento actual (a menudo el padre). Aquí rem y em comparten la misma base: trata el em como aproximación. pt sigue la convención CSS a 96dpi (1pt = 96/72 px).

When to use

• Pasar píxeles de diseño a rem en escalas tipográficas y spacing
• Comprobar 1.5rem o 12pt cuando la raíz no es 16px
• Documentar tablas de tokens px ↔ rem
• Contrastar pt orientados a impresión con CSS de pantalla

Cómo usar

1. Introduce el número y la unidad de origen.
2. Ajusta el tamaño raíz / base en px (16 por defecto). Todas las filas se actualizan al instante.
3. Copia una unidad por fila o todas a la vez.
4. Si anidas em en CSS, verifica el font-size computado del padre.

Ejemplos

Errores prácticos

• em depende del padre. 1.2em dentro de un padre a 1.25em no es 1.2 × raíz; se acumula. La columna em asume font-size = base.
• Si cambias el root (html { font-size: 62.5% }, etc.), alinea el campo base con el px real.
• El pt aquí es la unidad absoluta CSS a 96dpi, no puntos de impresión a otro DPI.

Referencias

• MDN CSS values and units
• CSS Values and Units Module — absolute lengths

Qu'est-ce que cet outil ?

Convertissez px, rem, em et pt CSS avec une taille racine / de base configurable (16px par défaut). Pensé pour tokens de design, typographie et spacing responsive.

En CSS réel, rem dépend de la racine et em du font-size de l’élément courant (souvent le parent). Ici rem et em partagent la même base — traitez em comme une approximation. pt suit la convention CSS 96dpi (1pt = 96/72 px).

When to use

• Traduire des px de maquette en rem pour échelles et spacing
• Vérifier 1.5rem ou 12pt quand la racine n’est pas 16px
• Documenter des tables de tokens px ↔ rem
• Comparer des pt « print » au CSS écran

Comment utiliser

1. Saisissez la valeur et l’unité source.
2. Réglez la taille racine / de base en px (16 par défaut). Toutes les lignes se mettent à jour immédiatement.
3. Copiez une unité par ligne ou toutes les valeurs.
4. Si vous imbriquez des em, vérifiez le font-size calculé du parent.

Exemples

Pièges courants

• em dépend du parent. 1.2em dans un parent à 1.25em n’est pas 1.2 × racine ; les valeurs se cumulent. La colonne em suppose font-size = base.
• Si vous changez le root (html { font-size: 62.5% }, etc.), alignez le champ base sur le px réel.
• Le pt ici est l’unité absolue CSS à 96dpi, pas un point d’impression à un autre DPI.

Références

• MDN CSS values and units
• CSS Values and Units Module — absolute lengths

这个工具是什么？

用可配置的根 / 基准字号（默认 16px）在 CSS px、rem、em、pt 之间转换。适合设计 token、排版比例与响应式 spacing。

真实 CSS 中 rem 相对根元素，em 相对当前（常为父）元素的 font-size。本工具对 rem/em 使用同一基准，因此 em 为近似值。pt 按 CSS 96dpi（1pt = 96/72 px）。

When to use

• 把设计稿 px 换成 rem 间距与字号阶梯
• 根字号不是 16px 时核对 1.5rem / 12pt
• 整理样式指南的 px ↔ rem token 表
• 将印刷向 pt 与屏幕 CSS 对照

如何使用

1. 输入数值并选择源单位。
2. 设置根 / 基准字号（默认 16px）。所有行即时更新。
3. 按行复制，或一次复制全部结果。
4. 若在 CSS 中嵌套 em，请再核对父元素的计算字号。

示例

实践中的常见误区

• em 依赖父元素。 父级 1.25em 内的 1.2em 不是 1.2 × 根，会累乘。本表 em 假定元素字号等于基准。
• 若改了 root（如 html { font-size: 62.5% }），请把 base 改成真实根像素。
• 此处 pt 是 96dpi 下的 CSS 绝对单位，不是任意 DPI 的印刷点。

参考资料

• MDN CSS values and units
• CSS Values and Units Module — absolute lengths

這個工具是什麼？

用可設定的根 / 基準字型大小（預設 16px）在 CSS px、rem、em、pt 之間轉換。適合設計 token、排版比例與響應式 spacing。

真實 CSS 中 rem 相對根元素，em 相對目前（常為父）元素的 font-size。本工具對 rem/em 使用同一基準，因此 em 為近似值。pt 按 CSS 96dpi（1pt = 96/72 px）。

When to use

• 把設計稿 px 換成 rem 間距與字級階梯
• 根字號不是 16px 時核對 1.5rem / 12pt
• 整理樣式指南的 px ↔ rem token 表
• 將印刷向 pt 與螢幕 CSS 對照

如何使用

1. 輸入數值並選擇來源單位。
2. 設定根 / 基準字型大小（預設 16px）。所有列即時更新。
3. 按列複製，或一次複製全部結果。
4. 若在 CSS 中巢狀 em，請再核對父元素的計算字號。

範例

實務上常見陷阱

• em 依賴父元素。 父級 1.25em 內的 1.2em 不是 1.2 × 根，會累乘。本表 em 假定元素字號等於基準。
• 若改了 root（如 html { font-size: 62.5% }），請把 base 改成真實根像素。
• 此處 pt 是 96dpi 下的 CSS 絕對單位，不是任意 DPI 的印刷點。

參考資料

• MDN CSS values and units
• CSS Values and Units Module — absolute lengths