How to choose typography for a UI

One family, three sizes

The quickest way to make a screen look typographically confused is to use too many typefaces. A display face for the titles and a neutral face for everything else, with a third somewhere in the middle, means the reader learns a new voice every time they move down the page. One family and three sizes does the same work for a fraction of the effort.

Three sizes is enough for nearly every interface, because size is only one of the ways to signal importance. Weight, color and space are free once the family is settled. A screen with a title at 24, a block title at 18 and body at 15 has a full three-level hierarchy, and the gap between the second and third level can come from a weight change rather than another step up in size.

There is a practical reason to leave the family question open for now. The App Builder typography panel sets size, weight, alignment and a few style toggles, but it does not choose a typeface, because the face is a decision for the build rather than for the mockup.

• One family for the whole product
• Three sizes, each with a named job
• Weight and color carry the levels between the sizes
• Decide the typeface when the build starts, not in the mockup

Note: The canvas Type tool offers Inter alongside Bangers, Caveat, Cinzel, Dancing Script, Lobster, Pacifico, Press Start 2P, Righteous and Rubik Glitch. Those ten are for drawn text, not for the components inside a frame, so they do not settle the typeface for a screen.

Match size to the job of the text

Each size in the scale belongs to a job, and the job decides the size. A screen title states what the screen is, so it wants to be large enough to be read before anything else. A block title introduces a group of content and can be smaller. Body text is what people read for meaning, and it wants to be comfortable rather than impressive.

Canvasola gives you three component kinds for that. The Heading kind renders a title and opens at 28 pixels, the Text kind renders a paragraph and opens at 15, and the Label kind is the caption. The Aa field in the inspector changes the size of any of them between 8 and 96 pixels, so you can match the scale you wrote down rather than living with the defaults.

1. Write the three roles. Put the three jobs on paper, for example screen title, block title and body, before you place a single text component.
2. Set the size on the kind. Type the size for that role into the Aa field so every component of that kind opens at the same value.
3. Keep the caption quiet. Use the Label kind for metadata and captions, and let the muted text token carry it rather than a smaller headline size.

Note: A size of 96 pixels is available but almost never correct in an interface. The useful sizes sit in the middle of the range, where a title still fits a 390 pixel wide frame.

Set line length for reading

Line length decides whether a paragraph is comfortable, and it is the setting people forget. A line of body text should hold roughly 45 to 75 characters, which is about two to three times the width of a phone screen. Past 90 characters the eye loses its place on the return sweep and starts skipping lines without noticing.

On a 390 pixel wide mobile frame with 15 pixel body text, a full width paragraph already lands near 45 characters, so mobile rarely breaks the rule. Web frames at 1280 pixels wide break it constantly, and the fix is a measure limit rather than a smaller type size. A reading column of 640 to 720 pixels inside a 1280 pixel frame keeps the same words comfortable.

• 45 to 75 characters per line for body text
• Full width paragraphs are the problem on a 1280 pixel web frame
• Cap the reading column and give the rest of the page another job
• A narrower measure beats a smaller type size

Note: A measure limit is a design decision you can state, which makes it much easier to defend than a type size that was reduced to fit.

Use weight for hierarchy, not color

Weight is the cheapest hierarchy signal in an interface because it costs no space. The typography panel offers Regular, Semi and Bold, so a title can be Semi while the body stays Regular, and the two read as different levels without a second size or a colored label. The same trick separates a selected tab from an unselected one.

Color should confirm a hierarchy rather than create it. A heading in the accent color looks important because it is colored, and then the reader wonders why the other headings on the same screen are black. A better use of color is one accent on the element the screen is about, with everything else in the ink, body and muted tones of the theme.

The token sets are built for that. Each theme separates ink, body and muted text along with a surface, an alternate surface and a border, so a third level caption can use the muted token and stay out of the way without a hand-picked gray. The relationships hold in the dark set too.

• Regular, Semi and Bold give three levels without extra sizes
• Use the accent on one element per screen, not on every title
• Let ink, body and muted carry the quiet levels
• Check the relationships in the light theme and the dark theme

