Cap Height Converter
Our typography & graphic design calculator teaches cap height step by step. Perfect for students, teachers, and self-learners.
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer
Cap Height Converter
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: Cap Height = Font Size x Cap Height Ratio
Worked example โ Georgia at 32.09px matches Montserrat at 32px (only 0.09px difference)
Formula
Cap Height = Font Size x Cap Height Ratio
Where font size is in pixels (or any unit) and cap height ratio is a decimal between 0 and 1 specific to each typeface. To find required font size for a target cap height: Font Size = Target Cap Height / Cap Height Ratio. To match fonts: Second Font Size = First Cap Height / Second Cap Ratio.
Worked Examples
Example 1: Matching Cap Heights Between Heading and Body Fonts
Problem:A heading uses Montserrat (cap ratio 0.700) at 32px. What size should Georgia (cap ratio 0.698) body text be to match cap heights?
Solution:Montserrat cap height = 32 x 0.700 = 22.40px Georgia size needed = 22.40 / 0.698 = 32.09px Difference = 32.09 - 32 = 0.09px These fonts have very similar cap ratios, so sizes are nearly identical
Result:Georgia at 32.09px matches Montserrat at 32px (only 0.09px difference)
Example 2: Calculating Font Size for a Target Cap Height
Problem:A design specification requires a cap height of exactly 10mm on screen (96 DPI). The font is Arial (cap ratio 0.716).
Solution:10mm in pixels = 10 x 3.7795 = 37.795px Required font size = 37.795 / 0.716 = 52.79px Verification: 52.79 x 0.716 = 37.80px (10.001mm) In points: 52.79 x 0.75 = 39.59pt
Result:Arial at 52.79px (39.59pt) produces a cap height of 10mm at 96 DPI
Frequently Asked Questions
What is cap height in typography and why is it important?
Cap height is the distance from the baseline to the top of a capital letter in a typeface, most accurately measured on flat-topped capitals like H, I, or E (rather than pointed ones like A, which may extend slightly higher). Cap height is a crucial metric because it determines the perceived size of text. Two fonts set at the same point size can appear very different in size if their cap height ratios differ. For example, Verdana has a cap height ratio of approximately 0.735, making it appear significantly larger than Times New Roman at 0.662, even at identical font sizes. Understanding cap height enables designers to achieve visual consistency when mixing typefaces.
How do you calculate cap height from font size?
Cap height is calculated by multiplying the font size by the cap height ratio of the specific typeface. The cap height ratio is the proportion of the em square occupied by capital letters, typically ranging from 0.62 to 0.76 depending on the typeface design. For example, at 16px font size with a cap height ratio of 0.72, the cap height would be 16 times 0.72 = 11.52 pixels. The cap height ratio is a property of the font itself and can be found in font specification sheets, OpenType font metrics tables (OS/2 table sCapHeight field), or measured directly from rendered text. Different fonts at the same point size will have different actual cap heights.
How do you match cap heights between two different fonts?
To match cap heights between two fonts, calculate the required font size for the second font so that its cap height equals the first font cap height. The formula is: second font size = (first font cap height) divided by (second font cap height ratio). For example, if Font A at 16px has cap height ratio 0.72 (cap height = 11.52px) and Font B has cap height ratio 0.68, then Font B needs to be set at 11.52 / 0.68 = 16.94px to match. This technique is essential when combining a heading font with a body text font, or when mixing serif and sans-serif typefaces. Matched cap heights create visual harmony and consistent apparent size across different typefaces.
What is the difference between cap height, x-height, ascender, and descender?
These four measurements define the vertical proportions of a typeface. The baseline is the invisible line where most letters sit. Cap height extends from baseline to the top of capital letters. X-height extends from baseline to the top of lowercase letters like x, a, and e. Ascender height extends from baseline to the top of tall lowercase letters like b, d, and h (typically higher than cap height). Descender depth extends from baseline downward to the bottom of letters like g, p, and y. The em square encompasses the entire vertical extent including ascenders and descenders plus some additional space. Different typefaces allocate these proportions very differently, which is why fonts appear different sizes.
How does cap height relate to optical sizing in responsive design?
In responsive design, maintaining consistent cap heights across breakpoints ensures that text appears proportionally sized relative to surrounding elements. Rather than scaling font size linearly, designers can use cap height as the reference measurement to ensure headings maintain the same apparent visual weight at different viewport sizes. Modern CSS tools like Capsize and utilities like Tailwind Capsize plugin allow specifying text size in terms of cap height rather than font size, automatically calculating the correct font-size and line-height values. This approach produces more predictable layouts because the cap height directly corresponds to the visible text size, whereas font size includes invisible descender space that varies by typeface.
What are cap height ratios for common web fonts?
Common web font cap height ratios include: Arial and Helvetica at approximately 0.716-0.718, Times New Roman at 0.662, Georgia at 0.698, Verdana at 0.735, Trebuchet MS at 0.690, Courier New at 0.616, Impact at 0.756, Roboto at 0.711, Open Sans at 0.714, Lato at 0.694, Montserrat at 0.700, Source Sans Pro at 0.660, and Playfair Display at 0.650. Condensed and display typefaces often have higher cap height ratios because they are designed to maximize the visible text area. These ratios are critical for precise typographic calculations and can be extracted from font files using tools like FontForge, opentype.js, or the CSS Font Metrics API.
How do print and screen cap height measurements differ?
In print, cap height is typically measured in points (1 point = 1/72 inch) or millimeters. On screen, cap height is measured in pixels, but the actual physical size depends on the display pixel density (PPI/DPI). A 12px cap height on a 96 DPI monitor is physically about 3.175 mm, while the same 12px on a 192 DPI Retina display is only 1.587 mm. This discrepancy means that designers must consider device pixel ratio when targeting specific physical text sizes. Print designers accustomed to working in points must account for the CSS point definition (1pt = 1.333px at 96 DPI) when transitioning to screen design. The rem unit based on root font size provides a more consistent reference across screen contexts.
How is cap height used in logo design and branding?
In logo design and branding, cap height serves as a fundamental unit for establishing spacing rules and minimum clear space requirements. Brand guidelines often specify minimum logo sizes in terms of cap height (e.g., the cap height of the brand name must be at least 8mm). The cap height also determines the alignment grid for combining logotypes with symbols or icons. When a brand uses multiple typefaces, specifying cap height relationships (rather than point sizes) ensures consistent visual hierarchy across all applications. For example, a brand might specify that the secondary typeface should always be set so its cap height equals 85% of the primary typeface cap height, regardless of the absolute sizes used.
What role does cap height play in accessibility standards?
While WCAG (Web Content Accessibility Guidelines) specifies contrast ratios rather than minimum sizes, practical accessibility guidelines often reference cap height for readability. Research suggests a minimum cap height of approximately 6-7 pixels (on screen) or 1.2mm (in print) for body text to remain legible. For users with low vision, the cap height should be significantly larger. The relationship between cap height and x-height (called the cap-to-x ratio) also affects readability: fonts with higher x-heights relative to cap height are generally more readable at small sizes. This is why fonts like Verdana (high x-height) are recommended for screen readability. Understanding cap height helps designers choose fonts and sizes that meet accessibility needs.
How do variable fonts handle cap height?
Variable fonts contain multiple axes of variation, and some include an optical size axis that adjusts cap height proportions across different sizes. At smaller optical sizes, variable fonts may increase the cap-to-em ratio, making capital letters proportionally taller for better readability. At larger display sizes, they may decrease it for more elegant proportions. The CSS font-size-adjust property allows specifying a target cap-height-to-font-size ratio, causing the browser to adjust the font size to achieve the specified ratio. However, browser support varies. The proposed CSS cap unit would allow sizing elements based on cap height directly, though this is not yet widely implemented. Variable fonts represent the most sophisticated approach to maintaining optimal cap height proportions across different use cases.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐งฎArchitectural Scale Converter
Calculate architectural scale converter with inputs, formulas, and instant results.
๐งฎCeiling Height Ratio Optimizer
Calculate ceiling height ratio optimizer with inputs, formulas, and instant results.
๐งฎCmyk to Pantone Converter
Calculate cmyk to pantone converter with inputs, formulas, and instant results.
๐งฎColor Space Converter
Calculate color space converter with inputs, formulas, and instant results.
๐งฎHue to Rgb Converter
Calculate hue to rgb converter with inputs, formulas, and instant results.
๐งฎPantone to RGB Converter (with Hex Code)
Calculate pantone to rgb converter with inputs, formulas, and instant results.
๐งฎSaturation Luminance Converter
Calculate saturation luminance converter with inputs, formulas, and instant results.
๐งฎGrading Scale Converter
Calculate grading scale converter with inputs, formulas, and instant results.