Skip to content
Typetura Docs

Headings

Your content

Let’s start with some HTML on a page:

<article>
  <h1 class="heading">My headline</h1>
</article>

Then, let’s add typetura.css. It should ideally go in the <head>.

<head>
  ...
  <link rel="stylesheet" href="/typetura.css">
  ...
</head>

We want to style the .heading element. Let’s attach Typetura’s behavior to it by adding the class tt.

<article>
  <h1 class="heading tt">Hello world!</h1>
</article>

Defining a container

Let’s say we want to have the headline scale with the container it is in. We can define this by either adding a cq class to <article> or by adding article{ container-type: inline-size; } to our CSS.

Your styles

Now we can style this using CSS keyframe animations. We’ll start by creating an animation and attaching that to our heading.

.heading {
  animation-name: heading;
}
@keyframes heading {
  from {
    font-size: 1.5rem;
  }
  to {
    font-size: 5rem;
  }
}

Additional styling

You did it! Now let’s add more styles to both the keyframes and our regular ruleset for the heading. See the Typetura style reference for more information.

.heading {
  animation-name: heading;
  animation-timing-function: ease-in;
  margin: 0;
  margin-block-end: 0.2em;
  font-stretch: 80%;
  line-height: 1;
  --to: 60rem;
}
@keyframes heading {
  from {
    font-size: 1.5rem;
    line-height: 1.2;
    font-stretch: 50%;
    font-weight: 700;
  }
  to {
    font-size: 5rem;
    line-height: 1;
    font-stretch: 100%;
    font-weight: 400;
  }
}

See the Pen Typetura Headings Tutorial by Scott Kellum (@scottkellum) on CodePen.