Recreating the Guardian’s masthead

Written by Leon on . One comment. Filed under: Notes.

#2 in an occasional series of typographical niceties.

The previous Guardian masthead was a distinctive mixture of Garamond and Helvetica. I thought I’d try and implement it using just HTML and CSS. Here’s what I cam up with:

My name in The Guardian's old style. Screenshot from Windows, so you get Arial and jagged text.

My name in The Guardian's old style. Screenshot from Windows, so you get Arial and jagged text.

See the a live version of the old Guardian masthead (appearance will vary depending on the fonts you have installed on your PC.)

The HTML is simple. I wrapped  ‘Paternoster’ in a span:

<!DOCTYPE html>

<html lang="en-gb">

	<head>

		<meta charset="utf-8">

		<title>My New House</title>

		<link rel="stylesheet" type="text/css" href="style.css">

	</head>

	<body>

		<h1><a href="#">Leon <span>Paternoster</span></a></h1>

	</body>

</html>

And the CSS just requires the two fonts to have the same line-height:

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 16px;
	line-height: 24px;
	width: 960px;
	margin: 96px auto;
}

a {
	text-decoration: none;
}

h1 a {
	color: #DF0000;
	font-family: 'Garamond Premier Pro Italic', garamond, baskerville, palatino;
	font-weight: normal;
	font-style: italic;
	font-size: 96px;
	line-height: 96px;
	text-transform: lowercase;
	word-spacing: -10px;
}

h1 a span {
	color: #000;
	font-size: 72px;
	line-height: 96px;
	font-family: arial;
	font-weight: bold;
	font-family: helvetica, arial, sans-serif;
	font-style: normal;
	letter-spacing: -2px;
}

h1 a:hover span {
	color: #DF0000;
}