Introduction to web fonts and typography

A glossary of online typography terminology

As an introduction to typography for web design, we’ll introduce you to common and specific terms for web font and online typography design in this glossary. We’ll start with the general typography terminology and a range of terms expressing spacing and height. Then we’ll talk about how to adjust font sizes and spacing in web design using CSS properties, at which point we’ll also go into the use of absolute and relative units. As a general rule, the number one issue when adjusting font values should be usability, i.e. legibility and readability, to create a pleasant experience for readers or viewers. Any other effects or issues should only come into play after that, for example to brand, to complement images or content, evoke emotions or amplify your message. Neither of these is an exact science, but in terms of legibility, you’ll have an intuitive understanding of what works or “feels right”.

Glossary of the most common typography terminology

In web design, the term typography refers to how you style, format, and arrange text on screen.

Typography

Modular Scaling Of Font Size In Web Design

Font Terminology For Height And Spacing

Word-spacing

Word-spacing adjusts the average distance between two words, usually for reasons of fitting copy within a certain space or improving legibility.

You can use the relative unit Em to establish a hierarchy of text elements. In relation to the font size of the body text, these can go four or six levels deep, corresponding to the HTML elements for headlines, H1 to H6. Web design often resorts to a modular scale where the ratio for successive text elements in the hierarchy is constant. For example, with a ratio of 1.3, the next element in relation to the body text would be 1.3em.

Typeface vs. Font

Typeface classified a family of glyphs (letters, numbers, symbols, characters) to form words and numbers when presented together, hence also called a font family. Font specifies a size, weight, or style of a typeface, for example “12 pt Times New Roman”. However, in modern usage, typeface and font are nearly interchangeable terms. Especially in web design, you’ll almost exclusively come across the term web font and hardly ever web typeface, although that is often the correct connotation.

A font family: one typeface, many different fonts (source).

Common font weights: 1. Light, 2. Regular, 3. Medium, 4. Bold (source).

The heaviness of a typeface, regardless of its size, is called weight. It often refers to a style within a certain font family, such as, Thin, Regular, or Book.

Weight

Sans-Serif

Sans being French for “without”, typefaces without serifs are called sans-serif. It may refer to the general category or an individual font–a typeface can be styled as both serif and sans-serif fonts.

Three different styles of sans serifs: 1. Work Sans, grotesque sans serif, 2. Alegreya Sans, humanist sans serif, 3. Quicksand, geometric sans serif (source).

Roman

The standard style or regular weight of an upright typeface is called Roman, which contrasts with its Italic version.

Italic

A design of a typeface that slants from left to right. Italics are a redesign or interpretation of the upright Roman glyphs, not a mere tilted version. Designers draft, craft and draw Italics separately.

Character

A single element in typography is a character: a letter, a numeral, or a mark such as punctuation. The term glyph often substitutes the term character, as it is more descriptive when referring to characters of various alphabets.

Examples of characters (source).

Glyph

The smallest ‘unit’ of a font, a glyph is one representation of a character, such as a letter, number, mark, or symbol. Two different glyphs can be variations of one character, for example with a diacritical or decorative difference. The two glyphs Ń and Ñ both use the base character N.

Three different glyphs for one character (source).

Serif

Serif denotes the small stroke at the beginning or end of the main strokes of a letterform. The term also refers to the category of typefaces with serifs, i.e. a serif typeface will feature these extra strokes.

Four different styles of serifs: 1.EB Garamond, old-style serif, 2. Libre Baskerville, transitional serif, 3. Libre Bodoni, didone / neoclassical serif, 4. Bitter, slab serif (source).

With physical type, the block on which each metal character rested was called body. In digital typefaces, the term refers to the invisible area encompassed by each character. The body height is equal to the point size, whereas character width plus spacing makes up the body width.

Body

The opposite of hanging figures are lining figures, numbers that rest on the baseline and usually of the same height as capital letters.

Lining Figures

The lightest weight in a font family is referred to as hairline, but the term can also denote the thinnest stroke of an individual letter: a hairline stroke.

Hairline

Antiqua / Old Style

These typefaces were designed between the 16th and 17th century. New designs in the same style are also called Antiqua or Old Style.

Condensed

A typeface styled with proportions of a narrow width. Condensed fonts hence usually fit more characters in one line than Roman fonts.

Cursive

Cursive refers to handwriting with joined-up letters, but the term is also used for typefaces designed to look that way. Because handwriting often slants from left to right, Cursive is sometimes used alternatively for Italics.

Display Font

Display fonts are used for type larger than the body text, such as for headlines or banners.

Three different styles of display fonts: 1. Shrikhand, 2. Chewy, 3. Faster One (source).

Oblique / Slanted

A slanted typeface has been altered by mechanical shearing or digital tilting to create ‘artificial’ Italics. To note the difference, Oblique refers to a tilted Roman typeface.

