What is the history of typography from Gutenberg to the web?

The history of typography in the West is usually traced from Johannes Gutenberg, who developed a practical system of movable metal type in Mainz around 1450 and printed his famous Bible by about 1455. Over the next five centuries, type moved from blackletter to Venetian roman and italic, then through the refined styles of Garamond, Caslon, Baskerville and Bodoni, and into the bold display faces and sans-serifs of the industrial age. Hot metal machines in the late nineteenth century, phototypesetting in the mid twentieth and desktop publishing in the 1980s each changed who could set type and how. The web began with only the fonts installed on readers' computers, and after years of workarounds, @font-face, the WOFF format and services like Google Fonts made custom typography a normal part of web design in the 2010s.

Knowing this history isn't just trivia. Many of the conventions you use daily, such as italic for emphasis, the classification names serif and sans-serif, the word leading for line spacing and the default font stacks in your CSS, come straight from it. In this article you'll learn the key periods in typographic history, the technologies and typefaces that defined them, and how each one shaped the way we set type on screens today.

Before Gutenberg

Printing with movable type didn't begin in Europe. In China, Bi Sheng created movable type from baked clay in the eleventh century, as described by the scholar Shen Kuo. Korean printers used cast metal type by the thirteenth and fourteenth centuries, and the Buddhist text known as Jikji, printed in 1377, is the oldest surviving book printed with movable metal type.

In Europe before printing, books were copied by hand, mostly by scribes. The dominant script in northern Europe was a dense, angular style now called blackletter, or textura. In Italy, humanist scholars revived a rounder, more open hand based on Carolingian minuscule, which they believed to be classical. Those two traditions would shape the first printed typefaces.

Gutenberg and the Printing Revolution (c. 1450)

Gutenberg's contribution was a complete system rather than a single invention. It combined:

• A hand mould: Used to cast large numbers of identical letters in a lead-based alloy.
• Punches and matrices: Steel punches engraved with each character were struck into softer copper to make matrices, which formed the face of each piece of type.
• Oil-based ink: Thick enough to stick to metal type.
• An adapted screw press: Based on the presses used for wine and paper.

His 42-line Bible used a textura typeface with hundreds of characters, including ligatures and abbreviations, to imitate the look of manuscript books. Printing spread rapidly. By 1500, presses were operating in well over two hundred European towns.

The terms many web designers still use come from this world. Capital and lowercase letters were stored in separate cases, the upper and lower case. Strips of lead placed between lines of type to space them out gave us leading, which is why CSS's line-height is still described that way. For more on that, see what leading is and what line height you should use.

From Venetian Roman to Bodoni (1470 to 1800)

Venice and the First Romans and Italics

Italian printers rejected blackletter in favour of the humanist hand. In Venice, Nicolas Jenson's roman type of 1470 is often cited as one of the first fully mature roman typefaces, with even colour and well-proportioned letters.

A few decades later, Aldus Manutius and his punchcutter Francesco Griffo made two major contributions:

• A refined roman: Used in Pietro Bembo's De Aetna in 1495 to 1496. The twentieth-century typeface Bembo is based on it.
• The first italic type: Around 1500 to 1501, based on fast humanist handwriting. It was compact and let Aldus print small, portable books.

These Venetian and Aldine types are the ancestors of most serif typefaces you use today.

The Age of Refinement

Over the next three centuries, roman type became more regular, with greater contrast between thick and thin strokes.

• Claude Garamond (France, sixteenth century): His romans, based on the Aldine model, became hugely influential. Many modern typefaces called Garamond draw on his work or on later types by Jean Jannon that were once misattributed to him.
• William Caslon (England, 1720s onwards): His robust, practical types became the standard in Britain and its colonies.
• John Baskerville (England, 1750s): Increased stroke contrast and used smoother paper and blacker ink. His style is now called transitional.
• Firmin Didot (France) and Giambattista Bodoni (Italy), late eighteenth century: Pushed contrast to extremes, with hairline serifs and strong vertical stress. These are Didone or modern faces.

