Baseline Shift Calculator
Our typography & graphic design calculator teaches baseline shift step by step. Perfect for students, teachers, and self-learners.
Formula
Shift (px) = amount x font-size (for em/%) or direct px value
Baseline shift repositions text vertically from its normal baseline. Conversion: px = em x font-size, em = px / font-size, % = (px / font-size) x 100, rem = px / 16. Superscript shift is typically cap-height x 0.33-0.45. Subscript shift is cap-height x 0.15-0.25 downward.
Worked Examples
Example 1: Positioning a Trademark Symbol
Problem: Place a trademark symbol (TM) as superscript for a brand name set in 24px with cap height ratio of 0.72.
Solution: Cap height = 24 x 0.72 = 17.28px\nSuperscript shift = cap height x 0.40 = 6.91px\nTM font size = 24 x 0.60 = 14.4px\nShift in em = 6.91 / 24 = 0.288em\nCSS: vertical-align: 0.288em; font-size: 0.6em
Result: Shift: 6.91px (0.288em) upward | TM size: 14.4px (60% of body)
Example 2: Vertically Centering an Inline Icon
Problem: A 20px icon needs to be optically centered alongside 16px body text with line-height 1.5 and cap height ratio 0.72.
Solution: Line height = 16 x 1.5 = 24px\nCap height = 16 x 0.72 = 11.52px\nIcon center should align with cap height center: 11.52 / 2 = 5.76px\nIcon center from baseline = 20 / 2 = 10px\nShift = 5.76 - 10 = -4.24px (shift down 4.24px)\nCSS: vertical-align: -4.24px
Result: Shift: -4.24px (downward) to optically center 20px icon with 16px text
Frequently Asked Questions
What is baseline shift in typography and when is it used?
Baseline shift moves a character or group of characters vertically from its normal baseline position, either upward (positive shift) or downward (negative shift). It is commonly used for creating superscript and subscript text, adjusting the vertical position of inline icons or images, correcting optical alignment issues between different fonts or font sizes in the same line, and positioning special characters like trademark symbols or footnote markers. Unlike the CSS vertical-align property which changes alignment within the line box, baseline shift literally repositions the glyph while maintaining its relationship to surrounding text metrics. Professional typographers use baseline shift for fine optical adjustments that automated superscript and subscript features cannot achieve.
How is baseline shift different from vertical alignment?
Baseline shift and vertical alignment serve different purposes despite both affecting vertical positioning. Vertical alignment (CSS vertical-align) changes how an inline element aligns within its line box relative to the parent baseline, but it can also affect the line box height. Baseline shift moves the actual baseline of the text without changing the line box dimensions, meaning it does not affect the layout of surrounding elements. In design applications like Adobe InDesign or Illustrator, baseline shift is an explicit character attribute measured in points or percentages. In CSS, the closest equivalent is using position: relative with a top offset, or the vertical-align property with specific length values, though neither perfectly replicates the behavior.
What is the relationship between baseline shift and font metrics?
Font metrics define the key measurement lines in typography: the baseline (where most letters sit), the cap height (top of capital letters), the x-height (top of lowercase letters like x), the ascender line (top of tall lowercase letters like b and d), and the descender line (bottom of letters like g and p). Baseline shift is measured relative to the baseline. When shifting text up by the cap height amount, the new baseline sits at the original cap height. Understanding these metrics is crucial for calculating precise shifts. For example, to optically center text vertically, you need to account for the cap height and x-height, not just the overall font size, because different fonts have vastly different proportions.
How do you calculate baseline shift for superscript and subscript?
Traditional typography positions superscripts approximately one-third to one-half of the cap height above the baseline, and subscripts approximately one-fifth to one-quarter of the cap height below the baseline. The exact values depend on the font and context. A common formula for superscript shift is cap height times 0.33 to 0.45, and for subscript shift is cap height times 0.15 to 0.25 (negative). Superscript and subscript text is typically also reduced in size to about 58-70% of the body text size. In CSS, the sup and sub elements apply browser-default shifts, but these are often too aggressive for professional typography. Custom baseline shift values with appropriately scaled font sizes produce more refined results.
How does baseline shift work in CSS?
CSS does not have a direct baseline-shift property for text elements (it exists for SVG text). For HTML, vertical positioning can be achieved through several approaches. Using vertical-align with a length value (e.g., vertical-align: 3px) shifts the element relative to its parent baseline. Using position: relative with top moves the element visually without affecting layout. The CSS properties sub and super for vertical-align apply predefined shifts. For SVG text, the baseline-shift property accepts values like sub, super, percentage, or length values directly. Transform translateY can also shift text vertically but does not affect text flow. Each approach has different implications for line height, layout reflow, and accessibility.
What are best practices for optical alignment using baseline shift?
Optical alignment requires adjusting positions so elements appear aligned to the human eye rather than being mathematically centered. Rounded glyphs like O and C typically extend slightly below the baseline and above the cap height (called overshoot), which is already built into well-designed fonts. When mixing fonts of different sizes on the same line, their baselines should align by default, but cap heights and x-heights will differ, requiring baseline shift to achieve optical centering. When placing icons inline with text, shifting them down by approximately (cap height minus icon height) divided by 2 often produces the best visual result. Always verify optical alignment by visual inspection rather than relying solely on calculated values.