Stax
Tools

Font Size Converter

Convert CSS font sizes between px, rem, em, pt, vw, vh, and %.

UnitValueNotes
px16absolute pixels
rem1base 16px
em1parent 16px
pt12at 96 dpi
vw1.1111viewport 1440px wide
vh1.7778viewport 900px tall
%100parent 16px

Click any row to use that unit as the new input.

Settings (base font size, viewport, parent)
px
px
px
px

ข้อมูลอ้างอิง CSS units อย่างย่อ

แนวทางที่ดีที่สุด: ใช้ rem สำหรับขนาดตัวอักษร

Typography แบบ Fluid ด้วย clamp()

ชุมชนด้านการเข้าถึงแนะนำให้ใช้หน่วย rem สำหรับขนาดตัวอักษรเพื่อให้ผู้ใช้ที่เพิ่มขนาดตัวอักษรเริ่มต้นของ browser (ความต้องการด้านการเข้าถึงที่พบบ่อย) เห็นข้อความขยายตามสัดส่วน การตั้ง html { font-size: 62.5% } ทำให้ 1rem = 10px ทำให้คำนวณในใจง่ายขึ้น: 1.6rem = 16px, 2.4rem = 24px

CSS สมัยใหม่รองรับขนาดตัวอักษรแบบ fluid ที่ปรับขนาดระหว่างค่าต่ำสุดและสูงสุด: font-size: clamp(1rem, 2.5vw, 2rem) หมายความว่าตัวอักษรจะมีขนาดอย่างน้อย 1rem เติบโตตาม viewport ที่ 2.5vw และสูงสุดที่ 2rem ใช้เครื่องคำนวณนี้เพื่อหาค่า vw ที่ตรงกับขนาดเป้าหมายที่ viewport ที่กำหนด

นักพัฒนา front-end ใช้ตัวแปลงนี้เมื่อแปล Figma design ที่ระบุขนาดตัวอักษรใน px เป็นค่า rem สำหรับ CSS codebase ที่เข้าถึงได้ซึ่งผู้ใช้สามารถปรับขนาดตัวอักษร root ได้ ทีมที่ย้าย stylesheet เก่าจาก px เป็น rem วางค่า pixel แต่ละตัวเพื่อรับเทียบเท่า rem ทันที ผู้เขียน print stylesheet แปลงค่า rem และ px เป็น pt สำหรับ @media print rules ที่กำหนดมิติกระดาษจริง นักพัฒนาที่สร้างระบบ fluid type ใช้การแปลง vw เพื่อหาค่า viewport-relative ที่ตรงกับขนาด pixel เป้าหมายที่ breakpoint เฉพาะ

  • px — pixels แบบ absolute; สม่ำเสมอแต่ไม่สนใจการตั้งค่า browser ของผู้ใช้
  • rem — สัมพันธ์กับขนาดตัวอักษร root (ค่าเริ่มต้น 16px); ดีที่สุดสำหรับ typography ที่เข้าถึงได้
  • em — สัมพันธ์กับขนาดตัวอักษร parent element; เหมาะสำหรับการปรับขนาดในขอบเขต component
  • pt — หน่วยพิมพ์ (1pt = 1/72 นิ้ว); ใช้ใน print stylesheets
  • vw / vh — เปอร์เซ็นต์ของความกว้าง/สูงของ viewport; เหมาะสำหรับ fluid typography ด้วย CSS clamp()
  • % — เปอร์เซ็นต์ของขนาดตัวอักษร parent; เทียบเท่ากับ em เมื่อใช้กับ font-size

คำถามที่พบบ่อย

What is the difference between px and rem?
px (pixel) is an absolute unit — 16px is always 16 pixels regardless of context. rem (root em) is relative to the root element's font size, which defaults to 16px in browsers. 1rem = 16px by default, 2rem = 32px. rem is preferred for font sizes in responsive design because users can scale their browser's base font size for accessibility.
When should I use rem vs em?
Use rem for global font sizes, spacing, and layout — it stays consistent relative to the root. Use em for component-specific sizing that should scale with the component's own font size, such as padding inside a button. For example, padding: 0.5em means 'half the button's font size', which scales correctly if you change the font size.
How do I convert px to rem?
Divide the px value by the root font size (usually 16px). For example: 24px ÷ 16 = 1.5rem. If you change the root font size to 18px, then 1rem = 18px and 1.5rem = 27px. This calculator lets you set any base font size for accurate conversion.
What is the difference between vw/vh and %?
vw (viewport width) and vh (viewport height) are relative to the browser viewport dimensions. 1vw = 1% of the viewport width. % is relative to the parent element's value for that property. For font-size, 100% = the parent's font size. vw/vh units do not depend on the parent element and always refer to the browser window.
What is pt and when is it used?
pt (point) is a print unit: 1pt = 1/72 inch. At the standard screen resolution of 96 DPI, 1px = 0.75pt, so 16px = 12pt. Points are mainly used in print stylesheets (@media print), word processors, and PDF generation. For web typography, use px or rem instead.

เครื่องมือที่เกี่ยวข้อง