You can see this progression on the web using fonts available on Google Fonts, all based on these historical models:

<p style="font-family: 'EB Garamond', serif;">Garamond style (old-style)</p>
<p style="font-family: 'Libre Caslon Text', serif;">Caslon style (old-style)</p>
<p style="font-family: 'Libre Baskerville', serif;">Baskerville style (transitional)</p>
<p style="font-family: 'Bodoni Moda', serif;">Bodoni style (Didone)</p>

<link
  href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Libre+Caslon+Text&family=Libre+Baskerville&family=Bodoni+Moda&display=swap"
  rel="stylesheet">

The Industrial Age (1800 to 1900)

The Industrial Revolution created a demand for posters, handbills and advertising that had to be seen from across a street. Type founders responded with new styles designed to shout:

• Fat faces: Extremely heavy versions of Didone types.
• Slab serifs: Known at the time as Egyptians, with thick, block-like serifs. Vincent Figgins showed early examples in the 1810s.
• Sans-serifs: William Caslon IV's foundry showed a sans-serif capital typeface in 1816, often cited as the first. Early sans-serifs were called grotesques or gothics, partly because they looked crude to readers of the time.
• Wood type: Large letters cut in wood were cheaper and lighter than metal for big posters.

Mechanisation also transformed text setting. Until the 1880s, every letter of a book was still set by hand. The Linotype machine, invented by Ottmar Mergenthaler and introduced in 1886, let an operator type on a keyboard while the machine cast entire lines of type as single slugs. The Monotype system, developed by Tolbert Lanston around the same time, cast individual letters. These hot metal machines made newspapers and books far faster and cheaper to produce.

Modernism and the Twentieth Century

The early twentieth century brought type designed with a clear modern philosophy.

• Johnston (1916): Edward Johnston's sans-serif for the London Underground, a model of clear signage type.
• Futura (1927): Paul Renner's geometric sans-serif, built from circles, triangles and squares.
• Gill Sans (1928): Eric Gill's humanist sans-serif, influenced by Johnston.
• Times New Roman (1932): Designed for The Times newspaper under Stanley Morison, to be economical and readable in narrow columns.
• Helvetica and Univers (1957): Helvetica, originally Neue Haas Grotesk, by Max Miedinger and Eduard Hoffmann, and Univers by Adrian Frutiger. Both came to define the International Typographic Style.

Phototypesetting

From the 1950s, phototypesetting replaced metal. Characters were stored as images on film or glass and projected onto photographic paper. Type became cheaper to produce and easier to scale, kerning could be tightened beyond what metal allowed, and many new typefaces appeared. Fashion for very tight letter spacing in 1970s advertising owes a lot to this technology.

Digital Type and Desktop Publishing (1980s and 1990s)

Digital type started on expensive dedicated systems, but the mid 1980s put it on the desktop:

1. PostScript (1984): Adobe's page description language described type as scalable outlines, so one font could print at any size.
2. Apple Macintosh (1984) and LaserWriter (1985): Brought a graphical interface, proportional screen fonts and PostScript printing to ordinary offices.
3. Aldus PageMaker (1985): Made page layout possible on a personal computer, giving rise to the term desktop publishing.
4. TrueType (1991): Developed by Apple and adopted by Microsoft, an outline format built into the operating system.
5. OpenType (1990s): A joint Microsoft and Adobe format that unified PostScript and TrueType outlines and added advanced features such as ligatures, small caps and alternate figures.

Suddenly anyone could choose typefaces, which led to both a creative boom and a lot of badly set documents.

Typography on the Early Web (1990s to 2000s)

The first web pages had almost no typographic control. Browsers displayed text in whatever default font the reader had chosen. HTML gained a font element with a face attribute, and CSS arrived in 1996 with the font-family property, but both could only use fonts installed on the reader's computer.

Core Fonts and Web-Safe Stacks

