Skip to content

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.