Free EX to PX Converter
Convert CSS x-height units (ex) to absolute pixel dimensions in real-time
EX to PX Converter
Result: px
ex @ 16px serif = px
X-height ratio: 0.46
Common EX Presets:
What are EX Units in CSS?
EX units in CSS are relative units based on the x-height of the current font. 1ex equals the height of the lowercase letter 'x' in the specified font family and size.
.typography {
font-size: 16px;
line-height: 2ex;
margin-bottom: 1.5ex;
}
Why Use EX Units?
- Font-Aware Sizing: Automatically adapts to different fonts
- Typography Consistency: Maintains proportions relative to text
- Readability: Perfect for line-height, margins, and spacing
- Cross-Font Compatibility: Works consistently across different font families
- Historical Typography: Based on traditional typographic measurements
Conversion Formula:
PX = EX × Font Size × X-Height Ratio
// Example: 2ex at 16px Arial (x-height ratio: 0.52)
16.64px = 2 × 16 × 0.52
// Where X-Height Ratio = Height of 'x' ÷ Font Size
X-Height Ratios for Common Fonts:
| Font Family | X-Height Ratio | 1ex at 16px | Typical Use | Font Characteristics |
|---|---|---|---|---|
| Verdana | 0.55 | 8.8px | Web typography, UI | Large x-height, high readability |
| Arial | 0.52 | 8.32px | General purpose, web | Medium x-height, sans-serif |
| Georgia | 0.48 | 7.68px | Reading, articles | Web-safe serif, good x-height |
| Times New Roman | 0.46 | 7.36px | Print, formal documents | Small x-height, traditional |
| Courier New | 0.58 | 9.28px | Code, monospace | Monospace, large x-height |
| Helvetica | 0.52 | 8.32px | Print design, branding | Classic sans-serif |
| Comic Sans MS | 0.54 | 8.64px | Informal, casual | Large x-height, rounded |
| Garamond | 0.44 | 7.04px | Books, literature | Small x-height, elegant |
Visual Representation:
Font Size: Total height from top of ascenders to bottom of descenders
X-Height: Height of lowercase 'x' (no ascenders/descenders)
Cap Height: Height of uppercase letters
Ascender Height: Height above x-height (b, d, h, etc.)
Descender Depth: Depth below baseline (g, j, p, q, y)
1ex = X-Height of current font
CSS Examples & Usage:
.article-text {
font-size: 18px;
font-family: Georgia, serif;
line-height: 1.6ex;
margin-bottom: 2ex;
}
// Button padding relative to text
.btn {
font-size: 16px;
font-family: Arial, sans-serif;
padding: 1ex 2ex;
}
// Form input sizing
input[type=&qout;text&qout;] {
font-size: 14px;
height: 3ex;
padding: 0.5ex;
}
EX vs EM vs REM:
| Unit | Based On | Use Case | Advantages | Disadvantages |
|---|---|---|---|---|
| EX | X-height of current font | Typography spacing, vertical rhythm | Font-aware, consistent proportions | Varies by font, less commonly used |
| EM | Current font size | Relative sizing, responsive typography | Simple, widely supported | Compounds in nested elements |
| REM | Root font size | Global scaling, consistent sizing | Consistent, no compounding | Less flexible for component scaling |
| PX | Absolute pixels | Fixed sizes, precise control | Precise, predictable | Not responsive, accessibility issues |
Best Practices:
- Use EX units for line-height to maintain typographic rhythm
- Combine with EM units for comprehensive typographic scale
- Test with different fonts as x-height varies significantly
- Use for vertical spacing (margins, padding) in text-heavy layouts
- Consider accessibility - EX units scale with text size changes
- For body text, 1.4-1.6ex line-height is optimal for readability
Historical Context:
Origin: Traditional typography measurement
Relation to EM: In metal type, 1em = width of 'M', 1ex ≈ 0.5em
Digital Adaptation: CSS adopted EX as x-height measurement
Modern Use: Less common than EM/REM but valuable for typography
Browser Support: Excellent (all modern browsers)
Common EX Values:
Line height: 1.5-1.8ex (optimal readability)
Paragraph spacing: 1.5-2ex (visual separation)
Button padding: 0.5-1ex (vertical), 1-2ex (horizontal)
Form inputs: 2-3ex height
Heading margins: 0.5-1ex top, 1-1.5ex bottom
Block quotes: 1ex left padding
List items: 0.5ex between items
What is the CSS EX Unit and How Does it Relate to Pixels?
In advanced web typography, the EX unit represents a relative measurement based on the physical height of a lowercase x character in the current font-family. Because different typefaces feature unique design proportions, two fonts set to the same 16px size can have vastly different visual heights. Verdana has a large x-height (about 55% of total size), whereas Times New Roman features a narrower, condensed structure (about 46% of total size). Converting EX to PX helps web designers compute exact dimensions to build perfectly aligned vertical grids.
The Mathematical Formula
To convert EX measurements into pixels, multiply the target EX value by the font-size and the specific font's x-height ratio:
PX = EX × Active Font Size × X-Height Ratio
For example, if you design a paragraph gap of 1.5ex using Helvetica (X-Height ratio 0.52) at 16px font-size:
EX to PX Conversion Table (Base 16px Font Size)
Quickly reference pixel values across common typefaces assuming a standard font size of 16px:
| EX Sizing | Times New Roman (Ratio 0.46) | Arial / Helvetica (Ratio 0.52) | Verdana (Ratio 0.55) |
|---|---|---|---|
| 0.5 ex | 3.68 px | 4.16 px | 4.40 px |
| 1.0 ex | 7.36 px | 8.32 px | 8.80 px |
| 1.5 ex | 11.04 px | 12.48 px | 13.20 px |
| 2.0 ex | 14.72 px | 16.64 px | 17.60 px |
| 3.0 ex | 22.08 px | 24.96 px | 26.40 px |
| 4.0 ex | 29.44 px | 33.28 px | 35.20 px |
| 5.0 ex | 36.80 px | 41.60 px | 44.00 px |
When to Use EX Sizing in Layout Design
Because EX units map exactly to lowercase visual height, they are perfect for managing the vertical rhythm of editorial layouts. Use EX to define paragraph margins, blockquote paddings, and alignment coordinates for inline ornaments (like custom checkmarks or bullet icons). This ensures the spacing shrinks and expands in perfect alignment with the lowercase character boxes, maintaining optical balance.
