If you have used a type-scale generator before, you know how it usually goes. You pick a base size and ratio, and the generator gives you a scale.

The problem is, most generators stop there. The values still have to suit the interface, and the full type system has to be set up in Figma. We built Omni’s type tool to handle that next part.

Omni is now free to use. Open it in another tab to set up your type system as you follow the walkthrough.

Open Omni

Type scales generated for what you’re building

A marketing website can make room for a 64px display style. In a dashboard, the same size would overpower the information around it.

Omni uses the archetype you select to change the range. Website and Dashboard get different scales, while iOS and Android begin with their respective platform conventions.

The names change too. The iOS option uses roles from Apple’s Human Interface Guidelines, while Android follows Google’s Material Design. You do not have to remap a generic hierarchy once the scale has been generated.

The usual adjustments you make are already accounted for in Omni

Set a 16px base and a ratio of 1.25 in a conventional generator, and it may return 61.04px or 48.83px. The calculation is correct, but those are probably not the sizes you would carry into the interface.

Normally, you would round each value and work out its line height one style at a time. Omni rounds the generated sizes and snaps the line heights to a 4px or 8px grid, with every value still open to adjustment.

The styles are also grouped by use, with display, heading, body and label names already in place. Tablet and mobile versions belong to the same system.

When you export, the named styles and responsive versions go into Figma with the scale. As Arjun Rajkishore, Principal Designer at Canvs, puts it, the idea is to give designers “the point to tweak, not the point to create.”

Let’s walk through the setup in the video below. You can open Omni here and follow along. I’ve included the same steps underneath in case you want to come back to a particular control.

Set up your type system in six steps

1. Choose the product archetype
   Select Website, Dashboard, iOS or Android. Omni changes the number of type styles and the way they are named, so the scale is built for what you’re designing.

2. Pick the unit and a starting preset
   Choose whichever unit your team works in: rem, px or pt. Each archetype also comes with its own presets. If one suits the project, pick it and you’re ready to review the scale.

3. Set a base size and choose the scale ratio
   If you’d rather build your own scale, start with the base size and ratio. Omni uses them to generate the progression.

4. Choose your fonts
   You can keep one font across the system or choose different ones for headings and body copy. Pick from the Google Fonts already available in Omni, or upload your own.

5. Review and adjust the styles
   Here’s where Omni really helps. Most type-scale tools leave you with awkward decimals that you end up fixing by hand.
   Omni rounds every size to the nearest whole number and snaps the line heights to multiples of 4px or 8px.
   If everything looks good, you can leave it as it is. If a style needs more work, open it and change its size or line height. You can add any extra font weights here too.
   Omni also scales the type for tablet and mobile automatically. Switch between devices to see how each size changes, then make any tweaks you need. You can also check the system in the website or app preview and adjust it from there.

6. Export the system
   Take it as code, download a Markdown file for your design agent, or export it directly into Figma.
   For Figma, copy the generated code, open the console in your file and paste it in. Your text styles are all set up and linked to variables, with modes for each device.

And that’s it. Once the styles are in Figma, you can see how they behave in the actual interface and spend your time on the choices specific to the project.

Type is one part of Omni. The color, grid, spacing and elevation tools handle the same kind of setup across the rest of the foundation, with every value open to adjustment.

Omni is free to use now, so set up your first type system and tell us how it goes.