I’m a front-end developer. Why should I want to devote time and energy to the study of typography? Well, to best answer that question, you need to have an understanding of what typography is.

Typography is the stylistic component to the written word. In our modern use of it (on the web) it’s tied to the css or sass rules that we apply to style our content.

In this first post, I’ll outline some of the terms used in typography and explain what they mean. This will enable us to talk about typography in a clear and understandable way.

(Full Disclosure: I’m a typography newbie, I’ll be writing about these concepts as I learn about and understand them.)

Baseline

The baseline is the line on which the letters rest. Only decenders drop below the baseline.

Midline

The midline is the line that runs through the middle of the characters. It is where the lower case characters come up to.

Topline

The topline is the highest line, as defined by the em box. There is a similar line, called the Cap height, which denotes where the capital letters come up to, but is not necessarily the same height as the topline.

Beardline

The beardline is the lowest line, and where the descenders of the lower-case characters come down to.

Line Height

The line height is the distance between the baseline and the topline (the point that acenders reach up to)

X-Height

Xheight is the distance between the baseline and the line that the lowercase characters (excluding acenders) come up to.

Ascender

An acender is a piece of a lower-case character that extends above the midline, up to the topline.

Descender

A Descender is a piece of a lower-case character that extends below the baseline, down to the beardline.

Stroke

Stroke describes the type, weight and quality of the pieces of a character.

Terminal

A Terminal is where the stroke ends on a character. A character can have many terminals.

Measure

The measure is the length of each line of characters in a block of text.

There are a lot more terms to be aware of in typography, but this is a good list to get started with.