Typography

A typeface is a collection of letters. While each letter is unique, certain shapes are shared across letters. A typeface represents shared patterns across a collection of letters.

Typefaces that are selected for their style, legibility, and readability are most effective when following the fundamental principles of typographic design.

Baseline

The baseline is the invisible line upon which a line of text rests. In Material Design, the baseline is an important specification in measuring the vertical distance between text and an element.

4dp grid

Type aligns to the 4dp baseline grid.

Measurement from the baseline

Specify distances from UI elements from the baseline. Baseline values are software-agnostic, so they work in any design program, and work with the grid. On Android and iOS, code can be translated from baseline-relative specs into padding. For the web, automate the calculation using Sass or CSS.

---

Cap height

Cap height refers to the height of a typeface’s flat capital letters (such as M or I) measured from the baseline. Round and pointed capital letters, such as S and A, are optically adjusted by being drawn with a slight overshoot above the cap height to achieve the effect of being the same size. Every typeface has a unique cap height.

---

X-height

X-height refers to the height of the lowercase x for a typeface, and it indicates how tall or short each glyph in a typeface will be.

Typefaces with tall x-heights have better legibility at small font sizes, as the white space within each letter is more legible.

---

Ascenders and descenders

Ascenders are an upward vertical stroke found in certain lowercase letters that extend beyond either the cap height or baseline. Descenders are the downward vertical stroke in these letters. In some cases, a collision between these strokes can occur when the line height (the vertical distance between baselines) is too tight.

---

Weight

Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights; and four to six weights is a typical number available for a typeface.

Type classification

Serif

A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter. Typefaces with serifs are called serif typefaces. Serif fonts are classified as one of the following:

Old-Style serifs resemble writing in ink, with:

• Low contrast between thick and thin strokes
• Diagonal stress in the strokes
• Slanted serifs on lower-case ascenders

Transitional serifs have:

• High contrast between thick and thin strokes
• Medium-High x-height
• Vertical stress in the strokes
• Bracketed serifs

Didone or neoclassical serifs have:

• Very high contrast between thick and thin strokes
• Vertical stress in the strokes
• “Ball” terminal strokes.

Slab serifs have:

• Heavy serifs with imperceptible differences between the stroke weight
• Minimal or no bracketing

Sans Serif

A typeface without serifs is called a sans serif typeface, from the French word “sans” that means “without.” Sans serifs can be classified as one of the following:

• Grotesque: Low contrast between thick and thin strokes, vertical or no observable stress
• Humanist: Medium contrast between thick and thin strokes, slanted stress
• Geometric: Low contrast between thick and thin strokes, with vertical stress, and circular round forms

---

Monospace

Monospace typefaces display all characters with the same width.

---

Handwriting

Handwriting typefaces are unconventional with a natural, handwritten feel. These typically are used as H1 – H6 in your type scale. They come in the following forms:

• Black letter: High contrast, narrow, with straight lines and angular curves
• Script: Replication of calligraphic styles of writing (more formal)
• Handwriting: Replication of handwriting (less formal)

---

Display

A miscellaneous category for all classification types that are only suitable for use at large point sizes. Display fonts typically are used as H1 – H6 in your type scale.

Readability

While legibility is determined by the characters in a typeface, readability refers to how easy it is to read words or blocks of text, which is affected by the style of a typeface.

Letter-spacing

Letter-spacing, also called tracking, refers to the uniform adjustment of the space between letters in a piece of text.

Larger type sizes, such as headlines, use tighter letter-spacing to improve readability and reduce space between letters.

For smaller type sizes, looser letter spacing can improve readability as more space between letters increases contrast between each letter shape. Text in all caps, even at small type sizes, has improved readability because of its added letter spacing.

Tabular figures

Use tabular figures (also known as monospaced numbers), rather than proportional digits, in tables or places where values may change often.

---

Line length

Line lengths for body text are usually between 40 to 60 characters. In areas with wider line lengths, such as desktop, longer lines that contain up to 120 characters will need an increased line height from 20sp to 24sp.

---

Line height

Line height, also known as leading, controls the amount of space between baselines in a block of text. A text’s line height is proportional to its type size.

---

Paragraph spacing

Keep paragraph spacing in the range between .75x and 1.25x of the type size.

---

Type alignment

Type alignment controls how text aligns in the space it appears. There are three type alignments:

• Left-aligned: when text is aligned to the left margin
• Right-aligned: when text is aligned to the right margin
• Centered: when text is aligned to the center of the area it is set in

Left-aligned

Left-aligned text is the most common setting for left-to-right languages such as English.

Right-aligned

Right-aligned text is the most common setting for right-to-left languages, such as Arabic and Hebrew.