The difference between a tilted font and a true Italic font (source).

Baseline

For any line of text in print or on a screen, the baseline refers to the imaginary or invisible line on which most of the characters sit; it’s literally the base for the entire line of text.

The baseline is the line on which the characters rest (source).

Axis / Stress

The invisible line which dissects a glyph at its thinnest point from top to bottom is called axis or stress.

Different types of stress in different typefaces for the letter “O” (source).

On lowercase letters, the vertical stroke extending above the x-height (the lowercase height) is called ascender, and the ascender line is the invisible line marking the height of all ascenders in a font.

Ascender Line

x-Height / Midline

This term is named after the lowercase letter “x”, since x-height denotes the height of the character x, an unextended lowercase letter. The invisible line resting on all lowercase letters in a font is the midline, so the distance between the baseline and the midline is the x-height. The exact x-height can vary between typefaces of the same size as it's usually based on the width of certain uppercase letters. Sometimes lowercase letters extend above or below the x-height even without ascenders or descenders.

The x-height defines the height of lowercase letters such as “x” (source).

Spacing

Spacing by itself refers to the horizontal space on the side of each character in a font.

Font Size And Weight Adjustments In Web Design

Line-Spacing: Leading

Line-Spacing or leading is the adjustment of spacing between lines of text from baseline to baseline.

Kerning

Kerning is the adjustment of horizontal space between certain pairs of characters to create a more uniform appearance of text. Kerning is more critical in large format typefaces, as used in headlines. For example, where a lowercase "y" follows an uppercase "T", kerning would move the "y" under the wing of th "T". Kerning therefore reduced gaps of white space only between certain character combinations. Values for kerning are usually defined by the designer of a typeface and need not be adjusted for individual web design.

Kerning adjusts the spacing for individual character pairings (source).

Letter-Spacing: Tracking

Tracking or Letter-spacing is an adjustment done in web design or typesetting. It is spacing outside the original spacing and kerning as specified by the font design, i.e. in a font file. Letter-spacing is a uniform amount of spacing added or removed between characters in a section of text, usually to improve legibility and adjust the fit of a given text.

Letter-spacing can be tighter or looser (source).

Descender Line

Similarly, the descender is the part of lowercase letters that extends below the baseline, and the descender line marks the lowest part of all descenders in a font.

The ascender and descender line of a font (source).

Cap Line / Cap Height

The height of a capital letter when measured from the baseline is the cap height, whereas the cap line is the imaginary line connecting the top of all capital letters in a font, and the ascenders (highest point) of some lowercase letters.

The cap line is the imaginary line to which capitals extend and the difference between that line and baseline is the cap height (source).

Fully hinted text vs. not hinted text (source).

Hinting is a set of data instructions for a font so that it renders clearly at variable sizes. These guidelines by the font designer achieve greater consistency and legibility in print and on displays, especially at smaller sizes. Hinting for fonts requires time and effort, but most fonts contain some form of it. Quality fonts use manual hinting instead of computer-generated hinting. Delta hinting describes additional hinting instructions added to a TrueType font, affecting only screen sizes but not printing. Delta hinting is not available for PostScript fonts and dis even more time-consuming.

Hinting

Relevant CSS Units

When designing a web project, two important typography issues will come up. The first is choosing the appropriate typefaces, the second is adjusting the font sizes for your needs. Size usually comes into play as a scale, defining a hierarchy for headlines and body text. The underlying design principle is one of guidance, gently leading the reader or viewer from one element to the next. CSS has 15 different units for sizing, but only a few of these are suitable for font design and sizing. CSS can express or define sizes in absolute or relative units. The difference is important: an absolute size will always stay the same, whereas a relative size depends on other elements on the same page. Only with relative units can you set your fonts to adjust to different circumstances such as varying screen sizes, creating a responsive design. To better understand font sizes in web design, let’s look at the “traditional” units first: point and pica. They have their origin and history in typography. For printing and in a word processor, you’ll specify font size in point, for example “12pt Times New Roman”. As a unit of measure, a point corresponds to 1/12 of a pica or 1 pixel. A pica corresponds to 12 points or pixels. The relation between these absolute units is the following: 1in = 2,54cm = 25.4mm = 72pt = 6pc CSS will accept absolute units such as inches, centimeters, and millimeters, as well as point and pica. However, due to varying screen resolutions, they might display incorrectly. Furthermore, different screens require different reading distances: you look at a mobile phone close up, yet are further away from a computer screen or a projection. What looks big on a phone screen might appear small on a computer screen. Relative units help you solve the problem of designing for various screen sizes. The most important two are px and em.

Px

