Typography Converter

Convert between pixels, points, ems, rems, and other typography units

Typography Converter

Base Font Size (px)

Default browser font size (typically 16px)

Screen PPI

Pixels per inch (typically 96 on desktop)

Font Family

From:

ℹ️

To:

ℹ️

Common Typography Presets:

Conversion Formula:

pt = px × 0.75

Understanding Typography Units

Web Design Units:

Pixels (px): Screen-based units, the most common for web design
Em (em): Relative to parent element's font size
Root Em (rem): Relative to root (html) element's font size
Viewport Width (vw): 1% of viewport width
Viewport Height (vh): 1% of viewport height
Percent (%): Relative to parent element's font size

Print Design Units:

Points (pt): 1/72 inch, standard in print design
Picas (pc): 1/6 inch or 12 points
Inches (in): Imperial measurement
Millimeters (mm): Metric measurement
Centimeters (cm): Metric measurement

Common Font Sizes in Digital Design:

• Body text: 16px (1rem)
• Small text: 14px (0.875rem)
• Very small / footnotes: 12px (0.75rem)

• H1 heading: 32px (2rem)
• H2 heading: 24px (1.5rem)
• H3 heading: 20px (1.25rem)

When to Use Different Units:

• Pixels (px): When you need precise control and don't need scaling
• Em/Rem (em/rem): For responsive designs that scale with font size
• Viewport units (vw/vh): For layouts that should respond to viewport dimensions
• Points (pt): For print design or when targeting print stylesheets
• Physical units (in/cm/mm): When physical dimensions matter (especially in print)

Responsive Typography

Responsive typography adapts to different screen sizes and devices. Here are some strategies:

Using rem units:

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

h1 {
  font-size: 2rem; /* 32px on desktop, 28px on mobile */
}

Using viewport units:

h1 {
  font-size: calc(1.5rem + 1.5vw);
  /* Scales smoothly with viewport width */
}

.hero-text {
  font-size: min(5vw, 3rem);
  /* Never larger than 3rem, scales down on small screens */
}

CSS Typography Functions:

calc(): Perform calculations with different units (e.g., calc(1rem + 2vw))
min(): Use the smaller of two values (e.g., min(5vw, 50px))
max(): Use the larger of two values (e.g., max(2rem, 32px))
clamp(): Keep a value between a minimum and maximum (e.g., clamp(16px, 4vw, 32px))

Was this converter helpful? Let us know how we can improve it!

Size Comparison

16 px

16.0 pixels on this screen

12 pt

16.0 pixels on this screen

Text Sample

The quick brown fox jumps over the lazy dog

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Comfortable reading size

Readability note: Too narrow - more than 90 chars per line

Font Hierarchy

Main Heading

Subheading

This is how your selected font size would look in a typical content hierarchy.

Smaller text for secondary information or footnotes.

Unit Information

Unit type:

Pixels

Typical usage:

Web design

Screen size (px):

16.0 pixels

Practical use:

Standard icon size

Accessibility:

Good - meets accessibility guidelines

Typography Scale

8px - Very small text (minimum recommended)

12px - Small print / footnotes

14px - Secondary text

16px - Body text / paragraph

18px - Large body text

20px - Subheading

24px - Heading 3

30px - Heading 2

36px - Heading 1

Unit Conversion Reference

Common conversions at standard 96 PPI:

• 1px = 0.75pt
• 1pt = 1.333px
• 1in = 96px = 72pt
• 1pc = 16px = 12pt
• 1cm = 37.8px = 28.35pt
• 1mm = 3.78px = 2.83pt
• 1em/rem = 16px (with default browser font size)

Font-Size Accessibility Guidelines:

• Body text: At least 16px (1rem)
• Interactive elements: At least 14px (0.875rem)
• Recommended line height: 1.5 for body text
• Text contrast: 4.5:1 minimum (WCAG AA)

Mobile tip: Swipe left or right on the unit dropdown to quickly change units, or use the arrow buttons

About the Typography Converter

Convert between pixels, points, ems, rems, and other typography units All conversions run instantly in your browser and nothing you enter is sent to a server.

Common Conversion Formulas

From	To	Formula
Pixels (px)	Points (pt)	pt = px × 0.75
Ems (em)	Pixels (px), Parent Font Size (pfs)	em = px / pfs
Rems (rem)	Pixels (px), Root Font Size (rfs)	rem = px / rfs

Typography Converter