Most of any interface is text: labels, buttons, prices, error messages, instructions. Good typography for UI makes that text easy to read and easy to scan. Combined with colour and hierarchy, it decides whether a screen feels calm and clear or crowded and tiring.
Choosing a typeface
For product UI, readability beats personality. A good UI typeface has clear, open letter shapes, distinct characters (capital I, lowercase l and the number 1 should not look the same), several weights, and good support for numbers and symbols.
- Start with one family. A single sans-serif with regular, medium and bold weights can handle an entire app.
- Add a second family only with a clear purpose, such as a display font for marketing headings.
- Check that the font includes the ₹ rupee sign and tabular (equal-width) numbers if you show prices or tables.
- For Indian languages, choose families that cover the scripts you need – for example, the Noto Sans family offers Devanagari, Tamil, Telugu, Bengali and more, and families such as Mukta and Hind support Devanagari alongside Latin.
- Consider system fonts (Roboto on Android, San Francisco on iOS) for fast loading and a native feel.
Tip: Indian scripts often need more vertical space than Latin text because of marks above and below the letters. Test labels in each language you support, and give buttons enough height so text is not clipped.
Building a type scale
A type scale is a small, fixed set of font sizes. Instead of picking sizes randomly, you multiply a base size by a ratio. With a 16 px base and a ratio of 1.25, you get roughly 16, 20, 25, 31 and 39 px. Round them to practical values and give each a role:
| Style name | Size / line height | Weight | Use |
|---|---|---|---|
| Display | 40 / 48 | Bold | Hero headings on landing pages |
| Heading 1 | 32 / 40 | Bold | Page titles |
| Heading 2 | 24 / 32 | Semibold | Section titles |
| Heading 3 | 20 / 28 | Semibold | Card titles |
| Body | 16 / 24 | Regular | Paragraphs, descriptions |
| Small | 14 / 20 | Regular | Helper text, metadata |
| Label | 14 / 20 | Medium | Buttons, form labels |
Notice that every line height is a multiple of 4 or 8, which fits the spacing system from the wireframing lesson.
Readability rules
| Property | Practical guideline | Why |
|---|---|---|
| Body size | 16 px is a sensible default on mobile and web | Smaller text strains eyes, especially on small phones |
| Line height | About 1.4–1.6 × the font size for body text; tighter for big headings | Helps the eye find the next line |
| Line length | Roughly 45–75 characters per line for paragraphs | Very long lines are tiring; very short ones break the rhythm |
| Alignment | Left-aligned for most text | Justified text creates uneven gaps; centred blocks are hard to scan |
| Capitals | Avoid long ALL-CAPS text | Word shapes disappear and reading slows |
| Weight | Use 2–3 weights at most | Too many weights weaken hierarchy |
Accessibility and typography
- Text colour must meet the contrast ratios from the previous lesson: 4.5:1 for body text, 3:1 for large text.
- WCAG 1.4.4 requires that text can be resized up to 200% without losing content or function – design layouts that can grow, and avoid fixed-height text boxes.
- WCAG 1.4.12 requires that content still works when users increase line, letter, word and paragraph spacing – another reason to avoid tight, fixed containers.
- Do not put important text inside images; it cannot be resized, translated or read by screen readers.
Watch out: Light grey, thin, 12 px text may look elegant in a portfolio mock-up, but it is hard to read for many people and often fails contrast. Test on a real phone, outdoors if you can.
Setting up typography for UI in Figma
- Create text styles for each row of your type scale (Heading 1, Body, Label and so on).
- Optionally store font sizes, line heights and font families as number and string Variables, so a style can change in one place.
- Apply styles everywhere – avoid one-off text settings. Figma shows when text is not using a style.
- In Dev Mode, developers see the style name and values for each text layer.
Developers turn these styles into CSS using font-size, line-height and rem units – see CSS text and fonts and CSS units. For more rules and examples, read Typography rules for UI. In the final lesson, usability testing, you will check whether real people can actually use everything you have designed.