Px is an absolute unit, but not related to physical centimeters or inches. In that sense, it’s sort of “magical”. CSS defines the px unit to be “small but visible”–a horizontal line 1px wide should display with sharp edges (without anti-aliasing). Sharpness depends on the device, and px is therefore not a constant length. Px comes from the CRT computer monitors in the 1990s. The smallest dot (or “pixel) one of these could display measures about 1/100th of an inch, or roughly 0.25mm. This is where the px unit comes from. Px corresponds more or less to a little more than the distance from the top of the highest letter to the bottom of the lowest letter (i.e. ascender to descender) in a font. Px is a unit to understand but not use in typography. Relative units will point to other properties that are set in px. For example, the standard font size for a browser or even a device might be set to 16px. You design can point to that in relative units. If the standard changes (because the user changes it in the browser, or the device changes), so does you design–automatically.

Em is defined as the width of the point size. In 12pt type, one em has a width of 12 points. It is therefore a relative unit. If you set a font size of 2em, it would be twice as big as the font-size of its parent element. 16px is a common default font-size for the body element, especially in desktop browsers. Using the Em unit allows you to set typographical elements in relation to font-size and other parent elements.

Em

This unit is used less often than Em, but you can use Ex in much the same way. Ex refers to the x-height of a font instead of its (total) size, like Em does. You can therefore use it to style the size of elements in relation to the height of lowercase letters in a font. Since the x-height varies between fonts, you can use Ex to adjust the size of images and align an image border with the midline, for example.

Ex

Rem

The unit Rem was introduced to further simplify styling rules. Rem refers to “root em” and is the font size of the root element of the document. While Em might change throughout the document, Rem does not.

CSS: font-size

The CSS property font-size allows you to set the size of different font elements, such as body text, headlines etc. It’s common to do this in relation to the default font-size of the body element using the relative unit Em.

CSS: line-height

The CSS property line-height controls the line height of text. It corresponds to a multiple of the defined font size. If the default font size is specified as 16px, a line-height of 1.2em would correspond to a line height of 19.2px. This is also the default line-height for most browsers. A line-height of 1.5 might provide more readability. In general, designers tend to increase line-height for thick fonts, fot fonts of a dark color, and for long-form content.

CSS: letter-spacing

To further affect legibility, you can control letter spacing with the CSS property letter-spacing. It’s also best to express this in relative Em units. Tracking or letter spacing depends on the font in use: ideally your font choice needs no adjustments at all or most sizes. Letter spacing in web font design can become an issue for very large or very small elements. Typical paragraph size is usually spaced well already. Consider reducing letter spacing for large titles of headlines, whereas adding extra space will commonly only be used as a stylistic element.

CSS: font-kerning

Kerning for specific letter pairs is already specified by quality fonts, so the CSS property font-kerning is set to normal. You can use it to adjust kerning where necessary, but values that work for one font might not be suitable for another.

The Anatomy Of Type

Anatomy Of A Typeface (source).

An example of two different scales, scaling up from 1em at a ratio of 1.5 (left) and 1.25 (right).

Font Size Scale Ratio

What we have left out of this introduction to web fonts and typography and the relevant terminology is a glossary of the anatomy of type. This is an exclusion on purpose, because other than choosing a certain typeface over another, you cannot adjust the components that make up individual characters. You can look at A Visual Guide to the Anatomy of Typography to learn the terminology for the different parts that make up individual letters or refer to this illustrated glossary of typographic terms.

You can use different ratios to see how they look and feel with your design. You can use proportions of the chosen typeface to determine your ratio, draw inspiration from existing web design examples that work well with your fonts. You multiply the ratio with the base to produce a scale of numbers in proportion to the base. You can use a modular scale calculator to automatically see examples and live results.

Old Style / Hanging Figures

Hanging figures describes numbers aligned with the lowercase glyphs and used for body text instead of numerals. These old style numbers are traditionally found on older typewriters.

Hanging figures are numbers that extend below the baseline (source).

Line-spacing examples: leading can be tighter or looser (source).

Anti-aliasing

Displaying fonts on a screen includes rasterization, that is the conversion of the font information into individual dots or pixels so they can appear on the screen. Because pixels on computer screens are essentially square or rectangular dots, any slanted or curved strokes and elements of characters will appear jagged and with a visible “stair-step” effect.

Anti-Aliasing counters this effect by adding semi-transparent pixels along the edges of characters to smooth out their appearance. This will blur the edges slightly at the cost of contrast, but when done well, anti-aliasing improves legibility. On LCD screens, anti-aliasing can use subpixel rendering for tripling the perceived display resolution. Each color component (red, green, blue) is set separately, resulting in smoother edges. As anti-aliasing requires knowledge of the display in use, it is usually set at the level of the operating system of the device.

Aliasing vs. anti-aliasing: the letter on the right appears smoother thanks to anti-aliasing (source).

Font Size Scale Base

You can use the body text size as a base. Using x-height as a base is less common. From there, you can develop a scale using a fixed ratio. If the height or width of certain images such as banners or logos is important, you could use those as a base.