Customizing Typography Styles

Great typography can make the difference between a museum exhibit that feels professional and one that feels cobbled together. Whether you're designing a kiosk experience for a natural history museum, a wayfinding display for a gallery, or an interactive timeline for a science center, consistent type styles help visitors focus on the content — not the inconsistencies. Zibit's Style Editor gives you a single place to define fonts, sizes, and scales that flow through every moment in your project automatically.

Explore the Style Editor

The Style Editor is your control center for shaping the look and feel of your entire project. On the left, you'll find panels grouped into Typography, Colors & Scheme, Shadows & Effects, Animations & Transitions, and styles for specific component types — from Basic Components like text and images to Interactive Components like timelines and buttons.

On the right, a live preview updates as you make changes, so you can see exactly how your choices will look on a real exhibit display. Don't worry about getting everything perfect right away — any style setting you apply here can be adjusted at any time.

Setting Your Typography

The Typography panel is where you define the fonts and type styles that apply across your entire project. Use the Headline Font and Body Font selectors to choose typefaces from the built-in font library — for example, a bold display font for exhibit titles and a clean readable font for descriptive body copy.

From here you can also adjust Headline Scale, Headline Weight, and Body Weight to fine-tune how text feels at every size. A live preview plays in the panel so you can see your choices in context before committing. Don't worry — you can return to this panel and update your typography at any time.

Previewing Your Typography in Action

With the style panel collapsed, you get a full-width view of the live preview — showing exactly how your typography choices ripple across every text component in your project. Scroll through the preview to see headings, body copy, captions, and interactive labels all rendered together, so you can judge how they feel as a complete system.

If something doesn't look right — say, a headline scale that feels too large for a touch kiosk, or a body weight that's hard to read on a bright gallery display — you can reopen the panel at any time and adjust. Click "Typography" in the side navigation to jump back to those settings without losing your place.

You now have the foundation for a consistent, well-designed typographic system across your project. Any changes you make in the Style Editor update everywhere — so you can experiment freely and refine as your project evolves. Here are some great ways to keep building on what you've set up:

• Apply your style set to a new display — Open a different view in your project and confirm your typography scales correctly for that screen resolution.
• Combine typography with color styles — Return to the Style Editor to pair your type choices with a cohesive color palette for an even more unified look.
• Test your styles across moments — Navigate through several moments in your project to make sure headings, body text, and labels all feel balanced in context.
• Create a second style set — Try duplicating your current style set and experimenting with a contrasting font pairing for seasonal or themed exhibits.
• Link a collection to a styled moment — Connect a data collection to a moment and see how your typography holds up when real content populates the components.