In 1996, Microsoft released its Core fonts for the Web, including Arial, Georgia, Verdana, Trebuchet MS, Times New Roman, Courier New and Comic Sans MS, free for anyone to install. Verdana and Georgia were designed by Matthew Carter specifically for screen legibility at small sizes. These fonts were so widely installed that designers relied on them for over a decade, and font stacks like this one became standard:

body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.ui {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

Workarounds

Designers who wanted other fonts used workarounds:

• Text as images: Headings exported as GIFs, which couldn't be selected, searched or resized well.
• sIFR: Replaced headings with Flash movies that rendered a custom font.
• Cufón and similar tools: Converted fonts into vector data drawn with JavaScript and canvas or VML.

The Return of @font-face

The @font-face rule was in the CSS2 specification of 1998, and Internet Explorer 4 supported it with Microsoft's Embedded OpenType (EOT) format. It saw little use because other browsers didn't support it and type foundries worried about piracy, and it was dropped from CSS 2.1. It came back in CSS3, and from 2008 to 2010 Safari, Firefox, Chrome and Opera all shipped support for linking to TrueType and OpenType files.

The Modern Web Font Era (2010 onwards)

A few developments in quick succession made custom web typography normal:

• Hosted services: Typekit launched in 2009 and Google Fonts in 2010, solving licensing and hosting for most designers.
• WOFF: The Web Open Font Format, a compressed wrapper designed for the web, became a W3C Recommendation in 2012. WOFF2, with better compression, followed in 2018 and is now the format you should use.
• High-resolution screens: Retina and other high-density displays made fine typographic detail visible on screens for the first time.
• Variable fonts (2016): OpenType 1.8 introduced font variations, letting a single file contain a continuous range of weights, widths and other axes.

A modern font declaration combines all of these developments:

@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Literata", Georgia, serif;
  font-optical-sizing: auto;
}

Where Typography Is Heading

Recent CSS additions continue a long tradition of bringing print refinements to the screen: text-wrap: balance and text-wrap: pretty for better line breaks, hanging-punctuation in Safari, text-box for trimming extra space above and below text, and font metric overrides such as size-adjust for better fallbacks. Each of these solves a problem printers have dealt with for centuries.

Timeline at a Glance

Period	Development
11th century	Bi Sheng's clay movable type in China
1377	Jikji printed with metal type in Korea
c. 1450 to 1455	Gutenberg's press and 42-line Bible in Mainz
1470	Jenson's roman type in Venice
c. 1500	First italic type, Aldus Manutius and Francesco Griffo
1500s to 1700s	Garamond, Caslon, Baskerville
Late 1700s	Didot and Bodoni
1810s	Slab serifs and the first sans-serif type
1886	Linotype machine
1920s to 1950s	Futura, Gill Sans, Times New Roman, Helvetica, Univers
1950s to 1970s	Phototypesetting
1984 to 1985	PostScript, Macintosh, LaserWriter, PageMaker
1991	TrueType
1996	CSS1 and Microsoft Core fonts for the Web
2009 to 2010	Browsers support @font-face; Typekit and Google Fonts launch
2012	WOFF becomes a W3C Recommendation
2016	Variable fonts in OpenType 1.8
2018	WOFF2 becomes a W3C Recommendation

---

FAQ: History of Typography

---

Conclusion

Typography's history runs from Gutenberg's metal type in Mainz through the Venetian roman and italic, the refinements of Garamond, Caslon, Baskerville and Bodoni, the loud display faces of the industrial age and the modernist sans-serifs of the twentieth century. Each technology, from hand-set metal to hot metal machines, film, PostScript and finally the browser, changed both how type was made and who could use it.

The web inherited all of it. Its terms, its classifications and many of its CSS properties are digital versions of printers' tools, and its own history, from web-safe fonts and image replacement hacks to WOFF2 and variable fonts, is a fast replay of the same pursuit: getting the right letters in front of readers, set well. Knowing where those conventions came from makes it easier to apply them with judgement.