Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

typography/lead-type.html

Go to file
 
 
Cannot retrieve contributors at this time
295 lines (278 sloc) 16.3 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Movable Type and Presses</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Movable Type and Presses">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png"><!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/deck.css">
<meta name="theme-color" content="#fafafa">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alegreya&display=swap" rel="stylesheet">
<style>
canvas {
border: 1px solid #ccc;
}
.video {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.video iframe {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, 60px);
gap: 1rem;
transition: all 1s;
}
.grid-container .year {
height: auto;
text-align: center;
padding: 10px;
line-height: 1;
border-radius: 10px;
background-color: #ccc;
transform: scale(0);
animation: pop 0.2s;
animation-delay: var(--pop-delay);
animation-fill-mode: forwards;
}
@keyframes pop {
0% {
transform: scale(0);
}
95% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
<!-- Preloads -->
</head>
<body>
<main class="steps">
<!-- Step 1 -->
<h2>See how many words you can spell using these nine letters.</h2>
<canvas id="step1" width="400" height="400"></canvas>
<button class="next">»</button>
<div class="step">
<h2>Now what if you had two of each letter?</h2>
<canvas id="step2" width="400" height="400"></canvas>
</div>
<button class="next">»</button>
<div class="step">
<p>The German innovations of movable type combined with the phonetic alphabet derived from the Phoenicians allowed typographers to use a very limited amount of letters to produce an unlimited amount of work. Additionally, the ability to print the same work multiple times sped up book production tremendously.</p>
<figure>
<img src="img/Buchdrucker-1568.jpg" alt="">
<figcaption>Left, a typefounder; right, printers at work. Typefounders produced metal type for the printers. These engravings are from Jost Amman's <em>Ständebuch</em>, 1568.</figcaption>
</figure>
<p>In a few short years, Gutenberg's press in Europe led to mass communcation, resulting in wider literacy. Literacy led to religious movements throughout Europe and fueled the Renaissance and eventually the scientific revolution.</p>
</div>
<button class="next step--major">Continue</button>
<!-- Step 2 -->
<div class="step">
<!-- <figure>
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/yeikqw0kyqI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<figcaption>A modern recreation of what Gutenberg's press probably looked like, and a demonstration of how to ink type and print a single page. In Gutenberg’s day, this would have been done by at least two press workers at a time in order to speed the process.</figcaption>
</figure> -->
<p>The following images and terms follow the process of preparing metal type for use in a press. This is modern terminology, as some of these terms and technology weren't invented until decades or centuries after Gutenberg's initial innovations. However, much of the process and terminology does come to us from the 15th century!</p>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="Type or sorts">
<p>Individual letters are called <em>type</em> or <em>sorts</em>.</p>
<p>If a typographer was setting a page and ran out of a specific letter, he would say he was "out of sorts"—a position no one wants to be in.</p>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="">
<p>Type is organized in <em>cases</em>, a box (usually wooden) with compartments for each sort.</p>
<p>In the past, minuscule letters were kept in a lower case, while majuscule letters were kept in the upper case. Hence the modern terms <em>lower-</em> and <em>uppercase</em> for minuscule and majuscule letters.</p>
<img src="" alt="">
<p>Since the late 19th century, the most commonly used case is the <em>California job case</em>, which combined minuscule and majuscule sorts.</p>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="">
<p>The act of putting type into a printable form is called <em>setting type</em> or <em>composing type</em>. <p>Composing is generally done into a <em>composing stick</em>.</p>
<p>Because the letterform on type is printed backwards, typographers must be careful not to place the mirrored sort in the wrong place!</p>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="">
<p>Individual lines may then be moved to a <em>galley tray</em> so they can be test printed (this is called a <em>pull</em>, because a printer “pulls” the printing mechanism over the type in the galley tray) and <em>proofed</em> (the act of checking the print for any errors in text or misalignment).</p>
<p>This is the best time for a typographer to verify that a 'b' wasn't used in place of a 'd', but also to make sure kerning and leading is appropriate and legible.</p>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="">
<p>Once type has been properly proofed, it’s time to move the type into a <em>chase</em>, a metal frame, to be <em>locked up</em> (set in place so it cannot move).</p>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="">
<p>To postion the print correctly on the page, wood or metal pieces are used between the type and chase. These are called <em>furniture</em>.</p>
<figure>
<img src="" alt="">
<!-- Credit: https://www.pirages.com/pages/books/ST16379-202/incunabular-leaf-with-illumination-aurelius-augustinus/de-civitate-dei -->
<figcaption>Occasionally, furniture would be used to leave area where an illuminator could illustrate a letterform or scene.</figcaption>
</figure>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="">
<p>When the type is roughly in position, a typographer will use <mark><em>quoins</em> <span>pronounced "coins"</span></mark>, metal wedges that can be tightened to make sure neither furniture nor type inside the chase shifts. Quoins are tightened using <em>keys</em>.</p>
</div>
<button class="next">»</button>
<div class="step">
<img src="" alt="">
<p>Once the type is set on the press bed and the press is made ready and inked, printing can begin. The inking and printing process can look very different depending on the press used.</p>
<small>Thank you to <em><a href="https://hartfordprints.com/">Hartford Prints!</a></em> in Hartford, Conn. for permission for photos and use of their press and type.</small>
</div>
<button class="next">»</button>
<div class="step">
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/0iGqHIqBzis" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<figcaption>This video from the National Print Museum of Dublin demonstrates these steps for stting type.</figcaption>
</div>
<button class="next step--major">Continue</button>
<!-- Step 3 -->
<div class="step">
<h3>See what movable type is like to set and print. <small>Mind your p's and q's!</small></h3>
<form>
<input type="text" id="setType" style="transform: scale(-1,1); ">
<div id="printButton" style="cursor: pointer;">Print</div>
</form>
<div class="print"></div>
</div>
<button class="next step--major">Continue</button>
<!-- Step 4 -->
<div class="step">
<p>In 1452, Gutenberg produced the Gutenberg Bible, the first, most extensive work from a movable type press.</p>
</div>
<button class="next">»</button>
<div class="step">
<figure>
<img src="img/gutenberg-bible.jpg" alt="A Gutenberg Bible">
<figcaption>A Gutenberg bible held by the New York Public Library. Photo by <a href="https://www.flickr.com/photos/10183029@N00/3631902258">NYC Wanderer</a>.</figcaption>
</figure>
<p>The Bible, in Latin, was 1300 pages, and Gutenberg likely printed between 138 and 180 copies.</p>
</div>
<button class="next">»</button>
<div class="step">
<!-- The slideshow height could potentially be animated using this method https://levelup.gitconnected.com/overcoming-css-not-calculating-auto-height-for-transitions-f98a7e062f07 -->
<div class="slideshow" style="margin-top: 2rem;">
<div class="slide slide1 active">
<p>It took Gutenberg around five years to print at least 138 copies of the Bible. A single copy of the Latin Bible would take a monk about 15 months, with 138 copies of the Bible taking over 172 years!</p>
</div>
<div class="slide slide2">
<p>In all likelihood, Gutenberg had a team of around two dozen. Even with 24 monks, copying 138 bibles by hand would take almost eight years, while Gutenberg’s team created the same number in five years.</p>
<p>In 1475, a secretary of Pope Sixtus IV noted "three men working in three months have printed 300 copies [of a 366-page folio], a feat they could have not accomplished in their entire lives had they written with pen or a stylus." <small>Elizabeth Eisenstein translating from French in <em>Divine Art, Infernal Machine</em>, originally from <em>Moralia, sive Expositio in Job</em>.</small></p>
</div>
<div class="slide slide3">
<p>Over the next few hundred years, innovations in press technology, as well as in inks and other materials of printing, significantly improved this progress. By the 18th century, metal presses could produce between 2000-2500 imprints of a prepared press in a 10-hour workday.</p>
</div>
<div class="slide slide4">
<p>Today, hand-set printing is a much slower process than be achieved with digital methods, but many people continue to enjoy the analog style inherent to the process.</p>
</div>
</div>
<div class="slideshow-controls">
<button class="previousSlide" disabled>«</button>
<button class="nextSlide">»</button>
</div>
<div class="grid" style="margin-top: 2rem;">
<h3 class="press">Years to copy 138 bibles - Gutenberg's press</h3>
<div class="grid-container" id="gutenberg"></div>
<h3 class="hand">Time to copy 138 bibles - hand copying</h3>
<div class="grid-container" id="handcopying"></div>
</div>
</div>
</main>
<script src="js/vendor/fabric.js"></script>
<script>
// Variables for the canvas
const canvas = new fabric.Canvas('step1');
const canvas2 = new fabric.Canvas('step2');
// Variable for the text
let letterArr = ['A','B','C','E','I','H','O','T','M'];
for (let i = 0; i < letterArr.length; i++) {
canvas.add(new fabric.Textbox(letterArr[i], {
fontSize: 56,
top: 20,
left: (10 + i * 40),
editable: false
}));
canvas.item(i).hasControls = canvas.item(i).hasBorders = false;
};
for (let i = 0; i < (letterArr.length * 2); i++) {
canvas2.add(new fabric.Textbox(letterArr[Math.floor(i/2)], {
fontSize: 56,
top: 20,
left: (10 + Math.floor(i / 2) * 40),
editable: false
}));
canvas2.item(i).hasControls = canvas2.item(i).hasBorders = false;
};
// Add the text to the canvas
canvas.renderAll();
canvas2.renderAll();
</script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
let setType = document.getElementById("setType");
document.getElementById("printButton").addEventListener('mouseup',printText);
function printText() {
document.querySelector(".print").innerHTML = setType.value;
}
document.querySelector('.slideshow-controls .nextSlide').addEventListener('mouseup', gridIllustration);
document.querySelector('.slideshow-controls .previousSlide').addEventListener('mouseup', gridIllustration);
window.addEventListener('load', gridIllustration);
// This is the repeatable code used in the gridIllustration function
function gridUpdate(labelx,labely,n,m) {
let gutenbergGrid = document.getElementById('gutenberg');
let handGrid = document.getElementById('handcopying');
let yearDiv = document.createElement("div");
let labelArr = ["Years to create 138 bibles - Gutenberg's press", "Years to create 138 bibles - hand copying", "Years to create 2000 bibles - 18th century press (4 workers)", "Years to create 2000 bibles - hand copying (4 scribes)", "Days to create 2000 bibles - digital printing"];
yearDiv.classList.add('year');
gutenbergGrid.innerHTML = "";
handGrid.innerHTML = "";
document.querySelector(".grid h3.press").innerHTML = labelArr[labelx];
document.querySelector(".grid h3.hand").innerHTML = labelArr[labely];
for (i = 1; i < n; i++) {
// pop-delay is a CSS custom property that adds an animation delay as the loop continues. See the CSS for .year for more info.
gutenbergGrid.innerHTML += '<div class="year" style="--pop-delay: ' + 0.05*i + 's">' + i + '</div>';
}
for (i = 1; i < m; i++) {
if (m == 2) {
handGrid.innerHTML += '<div class="year" style="--pop-delay: ' + 0.05 * i + 's">A few days</div>';
} else {
handGrid.innerHTML += '<div class="year" style="--pop-delay: ' + 0.05 * i + 's"> ' + i + '</div>';
}
}
}
function gridIllustration() {
let currentSlide = document.querySelector('.slideshow .active');
if (currentSlide.classList.contains("slide1")) {
gridUpdate(0,1,6,173);
} else if (currentSlide.classList.contains("slide2")) {
gridUpdate(0, 1, 6, 9);
} else if (currentSlide.classList.contains("slide3")) {
gridUpdate(2, 3, 3, 626);
} else {
gridUpdate(2, 4, 3, 2);
}
}
</script>
</body>
</html>