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/index.html

Go to file
 
 
Cannot retrieve contributors at this time
307 lines (278 sloc) 11.4 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Ligatour • Index</title>
<meta name="description" content="Submitted in partial fulfillment by Gideon Slife for a the requirements of MFA.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Ligatour • A tour of typography over time.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://github.uconn.edu/pages/gms20005/typography/index.html">
<!-- <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="#FFFFFC">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://kit.fontawesome.com/5e541f73d9.js" crossorigin="anonymous"></script>
<style>
nav {
counter-reset: h2-counter;
}
nav section {
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid rgba(250, 128, 114, 0.315);
display: grid;
grid-template-columns: 1fr 48px;
}
nav section h2 {
font-size: 1.7em;
margin-bottom: 0;
order: -1;
counter-increment: h2-counter;
}
nav section h2::before {
opacity: 0.6;
margin-left: -2rem;
padding-right: 1rem;
content: counter(h2-counter, lower-roman);
font-size: 20px;
}
nav section h2 div {
font-size: 0.8em;
opacity: 0.9;
line-height: 1em;
margin-bottom: 0.5em;
}
nav ol {
column-count: 2;
gap: 1rem;
margin: 0;
padding: 0;
counter-reset: styleme;
list-style: none;
margin-left: -1.5em;
grid-area: 2 / span 2;
}
nav li {
counter-increment: styleme;
}
nav li::before {
content: counter(styleme);
opacity: 0.4;
padding-right: 0.5em;
}
section li {
padding: 0.25em .5em;
border-radius: 5px;
transition: background 0.2s ease-in;
}
section li.active:hover {
background-color: #eee;
display: block;
}
section li:hover a[href] {
color: #2c4988;
}
section.closed h2 div, section.closed ol {
display: none;
}
a:link,
a:visited {
color: #0074D9;
}
a:not([href]) {
color: #333;
opacity: 0.6;
}
li:not(.active):hover a:not([href])::after {
content: "pending";
padding-left: 1rem;
font-size: 10px;
}
@media (max-width: 950px) {
nav section h2 {
padding-left: 2rem;
}
section li {
padding-left: 3rem;
}
}
@media (max-width: 600px) {
nav ol {
column-count: 1;
}
}
span.icon {
cursor: pointer;
display: block;
margin-top:10px;
width: 48px;
height: 26px;
background: url(img/arrow.svg);
font-size: 0;
transform: scale(0.7);
opacity: 0.8;
filter: grayscale(1);
transition: all 0.2s ease-in-out;
}
span.icon:hover {
filter: grayscale(0);
}
section.closed span.icon {
transform: scale(0.7) rotate(-90deg)
}
</style>
</head>
<body>
<main>
<header>
<h1>Ligatour</h1><span>A tour of typography over time.</span>
</header> <nav style="padding-top: 2rem;">
<section>
<span class="icon">Open Section</span>
<h2>Western Writing Origins
<div>4th Century &ndash; 1st Century <small>BC</small></div>
</h2>
<ol>
<li class="active"><a href="letterform-development.html">Early Letterform Development</a></li>
<li><a>Writing Direction</a></li>
<li><a>Capital Letters <em>&amp;</em> Stone Carving</a></li>
</ol>
</section>
<section>
<span class="icon">toggle</span>
<h2>Written Language Spreads <div>100 <small>BC</small> &ndash; <small>AD</small> 500</div>
</h2>
<ol>
<li class="active"><a href="capitals-transition.html">Alternate Capitals: Rustic Capitals</a></li>
<li><a>Roman Cursive</a></li>
<li><a>Anatomy of the Letterform, Part I</a></li>
<li><a>Other Writing Systems</a></li>
<li><a>Numerals</a></li>
</ol>
</section>
<section class="closed"><span class="icon">toggle</span>
<h2>The Era of Hand Script <div>500 &ndash; 1400</div>
</h2>
<ol>
<li><a>Uncials and Half Uncials</a></li>
<li><a>Bicameral Writing System</a></li>
<li><a>Magiscules and Minuscules</a></li>
<li><a>Grids and Grid Systems</a></li>
<li><a>Carolinian Minuscules</a></li>
<li><a>Blackletter</a></li>
<li><a>Italian Script</a></li>
</ol>
</section>
<section><span class="icon">toggle</span>
<h2>Movable Type &amp; the Printing Press <div>1440 &ndash; 1700</div>
</h2>
<ol>
<li><a>Gutenberg</a></li>
<li><a>Lead Type and Presses</a></li>
<li><a>Ligatures</a></li>
<li><a>Uppercase and Lowercase</a></li>
<li><a>Blackletter Lead</a></li>
<li><a>Type-casting</a></li>
<li><a>Old-style</a></li>
<li><a>Lettering, Typeface, and Font</a></li>
<li><a>Anatomy of a Letterform, Part 2</a></li>
<li class="active"><a href="leading-texture.html">Leading and Texture</a></li>
<li><a>Kerning, Tracking, and Letter-spacing</a></li>
<li><a>Paragraphs, Widows, and Orphans</a></li>
<li><a>Proportions and Heirarchy</a></li>
</ol>
</section>
<section class="closed"><span class="icon">toggle</span>
<h2>Innovations and Refinements <div>1700 &ndash; 1900</div>
</h2>
<ol>
<li><a>Caslon and Baskerville</a></li>
<li><a>Transitional</a></li>
<li><a>Modern</a></li>
<li><a>Display Face</a></li>
<li><a>Boldface</a></li>
<li><a>Egyptian</a></li>
<li><a>Sans-Serif</a></li>
</ol>
</section>
<section class="closed"><span class="icon">toggle</span>
<h2>Rise of Sans-Serif and the Digital Era <div>1900 &ndash; Today</div>
</h2>
<ol>
<li><a>Modernism</a></li>
<li><a>Gill, Renner, and Frutiger</a></li>
<li><a>Digital Typography</a></li>
<li><a>Variable Typefaces</a></li>
</ol>
</section>
<section>
<span class="icon">toggle</span>
<h2>Tools and Apps</h2>
<ol><li><a href="examine">Examine a Letterform</a></li>
<li><a href="transliteration.html">Phoenician Translation</a></li></ol>
</section>
<!-- <section>
<h2>Content complete</h2>
<a href="letterform-development.html">Letterform Development</a>
<a href="capitals-transition.html">Capitals Transition</a>
<a href="leading-texture.html">Leading &amp; Texture</a>
</section>
<section>
<h2>Lessons in progress</h2>
<a href="lead-type.html">Movable Type &amp; Presses</a>
<a href="anatomy">Anatomy of the Letterform</a>
</section> -->
<!-- <section>
<h2>Documents</h2>
<div><a href="accessibility.md">Accessibility Notes</a> <a href="accessibility.pdf">(PDF)</a></div>
<a href="todo.md">To Do</a>
</section> -->
</nav>
</main>
<footer>
<h2>Colophon</h2>
<p>Written, designed, <em style="font-family: baskerville;">&amp;</em> coded by <a href="http://gideonslife.com">Gideon Slife</a>.</p>
<p>Submitted in partial fulfillment of the requirements for the degree of Master of Fine Arts in Digital Media <em style="font-family: baskerville;">&amp;</em> Design at the University of Connecticut, Storrs, Conn. <a href="thesis.pdf">You can read my process here (PDF)</a>.</p>
<p><strong>Thesis Committee</strong></p>
<ul>
<li><a href="https://dmd.uconn.edu/people/tom-scheinfeldt">Dr. Tom Scheinfeldt</a></li>
<li><a href="https://dmd.uconn.edu/person/brian-daley/">Brian Daley</a></li>
<li><a href="https://dmd.uconn.edu/person/samantha-olschan/">Samantha Olschan</a></li>
<li><a href="https://dmd.uconn.edu/person/kenneth-thompson/">Kenneth Thompson</a></li>
</ul>
<p><strong>Special Thanks</strong></p>
<p>Heather Cassano, Heejoo Kim, Tanju Ozdemir, Joel Salisbury, Stephen Slota, Mike Toomey, Alyssa McDonald, Matthew Mullin, <em style="font-family: baskerville;">&amp;</em> Lexy Vecchio.</p>
<blockquote><q>Finished, thank God.</q>
<cite>Common colophon found on medival manuscripts</cite></blockquote>
</footer>
<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">
</aside>
<script>
</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>
const tocSections = [].slice.call(document.querySelectorAll("nav section span.icon"));
tocSections.forEach((input) => input.addEventListener("click", toggleOpen));
function toggleOpen(e) {
e.preventDefault();
e.target.parentElement.classList.toggle("closed")
}
</script>
</body>
</html>