A guide to the basics of typography on the web.

Each and every letter we read is considered as part of the design of that typeface. Typography is the practice of arranging type to make written language legible, readable, and appealing when displayed. Getting it right is both an art and a science, and like so many other well designed things will gradually become practically invisible the better it is. In this blog post we'll explore the basics of using typography on the web.

A delightful way to appreciate a typeface is through a pangram – a sentence that contains all the letters in the English language."The quick brown fox jumps over the lazy dog" is probably the most famous, but there are also "Pack my box with five dozen liquor jugs" and "A wizard's job is to vex chumps quickly in fog". "Watch "Jeopardy!", Alex Trebek's fun TV quiz game." is even a panagram!

Type Units

The measurements you use every day— such as inches and feet or centimeters— are fixed, or absolute, measurements. That is, an inch is always an inch and a meter is always a meter. Sizing text requires a more fluid set of measurements. Type has its own set of standard units, which are the pica and its subdivision, the point. The height of type is measured in points, and the width of a letter or a line of type is measured in picas.

Absolute measurements

10mm

Millimeters

Millimeters (mm) are fixed units.

1cm

Centimeters

Centimeters (cm) are also fixed units.
1 cm = 10mm.

1 Inch

Inches

Inches (in) are here too.
1 inch = 2.54c

Relative measurements

100 px

Pixels

Plain ol' pixels

100 pt

Point

1 point = 1/72 inch

10 pc

Pica

1pc/pica = 12pt

The fundamental relative unit in typography is the em. An em is the same size as the type currently being set, so if you’re setting 11-point type, an em equals 11 points. Despite the sound of its name, an em is not the width of an M; in fact, an M is rarely a full em wide.

3 em

em

✨ em units are related to the font size of their parent element.

6 rem

rem

rem units are similar to em units, except they are relative to the document's root font size.

The ex unit is useful when you want to size something in relation to the height of your text's lowercase letters.

5 ex

1 ex is the x-height of a font
(x-height is usually about half of the font‑size)

5 vw

vw

1vw = 1% width of the viewport. This will actually scale when we resize the window. Cool, huh?

15 vh

vh

1vh = The same as vw, but it takes 1% of the height of the viewport.

50%

%

% units take a percentage value of their parent element.

