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.
Typetura Core
WordPress
React

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

Inside your HTML <head> tag
1
<script src="https://cdn.typetura.com/typetura.js?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX"></script>
2
<link rel="stylesheet" type="text/css" href="https://cdn.typetura.com/armonk/typetura.css?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX">
Copied!
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

1
<h1 class="primary-headline">Hello world!</h1>
Copied!

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
1
<script>
2
window.typetura = {
3
base: 20, // target base font size in px. Mostly used by official packages.
4
scale: 1 // scale factor to make headlines bigger or smaller. Mostly used by official packages.
5
};
6
</script>
7
<script src="https://cdn.typetura.com/typetura.js?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX"></script>
8
<link rel="stylesheet" type="text/css" href="https://cdn.typetura.com/armonk/typetura.css?apiKey=XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX">
Copied!

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
1
:root {
2
--tt-base: 20;
3
--tt-scale: 1;
4
}
Copied!
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
1
.primary-headline {
2
/* decrease the scale factor of the headline */
3
--tt-scale: 0.8;
4
}
Copied!
Congratulations! you are ready to use your Typetura package.
First, ensure that you have installed the Typetura plugin, then you can navigate to your Typetura Settings page.
Navigate to Settings, then Typetura Settings.

Configuring Typetura

You can configure your Typetura integration from this dashboard. First, you will need a paid Typetura account and your API key. After you have your API key and have added it to the Typetura Settings page, you will have access to all of our packages.

Selecting a package

Typetura delivers complete typographic systems to your website. These will work with any theme, on any device. Choose the package you want from the drop-down and it will be applied to your website.

Choosing your base size

You may find that the font size is too big or small. You can adjust it by changing the base size. This value is the maximum size in pixels you want your paragraph text to get. By default, it is a value of 20, but it can be any value from 12 through 34.
For accessibility reasons the resulting size will change based on a user’s font size preferences. If a user prefers a font size of 22px, the text will be about 38% bigger than standard.

Auto typesetting

If you wish to have more control over your theme and typographic styles, check disable auto typesetting. If you don’t wish to manually add Typetura text classes to your theme or are unsure what this means, leave it unchecked.
Package styles are written with either high specificity, or low specificity. By default, this plugin uses the high specificity stylesheet. This allows it to overwrite the typographic styles in your theme, but it may make it more diffucult to control the styling on your page. If you are developing a theme from scratch, we reccomend disabling auto typesetting.
If you aren’t disabling auto typesetting, you must use a specificity of 0.11.0 or higher. You can also use !important flags. You can calculate specificity using this handy calculator: polypane.app/css-specificity-calculator/

Additional help and support

If you need additional help and support with your WordPress website, we are here for you. Please see the support and services section for more information.
We also realize high specificity stylesheets may not work perfectly in every theme. Please contact [email protected] if you are experiencing issues with your theme and we will work with you to fix the issue.

Configure your App.js file

App.js
1
// At the root of your application
2
// initialize Typetura
3
import Typetura, { initializeTypetura } from "@typetura/react";
4
5
// Initialize Typetura settings
6
export default class App extends Component {
7
componentDidMount() {
8
initializeTypetura({
9
// Browse packages and find your API key at
10
// https://typetura.com/typography-packages/
11
apiKey: "XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX",
12
packageName: "armonk"
13
});
14
}
15
}
16
17
// Or
18
19
export default () => {
20
useEffect(() => {
21
initializeTypetura({
22
withPackage: {
23
// Browse packages and find your API key at
24
// https://typetura.com/typography-packages/
25
apiKey: "XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX",
26
name: "armonk"
27
}
28
});
29
}, []);
30
Copied!

Use Typetura components in your project

Component.js
1
import Typetura from "@typetura/react";
2
3
export default () => {
4
return (
5
<div>
6
<Typetura.Big>Big</Typetura.Big>
7
<Typetura.Blockquote>Blockquote</Typetura.Blockquote>
8
<Typetura.Caption>Caption</Typetura.Caption>
9
<Typetura.Meta>Meta</Typetura.Meta>
10
<Typetura.PrimaryHeadline>PrimaryHeadline</Typetura.PrimaryHeadline>
11
<Typetura.PrimarySubheadline>
12
PrimarySubheadline
13
</Typetura.PrimarySubheadline>
14
<Typetura.Pullquote>Pullquote</Typetura.Pullquote>
15
<Typetura.SectionHeadline>SectionHeadline</Typetura.SectionHeadline>
16
<Typetura.SectionLabel>SectionLabel</Typetura.SectionLabel>
17
<Typetura.SectionSubheadline>
18
SectionSubheadline
19
</Typetura.SectionSubheadline>
20
<Typetura.Small>Small</Typetura.Small>
21
</div>
22
);
23
};
24
Copied!

Adjusting your font size

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
1
:root {
2
--tt-base: 20;
3
}
Copied!
Be sure to use a unitless number here. A value of 20px will not work, but a value of 20 will work.
Congratulations! you are ready to use your Typetura package.

If you have a technical support inquiry, contact [email protected]

Last modified 8mo ago
Copy link