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/leading-texture.html

Go to file
 
 
Cannot retrieve contributors at this time
241 lines (222 sloc) 14.1 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Leading and Texture</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Leading and Texture">
<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">
<meta name="theme-color" content="#fafafa">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://kit.fontawesome.com/5e541f73d9.js" crossorigin="anonymous"></script>
<script>const subsections = ["Changing the Height of Lines", "Leading", "Changing Leading", "Where Leading Comes From", "One Last Leading Change"];</script>
<style>
.feedback {
margin-bottom: -8rem;
}
</style>
</head>
<!-- Todo: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Or: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type -->
<body class="preload">
<span class="sr-only">Warning! This lesson is visually heavy as it teaches how to adjust the space between lines of text.</span>
<a href="#accessibility-settings" class="sr-only">Jump to accessibility settings</a>
<nav class="lesson">
<div class="nav--meta open-toggle" aria-pressed="false">
<i class="fas fa-bars"></i>
<h1>Leading &amp; Texture • <span id="steps--currentName">Subsection Name</span></h1>
<ul id="steps--dots">
<li class="step--seen"></li>
<li class="step--unseen"></li>
<li class="step--unseen"></li>
<li class="step--unseen"></li>
<li class="step--unseen"></li>
</ul>
</div>
<a href="index.html" id="return">« Return to lessons</a>
<ul id="steps--list">
<li class="step--seen"><a></a></li>
<li class="step--unseen"><a></a></li>
<li class="step--unseen"><a></a></li>
<li class="step--unseen"><a></a></li>
<li class="step--unseen"><a></a></li>
</ul>
</nav>
<main class="steps" id="content">
<!-- Step 1 -->
<div class="activity">Activity</div>
<h2>Adjust this paragraph:</h2>
<section class="inputs">
<label for="leading" class="sr-only">Change the line-height:</label>
<input type="range" id="leading" class="leading firstexp" min="10" max="40" value="15" autocomplete="off">
</section>
<section class="lockup first-experiment">
<p class="moby">Call me Ishmael. Some years ago--never mind how long precisely --having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off--then, I account it high time to get to sea as soon as I can.
</p>
</section>
<button class="next step--major hidden" id="revealStep2">What is this?</button>
<!-- Step 2 -->
<div class="step">
<h2>The value you're changing is called leading.</h2>
<p><strong>Leading</strong> is the distance between lines of type. Sometimes this is called <strong>line spacing</strong> on computers.</p>
<p>The goal in setting <span class="tooltipTrigger" aria-describedby="textual" tabindex="0">textual type <i class="fas fa-info-circle"></i></span> is to allow for easy, prolonged reading. <em>Text that is set too tightly</em> causes vertical movement of the eyes and a reader can easily lose their place. <em>Type that is set too loosely</em> creates a striped pattern that distracts the reader from the material.</p>
<span class="popover" id="textual">as opposed to headlines</span>
</div>
<button class="next step--major">Try another experiment</button>
<!-- Step 3 -->
<div class="step">
<div class="activity">Activity</div>
<h2>Adjust the leading to improve legibility of the paragraph.</h2>
<section class="inputs">
<label for="leading" class="sr-only">Adjust leading:</label>
<input type="range" id="leading" class="leading secondexp" min="10" max="40" value="15" autocomplete="off">
</section>
<section class="lockup second-experiment">
<p class="moby">It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p>
<div class="feedback hidden"></div>
</section>
</div>
<button id="revealStep4" class="next step--major hidden">Leading is an important part of typography</button>
<!-- Step 4 -->
<div class="step">
<h2>Where does leading come from?</h2>
<p>Space between lines of writing has existed for as long as writing has, but a consistent space between lines becomes a major part of type design when the printing press is invented. Around 1440 <small>AD</small>, Gutenberg begins the era of hand typesetting by introducing the moveable type press to Europe.</p>
</div>
<button class="next">»</button>
<div class="step">
<p>Movable type was made out of lead, which was strong enough to withstand the needs of printing, but could be melted down and recast into different letters as needed.</p>
<!-- <p>TK animation of leading</p> -->
<p>To separate lines of text, typesetters used strips of lead of varying heights, calling it <strong>leading</strong>. This is why the term is pronounced "led-ing" instead of "leed-ing".</p>
</div>
<button class="next step--major">Play with both leading and font size</button>
<!-- Step 5 -->
<div class="step">
<div class="activity">Activity</div>
<h2>Adjust the two values below to improve legibility of the paragraph.</h2>
<p>Try different values to see how one setting can effect legibility.</p>
<section class="inputs"><label for="size">Adjust font size:</label>
<input type="range" id="size" class="point-size thirdexp" min="10" max="40" value="20" autocomplete="off" style="transform: translate(5px, 7px);"><br>
<label for="leading2">Adjust leading:</label>
<input type="range" id="leading2" class="leading thirdexp" min="10" max="40" value="15" autocomplete="off" style="transform: translate(5px, 7px);">
</section>
<section class="lockup third-experiment" style="margin-top: 2rem;">
<p class="moby">It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters.</p>
<div class="feedback neutral hidden">Make a change!</div>
</section>
<button class="next step--major" id="step3-feedback">Want feedback?</button>
<aside id="complete" class="bg-confetti hidden">
<h1>Lesson complete</h1>
<h2>To review:</h2>
<ul>
<li>Leading is the distance between lines of type.</li>
<li>Leading should neither be too tight or too loose to keep your text legible.</li>
<li>Leading size will change with your text size.</li>
</ul>
</aside>
</div>
</main>
<!-- Accessibility options -->
<aside class="accessibility" id="accessibility-settings">
<div class="open-toggle" aria-label="Accessibility panel open button" role="button" aria-pressed="false" tabindex="0"><i class="fas fa-universal-access"></i></div>
<h1>Accessibility settings</h1>
<label for="font-style">Font style:</label>
<select name="font-style" id="font-style" autocomplete="off" style="margin-bottom: 1rem;">
<option value="">Default</option>
<option value="opendyslexic">OpenDyslexic</option>
<option value="lato">Lato</option>
<option value="verdana">Verdana</option>
</select>
<label for="high-contrast">High contrast:</label>
<input type="checkbox" name="high-contrast" id="high-contrast" autocomplete="off">
<button style="margin-top: 1rem;" id="print">Print lesson</button>
</aside>
<script>
//First experiment
const inputs = [].slice.call(document.querySelectorAll('input[type="range"'));
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
inputs.forEach(input => input.addEventListener('change', feedback));
// inputs.forEach(input => input.addEventListener('mousemove', feedback));
// Requires correct HTML structure: find the parent of the input, then set the variable of the next sibling element. Uses the input's first class as the variable setting.
function handleUpdate(e) {
let cssProp = this.classList[0];
e.target.parentElement.nextElementSibling.style.setProperty('--' + cssProp, this.value + 'px');
if (this.classList.contains('firstexp')) {
setTimeout(() => {
document.getElementById('revealStep2').classList.remove('hidden');
}, 2000)
}
}
// define 3rd step leading and size variables
let leadThird = 15;
let sizeThird = 15;
// need to improve this function
function feedback(event) {
let responses = ["This is a bit illegible. Remember, text that is set too tightly causes vertical movement of the eyes and a reader can easily lose their place.", "This is too much space. Loose leading creates a striped pattern and the reader might struggle to keep their place in from line to line.", "Try adjusting the values. This has some legibility issues.", "This is a good amound of leading!"];
if (this.classList.contains('secondexp')) {
let feedB = document.querySelector('.second-experiment .feedback');
setTimeout(() => {
feedB.classList.remove('hidden');
feedB.classList = "";
feedB.classList.add('feedback', 'neutral');
if (this.value < 26) {
feedB.innerHTML = responses[0];
} else if (this.value > 31) {
feedB.innerHTML = responses[1];
} else {
feedB.classList.replace('neutral', 'positive');
feedB.innerHTML = responses[3];
document.getElementById('revealStep4').classList.remove('hidden');
}
}, 1000)
} else if (this.classList.contains('thirdexp')) {
let feedB = document.querySelector('.third-experiment .feedback');
if (event.target.id === "leading2") {
leadThird = event.target.value
} else {
sizeThird = event.target.value
}
setTimeout(() => {
// console.log(leadThird + " " + sizeThird);
// console.log(leadThird / sizeThird);
if (sizeThird <= 16) {
if ((leadThird / sizeThird) <= 1.1 || (leadThird / sizeThird) >= 1.4) {
feedB.innerHTML = responses[2];
} else {
feedB.classList.replace('neutral', 'positive');
feedB.innerHTML = responses[3];
document.getElementById('step3-feedback').classList.add('hidden');
document.getElementById('complete').classList.remove('hidden');
}
} else if (sizeThird >= 17) {
if ((leadThird / sizeThird) <= 1.2 || (leadThird / sizeThird) >= 1.4) {
feedB.innerHTML = responses[2];
} else {
feedB.classList.replace('neutral', 'positive');
feedB.innerHTML = responses[3];
document.getElementById('step3-feedback').classList.add('hidden');
document.getElementById('complete').classList.remove('hidden');
}
}
}, 0.5)
}
}
document.getElementById('step3-feedback').addEventListener('click', () => {
document.querySelector('.third-experiment .feedback').classList.remove('hidden');
})
</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 src="js/nav.js"></script>
<script src="js/lesson.js"></script>
</body>
</html>