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
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.<h1 class="primary-headline">Hello world!</h1>
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">
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.
First, ensure that you have installed the Typetura plugin, then you can navigate to your Typetura Settings page.
Navigate to Settings, then Typetura Settings.
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.
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.
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.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/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.
App.js
// At the root of your application
// initialize Typetura
import Typetura, { initializeTypetura } from "@typetura/react";
// Initialize Typetura settings
export default class App extends Component {
componentDidMount() {
initializeTypetura({
// Browse packages and find your API key at
// https://typetura.com/typography-packages/
apiKey: "XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX",
packageName: "armonk"
});
}
}
// Or
export default () => {
useEffect(() => {
initializeTypetura({
withPackage: {
// Browse packages and find your API key at
// https://typetura.com/typography-packages/
apiKey: "XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX",
name: "armonk"
}
});
}, []);
Component.js
import Typetura from "@typetura/react";
export default () => {
return (
<div>
<Typetura.Big>Big</Typetura.Big>
<Typetura.Blockquote>Blockquote</Typetura.Blockquote>
<Typetura.Caption>Caption</Typetura.Caption>
<Typetura.Meta>Meta</Typetura.Meta>
<Typetura.PrimaryHeadline>PrimaryHeadline</Typetura.PrimaryHeadline>
<Typetura.PrimarySubheadline>
PrimarySubheadline
</Typetura.PrimarySubheadline>
<Typetura.Pullquote>Pullquote</Typetura.Pullquote>
<Typetura.SectionHeadline>SectionHeadline</Typetura.SectionHeadline>
<Typetura.SectionLabel>SectionLabel</Typetura.SectionLabel>
<Typetura.SectionSubheadline>
SectionSubheadline
</Typetura.SectionSubheadline>
<Typetura.Small>Small</Typetura.Small>
</div>
);
};
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;
}
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.
Last modified 2yr ago