CSS Typographic Initiatives

Glossary

Shared definitions are important to adequate communication. Typographic terms are often confusing or hold different definitions in different organizations. This is aimed to help clarify what words mean in the context of this documentation.

You can also find excellent references with The Typographic Desk Reference by Theo Rosendorf and Practical Typography by Matthew Butterick.


Baseline

The lower boundary on which text that is written horizontally sits. Some glyphs may be drawn below this line, and these instances are called “descenders”. All Latin uppercase characters are drawn on and above this line.

Block

The dimension that runs perpendicular to the flow of text. For Latinic languages, block is the vertical dimension.

Em

A unit of measurement equal to the font size. Note that this unit might correlate with, but has nothing to do with the width of the “M”.

Font

An artifact that enables replication and use of artwork or glyphs from a typeface. A font can be a WOFF2 or TTF file, a photographic disc, or cast in metal.

Font size

The total height of the design space allotted to a glyph. This is most easily visible with metal or wood fonts where the letters exist on a physical block of a specific height. The anatomy of a digital font is similar, but this design space can be scaled up or down to suit the design needs.

Glyph

A singular drawing of a character, letter, punctuation, emoji, or mark that is part of a typeface.

Inline

The dimension that runs parallel to the flow of text. For Latinic languages, inline is the horizontal dimension.

Italic

A style of typeface that is usually drawn with a slant and has notably more cursive stylings for the a(a), g(g), and e(e) letterforms. It was originally designed by Aldus Manutius in Venice Italy to print smaller books.

Leading

The space between lines of text. On the web, half of this space is placed above and half below the text. With lead type, strips of lead were placed between each line of text to add space, hence the term “leading”.

Note: Some software refers to line height as “leading”. This is not the definition used in this documentation.

Line height

The sum of the font size and spacing between lines or leading.

Line length

The inline dimension of text.

Also referred to as “measure”.

Metrics

The various guides within a digital font file indicating the inline size of glyphs as well as the vertical dimensions like baseline, cap-height, and x-height.

Optical size

The design of a typeface may change as it is displayed large or small. For example, the x-height may increase in smaller text and contrast may reduce. This happens fluidly and automatically within variable fonts with this feature. With metal fonts, these different design characteristics are cast in the the metal of different sizes of the typeface.

Slant

How slanted the letterforms are. This usually relates to the degrees away from 90°. This is different from italics, which are drawn differently.

A font that has a slant without italic letterforms is called an “oblique”.

Text

The raw material that is written content. This does not refer to the typesetting, typeface used, nor any other aspect of its styling.

Type design

The practice of drawing glyphs that are part of a collection or typeface.

Typeface

A cohesive collection of forms known as glyphs that can be re-ordered to convey meaning. The artifact or embodiment of a typeface is called a font.

Typesetting

Mostly synonymous with typography, but is focused on the systematic styling of text as opposed to unique and expressive styling for specific glyphs, words, or phrases.

Typography

The use and application of a typeface in a design.

Responsive web design

A website containing percent based grids, percent based media, and styles for various screen sizes. The term was coined by Ethan Marcotte.

Variable font

A font that contains information enabling it to interpolate it’s form along one or multiple axis. The axis may include weight, slant, optical size, width, or any number of arbitrary axis. Variable fonts may be authored with multiple masters, parameters, or higher level interpolation.

The official name is “OpenType Font Variations”

Weight

The average width and height of strokes of a glyph. This value is subjective and refers to the visual weight text has.

Width

This is referred to as font-stretch in CSS. It’s an arbitrary scale that defines how wide or narrow the glyphs are in a font. A narrow width is often called “compressed”, “condensed”, or “narrow” while a wide width is often called “expanded”, “extended”, or “wide”.

X-height

The general height of the lowercase characters. This is represented as a guideline in the metrics of the digital font file itself.