John Baskervile Site - Made in VS Code with HTML and CSS
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>John Baskerville</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link rel="stylesheet" href="<https://use.typekit.net/lat5ahb.css>" />
<meta charset="utf-8" />
<meta name="author" content="Philip Park" />
</head>
<body>
<article>
<nav>
<ul>
<li><a href="#the-man">The Man</a></li>
<li><a href="#the-typeface">The Typeface</a></li>
<li><a href="#mrs-eaves">Mrs Eaves</a></li>
</ul>
</nav>
<header>
<h1>John Baskerville</h1>
<h2>Letter Founder & Master Printer</h2>
<p>
John Baskerville (1706-1775) was an English businessman whose
entrepreneurial attentions included <em>japanning</em> and
<em>papier-mâché</em>; he is, however, best remembered as a
typographer and printer, not least for the design of the eponymous
typeface which, to this very day, bears his name.
</p>
</header>
<section>
<h2 id="the-man">The Man</h2>
<p>
Baskerville was born in the village of Wolverley, near Kidderminster
in Worcestershire, and worked as a printer in Birmingham. Baskerville
printed works for the University of Cambridge and, although an
atheist, printed a splendid folio bible in 1763. His typefaces were
greatly admired by <strong>Benjamin Franklin</strong>, a printer and
fellow member of the Royal Society of Arts, who took the designs back
to the newly-created United States, where they were adopted for most
federal government publishing.
</p>
<p>
Baskerville was responsible for numerous innovations in printing,
paper and ink production. He developed a technique which produced a
smoother whiter paper which showcased his strong black type. He also
pioneered a completely new style of typography, adding wide margins
and generous leading to improve legibility.
</p>
<blockquote>
"Having been an early admirer of the beauty of letters, I became
insensibly desirous of contributing to the perfection of them. I
formed to myself ideas of greater accuracy than had yet appeared, and
had endeavoured to produce a set of types according to what I
conceived to be their true proportion."<br /><cite
>-John Baskerville, preface to Milton, 1758 (Anatomy of a
Typeface)</cite
>
</blockquote>
</section>
<section>
<h2 id="the-typeface">The Typeface</h2>
<p>
Baskerville is a Transitional serif typeface designed by John
Baskerville in 1757, positioned between the Old Style typefaces of
William Caslon, and the modern styles of Giambattista Bodoni and
Firmin Didot.
</p>
<p>
The typeface is the result of Baskerville's intent to improve upon the
types of William Caslon. He increased the contrast between thick and
thin strokes, making the serifs sharper and more tapered, and shifted
the axis of rounded letters to a more vertical position. The curved
strokes are more circular in shape, and the characters became more
regular. These changes created a greater consistency in size and form.
</p>
<p>
Baskerville's work was criticised by jealous competitors and soon fell
out of favour. Since the 1920s, however, numerous revivals of
Baskerville have been released by Linotype, Monotype, and other type
foundries. Émigré released a popular revival of the typeface in 1996
called Mrs Eaves, named for Baskerville's wife, Sarah Eaves.
Baskerville represents the peak of Transitional type face design and
bridges the gap between Old Style and Modern type design.
</p>
</section>
<section>
<h2 id="mrs-eaves">Mrs Eaves</h2>
<p>
Mrs Eaves is named after Sarah Eaves, the woman who became John
Baskerville's wife. As Baskerville was setting up his printing and
type business, Mrs. Eaves moved in with him as a live-in housekeeper,
eventually becoming his wife after the death of her first husband, Mr.
Eaves. Mrs Eaves is a revival of the types of English printer and
punch-cutter John Baskerville, and is related to contemporary
Baskerville typefaces.
</p>
<p>
ike Baskerville, Mrs Eaves, cut by Zuzana Licko of Émigré, has a near
vertical stress, departing from the Old Style model. Identifying
characters, similar to Baskerville's types, are the lowercase g with
its open lower counter and swash-like ear. Both the roman and italic
uppercase Q have a flowing swash-like tail. The uppercase C has serifs
at top and bottom; there is no serif at the apex of the central
junction in uppercase W; and the uppercase G has a sharp spur
suggesting a vestigial serif.
</p>
</section>
</article>
<footer>
<p>
The content on this page is developed from original copy from Wikipedia
and licensed under a Creative Commons Attribution-ShareAlike License,
meaning youre allowed to copy, distribute and transmit the work as long
as it is attributed to the original authors.
</p>
<a href="mailto:[email protected]">Get in Touch</a>
<a
href="<https://treasure-handbell-727.notion.site/Project-List-8a46373c70b9493e9e20081b57bd5348>"
>Notion</a
>
</footer>
</body>
</html>
/*-- CSS Reset --*/
* {
margin: 0%;
padding: 0%;
font-size: 100%;
font-weight: normal;
line-height: 1rem;
}
/*-- CSS Start --*/
body {
font-family: baskerville-display-pt, serif;
background: #f7f7f7;
color: #333333;
}
header,
section,
footer {
width: 80%;
max-width: 700px;
margin: auto;
}
section,
header {
margin-bottom: 3em;
}
p,
blockquote {
padding: 1em 0;
line-height: 1.3;
}
h1,
h2 {
color: #a34f22;
}
h1 {
font-size: 4.742rem;
margin-top: 8rem;
padding-bottom: 0;
}
h2 {
font-size: 1.999rem;
margin: 3rem 0 0 0;
}
blockquote {
font-style: italic;
font-size: 1.68rem;
color: #a34f22;
hanging-punctuation: first;
text-indent: 0.7rem;
}
blockquote cite {
font-style: normal;
font-size: 1.067rem;
color: #333333;
}
footer {
text-align: center;
font-size: 0.8em;
padding-bottom: 2em;
}
/*-- Nav Bar Start --*/
nav {
position: fixed;
top: 0;
left: 0;
margin: 0;
width: 100%;
background-color: #a34f22;
padding: 1rem 0;
font-size: 0.75rem;
}
nav ul {
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
nav ul li {
display: inline;
margin: 20px;
background-color: none;
}
nav a {
color: #f7f7f7;
transition-duration: 200ms;
}
a {
text-decoration: none;
}
nav a:hover {
border-bottom: none;
font-size: 15px;
color: #ff5900;
transition-duration: 200ms;
}