To jump into use, go to typetura.com. That single fluid canvas greets you, partially filled with content and flanked by a settings panel and empty space. At the top right corner of the canvas, You can change the wide of the canvas by dragging the orange dot at the top right corner. As you drag, you’ll see the canvas’ content fluidly and beautifully change shape and format — no awkward, chunky blocks of text occur, as in fixed page, breakpoint-based systems. And since all of the content on the page is editable, you can add new elements using the bottom menu and see how your content will work at various page or screen sizes.

At the top of the setting sidebar is a drop-down menu. This might say “article” or “paragraph”. It indicates what element the settings apply to. It is recommended that you style the article first, and then style other elements. You can also change the elements you are styling by clicking on them in the content panel.

Using fluid design keyframes

Typetura uses keyframes, not breakpoints, to define design changes. Keyframes, of course, are a tool borrowed from animation and filmmaking. Unlike in animation, however, the keyframes in typetura are not bound to time; they are bound to viewport width. In between the stipulated viewport sizes, the typographical content fluidly changes, transitioning gradually from one screen size to the next.

You’ll also notice a lightning bolt symbol in the settings panel. This indicates that a setting is interpolable. As you resize the page and change the settings, this symbol will be added to the ruler along the top of the screen, creating different keyframes. Once you have more than one keyframe, everywhere between those keyframes will scale fluidly. And you can always go back and change settings at a particular keyframe by clicking the marker along the top edge of the screen. Just don’t forget to include units when creating and editing values; if you don’t, the system won’t know what increment at which to change your sizes! Any CSS unit of measure will work, but due to a bug in Safari*, we recommend that you avoid setting your font size in em for now. *Safari team: look into this, please?

Fine tuning a font

Variable fonts are incredibly exciting in that they allow for unprecedented control over how a font is displayed on screen. Weight, width, optical sizing, and more can be set to any value within a defined range. This control is excellent when applied to fluid typography. As the size of your text gets larger, optical size, weight, and width values can change to accommodate the new scale of your type. This creates a more readable, more navigable user experience on a wider variety of viewports than ever before.

If you’re working with a variable font, you can click on the menu labeled vf next to the font family selection. These sliders allow you to set exactly the font style you want. If you are on a Mac, setting your font family to system-ui and changing the weight slider will give you an idea of how variable fonts work.

Getting comfortable with your typographic system

Now that you understand the basics of Typetura, dial in settings where you need them. In general, it’s better practice to start from smaller sizes and go up, but there’s no need to worry about the order in which you work. If something looks off, you can always adjust a setting or add a keyframe where you see that the fluidity needs to be tweaked.

Implementation

When you have everything dialed in and are ready to use your typographic system on your website, copy the CSS from the panel below the settings into your stylesheet. Before these styles can be fluid, you will need to add typetura.js to your project. If JavaScript isn’t available, or a browser doesn’t support the features used in Typetura, fallbacks to the largest size are built into the CSS output.