Typography

Typography

Typography converter online. Convert px, pt, em, rem for fonts. Line-height calculator with font preview—free type scale tool.

Font Size

Base Font Size (for em/rem calculations)

px
🔤

Font Size Units

Pixels px
16

Absolute screen unit

Points pt
12

Print unit (1pt ≈ 1.333px)

Em em
1

Relative to parent (16px)

Rem rem
1

Relative to root (16px)

Size Preview

Aa Bb Cc
16px / 12pt

Line Height Calculator

px
Unitless
1.5
Pixels
24px

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Common Type Scale

Caption 12px 9pt 0.75rem Aa
Body Small 14px 10.5pt 0.875rem Aa
Body 16px 12pt 1rem Aa
Subtitle 18px 13.5pt 1.125rem Aa
Title 24px 18pt 1.5rem Aa
Heading 32px 24pt 2rem Aa
Display 48px 36pt 3rem Aa

Typography Tips

rem — Use for consistent spacing and sizing across your site.

em — Use for component-specific sizing that should scale with local font size.

Unitless line-height — Recommended (e.g., 1.5), scales with font size.

Features

  • Convert font sizes (px, pt, em, rem)
  • Line-height calculator with preview
  • Type scale generator
  • Golden ratio typography
  • Vertical rhythm calculator
  • Font preview with custom text

Common Use Cases

  • Convert print typography (pt) to web (px, rem)
  • Calculate optimal line-height for readability
  • Generate harmonious type scales
  • Convert between design tool units and CSS
  • Ensure consistent vertical rhythm

Typography Units and Scales

Typography uses multiple unit systems, and understanding conversions is crucial for translating designs from print to web and maintaining consistency across platforms.

Typography Units:

  • Pixel (px): Fixed size, easy to understand but doesn't scale with user settings
  • Point (pt): Print unit (1/72 inch), used in design tools. 12pt ≈ 16px
  • Em: Relative to parent font size, useful for component-level scaling
  • Rem: Relative to root (html) font size, best for consistent scaling

Line-Height Best Practices:

  • Body text: 1.5-1.6× font size for optimal readability
  • Headings: 1.2-1.3× font size (tighter leading)
  • Short lines (<45 chars): 1.5 line-height
  • Long lines (>75 chars): 1.6-1.8 line-height for easier tracking
  • Small text (<14px): Higher line-height (1.6-1.8)

Type Scales:

  • Modular scale: Multiply base size by ratio (1.25, 1.333, 1.5, 1.618)
  • Golden ratio: 1.618× each step (16px → 25.9px → 41.9px)
  • Perfect fourth: 1.333× (16px → 21.3px → 28.4px)
  • Major third: 1.25× (16px → 20px → 25px → 31.25px)

Vertical Rhythm:

Maintain consistent spacing by aligning text baselines to a grid. Set a baseline (e.g., 8px), then ensure all line-heights, margins, and padding are multiples of that baseline.

Examples

Valid - Body Text
16px, line-height: 1.5 (24px)
Valid - Heading
32px, line-height: 1.25 (40px)
Valid - Type Scale (1.25)
16px → 20px → 25px → 31px

Frequently Asked Questions

What's the ideal line-height for body text?
1.5-1.6× the font size for most body text. For 16px font, use 24-25.6px line-height. Longer lines need more line-height (1.6-1.8), shorter lines can use less (1.4-1.5). Accessibility guidelines recommend minimum 1.5.
Should I use px, em, or rem for font sizes?
Use rem for font sizes—it respects user browser settings (accessibility) and makes scaling easy. Use em for padding/margin within components. Avoid px for fonts—it ignores user preferences for larger text.
How do I convert pt (print) to px (web)?
At 96 DPI (web standard): px = pt × 96 / 72 ≈ pt × 1.333. So 12pt = 16px, 14pt ≈ 18.67px. For print (300 DPI): px = pt × 300 / 72 ≈ pt × 4.167. Design tools use 72 DPI, so 12pt shows as 12px.
What is a modular type scale?
A modular scale uses a consistent ratio to generate harmonious font sizes. Start with base (16px), multiply by ratio (1.25) for each step: 16px → 20px → 25px → 31.25px → 39px. Common ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth), 1.618 (golden ratio).
Why use unitless line-height instead of px?
Unitless line-height (1.5) is relative to font size. If you use px (24px), nested elements with larger fonts won't scale properly. line-height: 1.5 on parent applies 1.5× to all children, regardless of their font size.

💡 Tips

  • Standard type scale for headings: h1=2.5rem (40px), h2=2rem (32px), h3=1.75rem (28px), h4=1.5rem (24px)
  • Use unitless line-height (1.5) instead of px—it scales with font size changes
  • Google Fonts renders at 72 DPI, so 12pt in Figma = 12px in CSS, but "true" 12pt = 16px at 96 DPI
  • For vertical rhythm, set root font to 16px, line-height 1.5 = 24px baseline, use 8px spacing grid

Related Tools

CSS Units

Convert all CSS units including typography

Try it

Length Converter

Convert physical print measurements

Try it

Color Converter

Convert text colors for design

Try it

CSS Formatter

Format CSS with typography rules

Try it