Characters in Typography

X-height defines the height of all lowercase letters of a given typeface. The term borrows its name from the letter "x," which serves as a measurement unit.

The larger the x-height, the more white space the typeface leverages, and the more legible the typeface is even at small font sizes. For example, Helvetica set at 8pt still remains clear and distinct.

Cap height measures the height of capital letters of a given typeface. The most accurate measurements are taken from letters with flat bottoms, such as L, E, or M. Curved or pointed letters, like S, O, or A may slightly overshoot above the cap height to achieve an optical effect of being the same size.

A stroke is a line or a curve that helps form letters. In some letters like "w," "k," and "l," these lines are straight. In others like "c," "o," and "s," the lines curve. These lines are the main parts of any letter we write or type.^[1]

The ascender is the vertical stroke found on lowercase letters (b, d, f, h, k, l, t) that extends above the typeface's x-height or cap height.^[2] The invisible line marking the height of all ascenders in a given typeface is called the ascender line.

The descender is the part of a lowercase letter that extends below the baseline.^[3] Letters g, j, q, p, y, and sometimes f have such "tails," and the lowest parts are marked by an invisible line — the descender line.

Serifs are small decorative extensions at the beginning or end of a stroke on a letter. They are the hallmarks of serif typefaces — the oldest typefaces originally popularized by early print magazines. The most popular serif typefaces are Times New Roman, Georgia, and Baskerville.

Serif typefaces create a feeling of sophistication, trust, and world-class quality. The New York Times, Huffington Post, Dior, and Burberry use serif typefaces for their brands.

Kerning is the adjustment of spacing between individual characters, usually to achieve a visually appealing result. Certain letter combinations (usually involving outward angles or large open spaces like W, Y, V, or T) have large gaps and look awkward.^[4]

Some typefaces have kerning that looks fine at small sizes but becomes unbalanced and difficult to read when enlarged for headlines. That happens because many free (and even low-cost) typefaces have little or no built-in kerning and demand manual adjustments.

Tracking adjusts the overall spacing between letters. Increased tracking makes the text feel more spacious and sometimes can be used to emphasize a word, especially in tandem with caps or small caps. Like kerning, tracking is commonly applied to headlines and logos to diminish weird gaps in large-scale text.

White text on a black background is usually perceived as more legible when it has increased tracking applied.

The invisible horizontal line that all letters sit on is called the baseline. Everything below the baseline is a descender.

The baseline defines the bottom of each letter's x-height and plays an important role in measuring the vertical distance between text and an element.^[5]

Weight refers to the overall visual heaviness or lightness of a typeface, determined by the thickness of the character outlines relative to their height and structure.

A common typeface may have 3 to 6 weights and include variations such as light, regular, medium, and bold.

In CSS, web designers use numerical values to define the font-weight property: 100 — thin, 400 — normal or regular, 700 — bold, and 900 — black or heavy.

Tabular figures, aka monospaced numbers, refer to the spacing of figures where they all take up the same horizontal space. As a result, the numeral "1111" takes up as much space as "9999."

Designers should use tabular figures in tables within annual reports, price lists, financial statements, invoices, and other columns of figures where values change constantly and may look offset.^[6] With tabular figures, users can scan and compare numerical data easily.

Proportional or non-lining figures have varying widths, which results in more even, balanced spacing. Designers should use proportional figures for numbers inside of headlines, subheads, or any other copy where it should blend into text context and doesn't need to be vertically aligned with other numbers.

In typography, a ligature is a combination of two or more graphemes or letters joined into a single glyph. The most common ligatures, like fi, fl, and ff, involve the lowercase f because of its overhanging shape. Another famous ligature is an ampersand (&), representing a combination of the old handwritten Latin letters e and t from the word et, meaning "and."

Depending on their role in the text, ligatures can be broken down into 4 types:

• Standard: Ligatures like fi, fl, ff, ffi, ffl, and ft exist in order to increase legibility and make this collision of letters more attractive.
• Discretionary: Those ligatures may include ct, fs, st, sp and serve a decorative function, creating a more old-fashioned look.
• Unusual or Uncommon: May include standard and discretionary ligatures that are rarely encountered in text, like fj, fk, or ij.
• Long s: These are usually discretionary ligatures involving a long s combined with h, l, i, or t.^[7]