INSIDE THE EXAMPLE

Typography / 04

Original source files, including the existing teaching notes. Copy a file below or download the complete folder.

css/reset.css

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}

css/style.css

@import url("reset.css");
@import url("variables.css");

/* 01 — BASIC TYPOGRAPHY */

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000000;
}

h1 {
  font-size: 48px;
  font-weight: 700;
}

h2 {
  font-size: 28px;
  font-weight: 400;
}

p {
  font-size: 16px;
  font-weight: 400;
}

/* 02 — LINE HEIGHT AND SPACING */

h1 {
  line-height: 54px;
  letter-spacing: -1px;
}

h2 {
  line-height: 36px;
  letter-spacing: 2px;
}

p {
  line-height: 26px;
  letter-spacing: 0px;
  word-spacing: 2px;
}

/* 03 — ALIGNMENT AND TEXT TREATMENT */

body {
  text-align: left;
}

h1 {
  text-align: center;
  text-transform: uppercase;
}

h2 {
  text-align: left;
  text-decoration: underline;
}

p {
  text-align: justify;
}

/* 04 — MARGINS, PADDING AND WIDTH */

body {
  padding: 24px;
  background-color: #FFFFFF;
}

main {
  max-width: 1100px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 24px;
}

h2 {
  padding: 16px;
  margin-bottom: 32px;
  background-color: #EEEEEE;
}

p {
  max-width: 650px;
  margin-bottom: 24px;
}

css/variables.css

/* Colour variables start in Example 05. */

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alice's Adventures in Wonderland — Typography Workshop</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<h1>Alice's Adventures in Wonderland</h1>

<h2>Down the Rabbit-Hole</h2>

<p>
  Alice was beginning to get very tired of sitting by her
  sister on the bank, and of having nothing to do: once or
  twice she had peeped into the book her sister was reading,
  but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures
  or conversations?"
</p>

<p>
  So she was considering in her own mind (as well as she
  could, for the hot day made her feel very sleepy and
  stupid), whether the pleasure of making a daisy-chain
  would be worth the trouble of getting up and picking
  the daisies, when suddenly a White Rabbit with pink
  eyes ran close by her.
</p>

<p>
  There was nothing so very remarkable in that; nor did
  Alice think it so very much out of the way to hear the
  Rabbit say to itself, "Oh dear! Oh dear! I shall be late!"
  (when she thought it over afterwards, it occurred to her
  that she ought to have wondered at this, but at the time
  it all seemed quite natural); but when the Rabbit actually
  took a watch out of its waistcoat-pocket, and looked at
  it, and then hurried on, Alice started to her feet.
</p>
</main>
</body>
</html>