Left-to-right languages can use right-aligned text, though it is best for distinguishing short typographic elements within a layout (such as side notes), and is not recommended for long copy.

Centered

Centered text is best used to distinguish short typographic elements within a layout (such as pull quotes), and is not recommended for long copy.

System fonts

System fonts come pre-installed on your computer or device. They typically have wide language support and no licensing costs for developers. Using the system default font in your app font unites the consistency of the platform with your app’s look and feel. However, because they appear in many places on devices, they may not stand out.

Using system fonts

Native system typefaces should be used for large blocks of text and any text below 14sp.

Roboto is the default system font for Android. For platforms outside of Android and web products, use a system typeface that is preferred on that platform. For example, iOS applications should use Apple’s San Francisco font.

26 Articles for Typography Lovers

Jayme Odgers: Present and Past
Steven Heller talks with the legendary Jayme Odgers about his amazing life, and his amazing work.

More Typography Lessons From the Masters
Did the legendary Aaron Burns predict the future of typography back in 1986?

10 Remarkable Shadow Type & Lettering Designs
As a salute to shadow type, we scoured the Internet for beautiful examples and struck gold.

Vintage Fonts: 35 Adverts From the Past
Here, we collect an array of type advertisements from the 1950s to the present.

Typography Inspiration from Dr. Shelley Gruendler
Meet type guru Dr. Shelley Gruendler, and dig into the beautiful work of her students.

Why Handlettering is Not Type
Paul Shaw breaks down the crucial differences between handlettering and typography.

75 Exclusive Designs for Print’s 75th Anniversary
We asked 75 top creatives to design one word: “print.” See the full set of the exclusive designs here.

Swiss Style: The Principles, the Typefaces & the Designers
Whether you notice it or not, Swiss Style is everywhere. From Ernst Keller to Mike Joyce, learn about the design movement that never stops popping up.

What We Talk About When We Talk About Type
From Abbott Miller’s TypoGraphics session: Type often has a story to tell—it becomes part of the context, style, strategy, or truth of a client’s message.

Lost Designs: Making Digital Versions of Wood Type
Richard Kegler explores the history and process of digitizing classic wood type.

An Arabic Typography Community
Tarek Atrissi’s design studio Tarek Atrissi Design takes a typographic and cross-cultural approach to all projects, including Arabic typography.

Heaven on Wood at Hamilton
Do you know what a wayzgoose is? If you were one of the geese at the Hamilton Wood Type and Printing Museum in November, you’d know without asking.

Red Type
Steven Heller saves a pamphlet by Karl Marx (on The Civil War in France) from its way to the garbage dump.

Greta Goes Arabic
Peter Bilak of Typotheque has announced the launch of TPTQ Arabic, a new type foundry dedicated to developing original high-quality Arabic typefaces.

Been There, Lubalin’s Done That!
Herb Lubalin did not invent the idea of using a type case as a framing device for typographic illustration, but he did do it long before most others.

Brooklyn In Your (Type)Face
Type designer Pablo Medina is giving Bushwick an eponymous typeface. Currently engaged in crowdfunding, his reasons dig deep into his own Latino culture.

Digital Wood at 25
Steven Heller cracks open Adobe’s 25-year-old digital wood type specimen book.

Subtleties of the Univers
Read about Adrian Fruitger’s renowned typeface Univers from this 1961 Print article.

The Essentials of Web Typography
If you want to improve everyone’s reading experience online, here are a few web typography essentials to keep in mind.

The Post-Postmodern Lettering of Daniel Pelavin
Not Retro, But Vintage: Steven Heller profiles letterer Daniel Pelavin.

Type in the Nazi State
As one sees in German type foundry adverts from design magazines after 1933, the graphics professions quickly conformed to the decrees of the Nazi party.

The Letterpress Journals: Guardians of the Craft
Erin Beckloff shares the story of her film on the survival of letterpress and the printers who preserve the history and knowledge of the craft.

The Letterpress Journals: Setting the Hook
Learn about the making of Pressing On: The Letterpress Film from filmmaker Andrew P. Quinn.

The Letterpress Journals: Funding and Friendships
The Pressing On team hits the road for the first shoot at ChicaGoose, one of the largest annual gatherings of printers.

The Letterpress Journals: Typoholic
Rick von Holdt’s shop is in the basement of his beautiful 19th-century farmhouse, where high ceilings and solid brick walls form rooms packed with type cabinets and book shelves. It’s common knowledge in the letterpress community that Rick has one of the most drool-worthy collections of wood type; he estimates around 2,000 fonts of handset type.

The Letterpress Journals: Hot Metal Junkie
The team behind Pressing On: The Letterpress Film talks with “hot metal typesetting junkie” Jim Daggs.