Typography

Use tokens in code

<h1 className="tpz-h-fmly">Page heading</h1>

<h2 className="tpz-h-fmly tpz-h2-sz tpz-h2-wgt">
  Section heading
</h2>

<h3 style={{ fontFamily: "var(--tpz-heading-family)", fontSize: "var(--tpz-h3-size)" }}>
  Sub heading
</h3>

const headingStyle = {
  fontFamily: "var(--tpz-heading-family)",
  fontSize: "var(--tpz-h4-size)",
  fontWeight: "var(--tpz-h4-weight)",
};

<h4 style={headingStyle}>Card title</h4>

Change token values using the Engine

Every project has its own Tokens Engine. Changes are saved to draft automatically and take effect instantly. Use Publish Live to display the changes in the deployed site.
Read more about the engine

Change token values using the Editor

In the editor, open the Typography panel to set font family, weight and size for body and headings texts. You can set a font family for all headings across your entire project by simply selecting it and clicking Publish. Read more about the editors here:Live Editor|Local Editor

Full typography tokens