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 values in engine

From your /dashboard on tapuz.io, open any project and click Manage tokens to launch the tapuz engine. Changes are saved automatically and take effect instantly. Undo/redo is available throughout the session, and the editor stays in sync in real time.

Change values via editor

Open the editor locally from any project page by typing /?tapuz-edit OR via the project slot in your /dashboard in tapuz.io and go to the Typography tab. Change any values and watch the preview in real time (if you don't see a change, check that the element has the correct token). You can undo/redo any change. When you are ready, click Save to make your changes permanent. For online editing read here.

Full typography tokens