Baseline Shift Calculator

Baseline shift moves a glyph vertically away from the baseline the rest of the line sits on, without altering the line box that governs how surrounding text flows. The measurement is anchored to the font's own metric lines: the baseline at zero, the x-height at roughly 0.48 to 0.55 of the em, the cap height at roughly 0.66 to 0.74, and the descender about 0.20 below. Because those metrics scale with type size, a shift expressed in em or percent stays proportionally correct when the type is resized, while a shift fixed in pixels does not. Working values are small: a superior figure is usually raised about 0.33 to 0.45 of the cap height and reduced to roughly 58 to 70 percent of the body size, and an inferior figure drops about 0.15 to 0.25 of the cap height. The calculator assumes the cap-height and x-height ratios you enter actually match the font in use. Those ratios differ enough between families - Times New Roman near 0.662, Verdana near 0.735 - that a shift computed for one face looks wrong in another. A second limit is layout side effects: a glyph raised past the half-leading zone, equal to (line-height minus font-size) divided by 2, can collide with the line above, and a 16px face at line-height 1.5 leaves only 4px of clearance on each side. CSS also has no true baseline-shift property for HTML text, so vertical-align with a length, a relative top offset, and translateY each approximate it with different consequences for reflow and line-box height.

The baseline is a legacy of metal type, where every sort was cast on a body with fixed alignment so letters from one fount lined up mechanically. Superior and inferior figures were cast as separate sorts on that same body, which is why a compositor could not shift them freely - the vertical position was decided at the foundry. Phototypesetting in the 1950s and 1960s removed the constraint, because characters were projected optically onto film and could be placed at any continuous position rather than at cast increments. Baseline shift became an explicit numeric control with desktop publishing. Adobe PostScript, released in 1984, described glyph placement in a coordinate space where the baseline is simply y equals zero, making arbitrary vertical offsets trivial to express. Page-layout programs exposed the idea as a per-character attribute measured in points, and Adobe InDesign still offers keyboard increments for nudging a character up or down. On the web the concept arrived through SVG rather than HTML: the SVG 1.1 specification, a W3C Recommendation in 2003, defines a baseline-shift property accepting sub, super, a percentage, or a length. HTML text never received an equivalent, so authors approximate it with vertical-align, and font-metric libraries emerged later to compute offsets directly from the values stored in a font's OpenType OS/2 table.