Type previews for a mobile app mockup

A font can look polished in a large heading but become hard to read in a small button or navigation label. It can also lack a character your app needs, such as an accented letter or a currency symbol.

Before settling on a typeface, preview it with the words and symbols your app will actually show. TooLab’s Installed Fonts tool lets you browse fonts available on your computer and preview your own text. Use it to narrow your choices, then check the mockup at its intended mobile size.

Preview fonts with app text

1. Open Installed Fonts in Chrome or Edge on a computer. The tool works best in these browsers. Other browsers may show a reduced version or no font list.
2. Type or paste a short sample that resembles your app’s real interface. Include a heading, a sentence, a button label, numbers, punctuation, and any accented letters or symbols your audience will see.
3. Compare fonts using the same sample. Look at letter shapes, spacing, and how easy the text is to scan, especially in short labels and dense screens.
4. Check the typeface’s regular and bold styles if they are available. See whether emphasis stays clear without making labels look cramped.
5. Take your shortlist into the mockup and review it at the target screen size. A browser preview helps you compare fonts, but the mockup shows how they work with your actual layout.

Use actual interface copy when possible. A sample such as Profile, Order #1084, Save changes, and á é ñ € reveals more than a line of repeated letters. If the app has multiple languages, include characters from those languages too.

What the preview tells you

The text is easy to read at a small size

Letters remain distinct and words are easy to scan in the preview. That is a good sign for compact interface text, but check the mockup at the actual size and on a phone. Roomy spacing in a preview may not match a narrow button or a dense list.

Some characters look different or are missing

The font may not include every character in your sample. A missing character can appear in a different typeface, which is called a fallback. That change can make a word or number look uneven. Test names, currencies, punctuation, and language-specific letters that matter to your app.

Bold text looks too heavy or too similar to regular

The available font styles may not give you the contrast your design needs. Check headings, selected items, and error messages in context. If the difference is difficult to see, consider a family with a clearer weight range or use another visual cue, such as an icon or underline, where appropriate.

The preview looks right, but the app mockup does not

The mockup may use a different font, size, line height, or rendering method. Font appearance can vary across operating systems and apps. Treat the preview as a shortlist tool, not proof that text will look identical on every phone.

How to choose and check your shortlist

1. Start with the smallest text. Check captions, navigation labels, form hints, and secondary information first. If a font is unclear at the size your design needs, a large heading preview will not make it suitable for that role.
2. Compare similar text side by side. Use the same words, size, and weight for each candidate. Pay attention to easily confused characters such as I, l, and 1, and to digits in prices or account details.
3. Test the full character set you need. Add accented letters, punctuation, and symbols used in your app. A font preview can reveal missing glyphs, but it does not tell you whether a font is licensed for embedding or distribution.
4. Check line wrapping in the mockup. Replace placeholder text with longer real labels and sentences. A typeface with wider letters may push words onto another line or make a button too narrow.
5. Use the font that the app will actually load. If your mockup only uses a font installed on your computer, another person may see a substitute. Confirm that the design or development setup includes the intended font and an appropriate fallback.

If a font is missing from the list

1. Check the browser first. Use Chrome or Edge on a computer and reload the tool. Installed Fonts relies on browser access to local fonts, which is not available in every browser.
2. Confirm that the font is installed. On Windows 11, check Settings › Personalization › Fonts. On macOS, open the Font Book app and look for the family. A font file sitting in a downloads folder is not necessarily installed.
3. Restart the browser after installing it. Close and reopen the browser, then check the list again. This can refresh the fonts the browser detects.
4. Check the mockup’s font setting. The font shown by a local preview may not be selected in your design software or app project. Choose the intended family there and confirm that its styles load correctly.

Remember the difference between a computer preview and a mobile app

The Installed Fonts tool shows fonts available to the computer browser. It does not inspect every font on a phone, guarantee that a font is available to your app, or test how the app will render on every device. It is also designed for Chrome and Edge on a computer, not for checking local fonts on a phone.

For a dependable handoff, record the font family, style, and intended text size for each role in the mockup. Ask whoever builds the app to confirm how the font is supplied, whether its license allows that use, and what fallback appears if the font cannot load. Then review a build on at least one phone with the smallest text and longest labels in place.