Note: The static HTML export writes the type into the file as inline styles with the theme tokens as CSS variables, so the weights you chose travel with the mockup you hand over.

Keep the type scale in one place

A type scale that lives in the head of one person is a habit rather than a system. Write it down with the size, the weight and the job of each level, and keep that short document next to the mockups it describes. Three rows and a sentence about the family is enough for a whole product.

In the editor, the way to enforce a scale is to set the size on the component kind rather than on each instance. Every Heading placed in a frame then opens at the size you expect, and when the scale changes you change the Aa value on the components carrying it. A screen where one title is 24 and another is 26 is usually the result of typing a number into one box.

• Three rows in the document: size, weight and the job of each level
• Set the size on the component kind, not on a single instance
• Group a title with its value and its caption
• Change the scale once, then walk the screens that use it

Note: The hierarchy guide covers how to decide which level a piece of text belongs to before you pick a size for it.

Decide what the mockup should specify

Decide early what the mockup is for, because it decides how much typographic detail is worth setting. A mockup used to settle a layout needs the scale, the weights and the alignment. A mockup that will be handed to someone who will build the real thing needs exact sizes and a workable measure, and the family can still be a later decision.

The static HTML and CSS export is useful at that point. It writes the frames out as absolutely positioned divs with inline styles plus a small embedded stylesheet, and it carries no JavaScript and no interaction, so it is a faithful picture of the type at the sizes you set. The tokens travel with it as CSS variables, so the file shows whichever theme you exported from.

• A layout mockup needs the scale, the weights and the alignment
• A build mockup needs exact sizes and a workable measure
• The HTML export shows the type exactly as you set it
• Write down the decisions you deliberately left open

Note: The export is a static file with no interaction of any kind, so it demonstrates the type and the layout and nothing about behavior. The complete Canvasola guide lists the other formats the app can produce.

A checklist you can reuse

• A written type scale lists size, weight and job per level
• No more than three text sizes are used on a screen
• Heading, Text and Label each carry a level
• Body text sits between 45 and 75 characters per line
• The accent appears on one element per screen
• Sizes are set on the component kind, not one instance
• The scale has been checked in the light theme and the dark theme
• Decisions left open are written next to the frame

Common mistakes to avoid

• A type size for every block. Six similar sizes produce no hierarchy at all. Three roles, and let weight carry the difference between the lower levels.
• Coloring every title. When all the headings are accent colored, none of them reads as a heading any more. Color one element per screen and let the rest stay quiet.
• Full width body text on a web frame. A paragraph across 1280 pixels runs to roughly 140 characters and the eye loses the next line every time. Cap the reading column instead.
• Choosing a typeface inside the mockup. Interface frames carry no font family control, so a mockup cannot settle the face. Choose it at build time and specify the scale now.
• Typing a size into one heading. A single 26 pixel title next to a 24 pixel title is a difference nobody asked for. Set the size on the component kind and let the frame stay consistent.

Frequently asked questions

How many type sizes should a mobile app use?

Three is enough for most apps: a screen title, a block title and body text, with the fourth level carried by weight or color instead of another size. A fourth size usually means the hierarchy is deeper than the content warrants.

Can I set a font in App Builder?

Not for interface frames. The typography panel in the inspector sets size, weight, alignment and the italic, underline and wrap toggles, but it offers no typeface. The ten built-in fonts, Inter among them, belong to the canvas text tool. Choose the family when the product is built.

How do I check that the type is readable?

Set the frame to the size the product ships on, zoom to 100 percent with Ctrl/Cmd+0, and read the longest paragraph on the screen at that size. If you have to lean closer, the type is too small for the device. Then check the smallest preset, where the same paragraph has fewer pixels to work with.

Does the HTML export keep my type styles?

Yes. The export writes each component out as an absolutely positioned div with inline styles, so the sizes, weights and alignments you set appear in the file, and the theme tokens travel with it as CSS variables. There is no JavaScript in that file, so it shows the type and the layout only.

This guide is part of the design foundations collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.