Typetura is a tool to make fluid typography easy. Here is a demo of typetura in action. It enables you to control the font size, line height, margins, padding, variable font settings, and anything that can be animated. The difference is that the keyframes are applied across screen sizes as opposed to time.

npm install --save typeturajs

<script src="https://cdn.jsdelivr.net/gh/scottkellum/typetura.js@master/js/typetura.min.js"></script>

import 'typeturajs';

At its core, Typetura works with CSS keyframe animations and ties those animations to the width of the page or an element instead of a timeline. Let’s create keyframes for our <h1>.

@keyframes h1 {
  0%,
  20% {
    font-size: 1.2rem;
  }
  100% {
    font-size: 4rem;
  }
}

Now that you have your keyframes set up, let’s tell typetura to use those keyframes to scale the text.

h1 {
  --tt-key: h1;
}

Awesome! You should be seeing typetura working. But you might be thinking the effect is happening over too wide a range. By default, the keyframes map to a viewport range of 0px to 1600px wide. Change the max to 960px adding --tt-max: 960; either locally on the h1 or globally on the body.

So far, your CSS should look something like this:

@keyframes h1 {
  0% {
    font-size: 1.2rem;
  }
  100% {
    font-size: 4rem;
  }
}
h1 {
  --tt-key: h1;
  --tt-max: 960;
}

Anything that can be animated can be used in these keyframes like color, transforms, size, margins, padding, variable font properties, etc. The sky is the limit.

By default typetura queries the width of the viewport. You can select any other element by adding the class typetura to that element. With this class, all child elements will respond to that parent context.

Easing works in typetura just like it does with any other animations. However you may want the easing functions you set to inherit and the default timing functions don’t. You can set your timing functions in typetura with --tt-ease and that timing function will be inherited by any element underneath it.

Typetura.js works in Firefox (Gecko), Chrome (Blink), and Safari* (Webkit). It can be treated as progressive enhancement in all other browsers.

Copyright © 2018–2019 Typetura LLC. All rights reserved. Commercial licences that allow modification, custom integrations, enhanced features, and/or support are avalible by contacting [email protected].

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to use, copy, publish, and/or distribute copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

• The above copyright notice, license, and this permission notice shall be included in all copies or portions of the Software.
• Modification of the code, such as changing function names, variable names, and/or removing portions of the code, is prohibited.

The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.