Skip to content
Typetura Docs

Hello world

Your content

Let’s start with some HTML on a page:

<article>
  <h1>Hello world!</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 change the size of the h1 element. Let’s attach Typetura’s behavior to it by adding the class tt.

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

Your styles

Now we can style this using CSS keyframe animations.

h1 {
  animation-name: h1;
}
@keyframes h1 {
  0% {
    font-size: 1rem;
  }
  100% {
    font-size: 5rem;
  }
}

Additional styling

You did it! You wrote your first Typetura styles. You may want to adjust the start and end position, as well as the easing curve. See the Typetura style reference for more information.

h1 {
  animation-name: h1;
  /* Scaling curve */
  animation-timing-function: ease-in-out;
  /* Breakpoint for “from” keyframe */
  --from: 10rem;
  /* Breakpoint for “to” keyframe */
  --to: 60rem;
}
@keyframes h1 {
  from {
    font-size: 1rem;
    line-height: 1.2
  }
  to {
    font-size: 5rem;
    line-height: 1;
  }
}

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