Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

Behind the scenes

Changing cap height, x-height and descenders in Font by Zaweba

Font metrics in Font by Zaweba set the ascender, cap height, x-height and descender on a 1000 unit em, stretching letters zone by zone so curves keep overshoot.

Changing cap height, x-height and descenders in Font by Zaweba

Every font is built on a set of invisible lines. The baseline is where letters sit. The x-height is the top of lowercase letters like x, a and n. The cap height is the top of capitals. The ascender is where tall lowercase letters such as b, d and h reach, and the descender is how far letters like g, p and y drop below the line. These lines are the font's metrics, and they shape its character as much as any slider.

Font by Zaweba lets you change the ascender, cap height, x-height and descender. Measurements are in font units, with 1000 units to the em, which is the standard way fonts measure their own size.

Why x-height matters most

Of the four, x-height usually makes the biggest difference. Most of the letters in ordinary text are lowercase, and most of them sit within the x-height. A tall x-height makes lowercase letters look bigger at the same point size, which helps readability at small sizes and on screens. That's why many modern text fonts have generous x-heights.

A small x-height gives lowercase letters longer ascenders and descenders in proportion, which looks elegant and traditional. It also makes text look smaller at the same size, so a font with a small x-height may need setting larger to read comfortably.

Cap height, ascenders and descenders

Cap height decides how tall capitals are relative to lowercase. Capitals that are close to the ascender height look strong and formal. Capitals a little shorter than the ascenders blend more quietly into running text.

Ascenders and descenders affect how much room a font needs between lines. Long ones give a font an airy, refined look but need more line spacing so that a descender on one line doesn't touch an ascender below. Short ones pack lines tighter, which can be useful for display work and signs.

How Font changes the letters

Changing a metric isn't a simple stretch of the whole letter. The base glyphs stretch zone by zone. The part of a letter between baseline and x-height is adjusted for the x-height, the part above for the ascender or cap height, and the part below the baseline for the descender. A raised x-height makes the bowl of a b taller without stretching its ascender out of proportion.

There's a detail type designers care about here: overshoot. Round letters like o and O are drawn very slightly taller and deeper than flat letters, because a curve that only touched the line would look too small. Font keeps that overshoot when it stretches the zones, so round letters still look the same height as straight ones after you change the metrics.

Getting good results

Change metrics early. They affect every letter and they change how other operations look. Serifs, rounding and spacing all interact with letter proportions, so it's easier to settle metrics first and then style on top.

Make moderate changes and judge them in the live preview. Use real text, and look at both the waterfall and lines. A raised x-height that helps at 12 can make headlines look chunky at 200. Look at the gap between lines in lines mode after changing ascenders and descenders.

Check letters with the most going on in each zone: g and y for descenders, b, d, f and k for ascenders, and a, e and s for the x-height. The glyphs grid, filtered to Lowercase, shows them all at once.

Where metrics fit

Metrics are part of the font settings, alongside the family name, designer, version, copyright and licence written into the font files. They describe the font itself rather than any one style, so the four-style family you export shares them. That consistency is what lets your Regular, Bold, Italic and Bold Italic sit happily together on the same line.

Metrics are one of the less visible settings in Font by Zaweba and among the most powerful. A few changes here can turn the same alphabet from bookish to modern without touching a single slider in the style stack.