Glossary of type terms

  • Alignment: result of lining up letters to a reference such as a margin

  • Aperture: white space at the end of an open counter

  • Apex: the top point where two strokes are joined together

  • Arm: when a horizontal stroke is not attached to a stem on one end

  • Ascender: the stem of a lowercase letter projecting above the x-height.

  • Backslanted: italics leaning backward

  • Ball Terminal: ball-shape extension of a letter

  • Baseline: the imaginary line upon which a line of text rests.

  • Bold: a heavy weight of any given typeface, often used for emphasis.

  • Bowl: the generally round or elliptical forms which are the basic body shape of letters such as C, G, O in the uppercase, and b, c, e, o, p in the lowercase.

  • Bracket: a curved connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.

  • Calligraphy: the art of writing letters with a very specific tool (e.g., broad nib pen, brush pen, etc.)

  • Cap Height: the height of capital letters, measured from baseline to the top of the capital letter. It is based on letters that are flat on the top and bottom, such as an H or an E. Capital letters with curves, such as B, C, D, G, O, Q, and S extended slightly above and below the cap height to appear optically similar in size to other letters.

  • Center aligned: when text is aligned to the center of a text frame, with the rag on the left and right sides of the text frame

    “Rag” is the white space left at the end of a left justified line of text. Too much rag can create a sense of visual misalignment and hinder the readability and visual appeal of your design.

  • Character: a letter, number, punctuation mark or symbol

  • Character Set: entire collection of characters for any given typeface weight

  • Counter: the white space enclosed by a letterform, whether wholly enclosed, as in ‘d’ or ‘o’, or partially, as in ‘c’ or a double-story ‘a’.

  • Crossbar: a stroke across a stem (as in the horizontal line of the letter ‘T’, ‘H’, ‘E’, etc.)

  • Descender: the stem of a lowercase letter that extended below the baseline, such as the g, j, p, q, and y.

  • Ear: the stroke attached to the bowl of the lowercase g. Some typographers use the same term for the lowercase r.

  • Ellipsis: character composed of three dots.

  • Grid: imaginary or actual layout of vertical and horizontal lines for alignment

  • Descender: when part of a letter drops below the baseline

  • Display: a category of typefaces that is primarily used for headlines and subheads due to their heavy weight and/or detailed nature

  • Font Color: used in web design to specify a color

  • Font Size: the height of a typeface. It is usually measured in points (8, 10, 12, etc.), from baseline to baseline.

  • Font Weight: font thickness (light, regular, medium, bold)

  • Hook: curved arch (such as on the letter ‘f’)

  • Hand-lettering: creating custom letters from scratch for a specific purpose/client.

  • Italics: forward-slanting characters, developed in early 1500s

  • Joint: stroke connects with a stem

  • Justified: instances when text is aligned to the left and right margin within a text frame, with no rag on either side

  • Kerning: the space between individual pairs of characters.

  • Leading: the horizontal space between two lines of text that is measured from baseline to baseline. In some cases, it may be referred to as ‘line height’.

  • Left-aligned: text is aligned with the left margin

  • Leg: short stroke in a downward direction

  • Ligature: occurs where two or more letters are joined together as one character.

  • Link: the stroke connecting the bowl and the loop of the lowercase g.

  • Lowercase: lowercase characters are the non-capital letters of the alphabet. They make up the bulk of written text, with uppercase or capital letters used primarily only to start sentences or proper names. The term lowercase is derived from the days of metal type where the more frequently used letters were kept near at hand in the lower case while the less frequently used capital letters were kept in the harder to reach upper case.

  • Monospaced: an example of a typeface where each character is the same width

  • Orphan: a single word that appears at the beginning of a page.

  • Point size: the distance from the top of the highest ascender to the bottom of the lowest descender is the point size of any given typeface. Originally, this was the height of the face of the metal block on which each individual letter was cast.

  • Rag: the uneven vertical edge of a block of type. Could be on the left side, right side, or both.

  • Readability: degree to which text can easily be read

  • Right-aligned: when text is aligned to the right margin with the rag on the left side of the text frame

  • Sans Serif: no extension of strokes on characters

  • Serif: a stroke drawn at right angle or obliquely across the arm, stem, or tail of a letter. It is found on vertical and horizontal strokes of some characters. Serifs can also fall into different categories, such as slab or hairline, among others.

  • Shoulder: curved stroke connected to a stem

  • Stem: A vertical stroke in a letterform. Can be found in both lowercase and uppercase letters.

  • Stress: diagonal or vertical change in stroke width across a letter

  • Stroke: any linear feature on a letter

  • Swash: addition of a decorative stroke

  • System Font: main font used by a computer operating system

  • Terminal: any stroke which does not terminate in a serif is a terminal. It can be either straight or curved.

  • Tracking: the amount of space between all letters across a line of text. It is also referred to as letter spacing.

  • Type Classification: type of characters based on style

  • Type Properties: qualities that allow characters to fit on a grid

  • Typeface design: the process of creating a complete set of characters in a specific style. This could include uppercase & lowercase characters, mathematical symbols, punctuation, numerals, etc.

  • Type size: the distance from the top of the highest ascender to the bottom of the lowest descender. It is usually measured in points.

  • Typesetting: the process of laying out large amounts of text (e.g., a book, a magazine, etc.) and making sure it’s legible and readable

  • Uppercase: uppercase characters are the capital letters of the alphabet. Uppercase letters are normally used at the beginning of sentences and as the first letter of proper names. The term uppercase is derived from the days of metal type where the lesser used capital letters were kept in the harder to reach upper case while the more frequently used letters were kept nearer at hand, in the lower case.

  • Vertex: the bottom point where two strokes are joined together

  • Widow: one word on its own line at the end of a paragraph or a column.

  • X-Height: the height of lowercase letters in any given typeface. The measurement is based off the height of the letter ‘x’. Lowercase letters with curves (such as a, c, e, o, s, u, and others) usually extend slight below and above the x-height, to appear optically similar in size to other letters

Font families

This website uses three fonts: Playfair Display SC for titles, Lora for body text, and Montserrat for interface labels. Below is a closeup look at Playfair Display SC.

abcde fghijk lmnop qrstu vwxyz