Typography: Giving Your Words a Voice

Your page has a palette now: a named background, a hex heading, an rgb section colour. The letters themselves still sit in whatever font your browser happens to default to. This lesson gives your name, your headings, and your bio a real typographic pass.

The concept

Here is your page as it stands, palette and all. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat">GitHub</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

Fonts work differently from colours. A colour you write always renders. A font you name might not even be installed on the visitor's computer. Watch what the browser does about that. Run this:

A NAME THAT DOES NOT EXIST, AND THE FALLBACK THAT CATCHES IT · HTML

Untitled

RUN TO SEE YOUR PAGE

Your heading renders in a plain, evenly spaced typeface, the kind used for code. "TotallyMadeUpFontName" does not exist anywhere, on any computer. The browser skips it and moves on to monospace, the next name in the list. That list is a font stack: preferences in order, ending in a generic family every browser is guaranteed to have.

Now see what a full typographic pass does to an ordinary page. Here is one before any of it. Run it:

BEFORE: WHATEVER THE BROWSER DEFAULTS TO · HTML

Untitled

RUN TO SEE YOUR PAGE

Here is the same markup, after four small rules. Run it:

AFTER: A DELIBERATE TYPOGRAPHIC PASS · HTML

Untitled

RUN TO SEE YOUR PAGE

Nothing was added or removed. The same name, the same heading, the same sentence, now with a chosen typeface, a bigger name, lighter headings, and paragraphs with room to breathe.

The syntax

A font stack lists names from most to least preferred. It ends in a generic keyword such as serif, sans-serif, or monospace. Quote a name that contains a space:

body {
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}

Setting font-family on body reaches your whole page. Text properties like this one are inherited. Every element inside body, including h1, h2, and p, picks it up unless a more specific rule overrides it.

font-size controls how large text renders, commonly in rem units:

h1 {
  font-size: 2.5rem;
}

A rem is relative to the page's root size. That size defaults to 16 pixels in most browsers, so 2.5rem works out to 40 pixels.

line-height controls the space a line of text occupies. Write it as a plain number, with no unit. That number multiplies the element's own font-size.

p {
  line-height: 1.6;
}

font-weight controls how thick a typeface's strokes render. It takes a number, or a keyword:

h2 {
  font-weight: 500;
}

Weight values commonly run in steps of 100, from 100 up to 900. Headings render bold by default, around 700. A lower number such as 500 or 600 lightens that default on purpose.

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Typography</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Your Name</h1>
  </body>
</html>

styles.css

body {
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}
h1 {
  font-size: 2.5rem;
}

One stack, one size, one heading that looks deliberately chosen instead of left as a default.

Common mistakes

Your paragraph reads like each line was set adrift from the next. An extreme line-height does this. Run it:

A LINE-HEIGHT SO LARGE THE LINES DRIFT APART · HTML

Untitled

RUN TO SEE YOUR PAGE

line-height: 4 gives each line four times its own height of space. A little room helps reading. This much space breaks the paragraph apart instead.

Your custom font never seems to apply, and nothing about the page looks wrong either. Compare this heading to the monospace one from earlier in the lesson:

A MADE-UP NAME WITH NOTHING BEHIND IT · HTML

Untitled

RUN TO SEE YOUR PAGE

No monospace, no fallback at all. The made-up name still fails to match anything. This time the browser lands on its own plain default, instead of the distinctive fallback you asked for. The result looks ordinary, which is exactly the problem. Nothing marks it as broken, and what a visitor actually sees is now out of your hands.

You add a unit to font-weight out of habit, since font-size and line-height both take one. Run it:

A NUMBER THAT CARRIES A UNIT IT SHOULD NOT · HTML

Untitled

RUN TO SEE YOUR PAGE

font-weight takes a plain number or a keyword, never a length. 900px is invalid, so the whole declaration is dropped and the heading keeps its previous weight. Not every property accepts the same shape of value.

Try it yourself

Your page still uses whatever font your browser defaults to. Give it a real typographic pass. After each Run, scroll the preview to Skills or Contact if you do not see those headings yet.

Run the starting code below. Confirm your name, headings, and bio all render in your browser's default typeface.
On body, add font-family: 'Segoe UI', Helvetica, Arial, sans-serif;. Run it. Confirm every piece of text on the page shifts to this typeface at once.
On h1, add font-size: 2.5rem;. Run it. Confirm your name renders noticeably larger than before.
On p, add line-height: 1.6;. Run it. Scroll the preview to Contact if you do not see it yet. Confirm your bio and contact paragraphs gain visible space between their lines.
On h2, add font-weight: 500;. Run it. Scroll if you need to. Confirm About, Skills, and Contact all look lighter than the default bold heading.
Break it on purpose: change the p rule's line-height to 4. Run it. Confirm your paragraphs scatter into widely spaced lines.
Fix it: change that line-height back to 1.6. Run it. Confirm your bio reads normally again.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your name, headings, and bio now carry a deliberate typeface, size, spacing, and weight, instead of a browser's default guess. The next lesson turns to space itself: margin, padding, and border around every section on the page.