Configuration with packages

Typetura packages are pre-configured text styles that can be added to your website. Packages include fonts, basic typographic styles, and various headline and label styles. This is everything you need to get your website up and running quickly.

A good way of thinking about these packages is that they are design systems for your text. Each text component has a semantic name and has been designed and tested for use in a wide range of layouts. You can use the same headline component everywhere in your layout, and it will scale to the space available, as opposed to needing to choose the right sized headline for your layout.

Add the following code to your website along with your API key.

Inside your HTML <head> tag
<script src="https://cdn.typetura.com/typetura.js?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.typetura.com/armonk/typetura.css?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX">

Replace XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX with your API key and package-name with the package name you wish to use.

Add a typographic component to your page using a class

<h1 class="primary-headline">Hello world!</h1>
pagePackage components

Configure base font size and scale factor with JS

Before you call the Typetura script and style, insert the global Typetura configuration. base adjusts the base size of the text and scale adjusts how big the headlines will get in proportion to the text. If your body copy is too big, make the base value lower. If your headlines are too small, make the scale value slightly higher.

Inside your HTML <head> tag
<script>
  window.typetura = {
    base: 20, // target base font size in px. Mostly used by official packages.
    scale: 1  // scale factor to make headlines bigger or smaller. Mostly used by official packages.
  };
</script>
<script src="https://cdn.typetura.com/typetura.js?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.typetura.com/armonk/typetura.css?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX">

Adjusting your base font size and scale with CSS

You might find that the text in Typetura packages is too large or small. By default, it’s roughly 20px on a larger screen. You can modify this value with the following code:

CSS
:root {
    --tt-base: 20;
    --tt-scale: 1;
}

Be sure to use a unitless number here. A value of 20px will not work, but a value of 20 will work.

You can also adjust the scale factor on individual elements. So if a headline is slightly too big or too small you can adjust it individually.

CSS
.primary-headline {
    /* decrease the scale factor of the headline */
    --tt-scale: 0.8;
}

Congratulations! you are ready to use your Typetura package.

If you have a technical support inquiry, contact support@typetura.com

pagePackage componentspageSupport and services

Last updated