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.
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
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.
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:
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.
Congratulations! you are ready to use your Typetura package.
If you have a technical support inquiry, contact support@typetura.com
Last updated